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

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,9 +1,11 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { BoxProps, Box } from '../Box';
+import * as React from 'react';
 import { rem } from 'polished';
-import { useTheme } from '../theme';
 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 {
@@ -67,6 +69,7 @@ export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
           },
           '&[aria-selected="true"]': {
             backgroundColor: alpha(color, baseOpacity + 0.12),
+            color,
             ':hover': {
               backgroundColor: alpha(color, hoverOpacity + 0.12),
             },

package/src/ListItem/ListItemText.tsx

@@ -1,5 +1,6 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { Text } from '../Text';
 
 export interface ListItemTextProps

package/src/Menu/Menu.tsx

@@ -1,23 +1,30 @@
-import { forwardRef, FC } from 'react';
-import type * as React from 'react';
-import {
-  MenuButton as MenuButtonCore,
+import type { FC } from 'react';
+import { forwardRef } from 'react';
+import * as React from 'react';
+import type {
   MenuButtonProps as MenuButtonPropsCore,
-  MenuList as _MenuListCore,
   MenuListProps as MenuListPropsCore,
-  MenuItem as MenuItemCore,
   MenuItemProps as MenuItemPropsCore,
-  MenuPopover as _MenuPopoverCore,
   MenuPopoverProps as MenuPopoverPropsCore,
   MenuProps as MenuPropsCore,
 } from '@basic-ui/core';
-import { List } from '../List';
-import { ListItem, ListItemProps } from '../ListItem';
-import { Button, ButtonProps } from '../Button';
-import { BoxProps, Box } from '../Box';
+import {
+  MenuButton as MenuButtonCore,
+  MenuList as _MenuListCore,
+  MenuItem as MenuItemCore,
+  MenuPopover as _MenuPopoverCore,
+} from '@basic-ui/core';
 import { rem } from 'polished';
+
+import { List } from '../List';
+import type { ListItemProps } from '../ListItem';
+import { ListItem } from '../ListItem';
+import type { ButtonProps } from '../Button';
+import { Button } from '../Button';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { growAnimation } from './animation';
-import { PaperProps } from '../Paper';
+import type { PaperProps } from '../Paper';
 
 /////////////////////////////////////////////////////
 // MenuList
@@ -35,6 +42,7 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
       innerAs={as}
       ref={ref as any}
       elevation={2}
+      darkThemeBackgroundOverlay={2}
       outlined={false}
       variant="default"
       __css={{

package/src/Menu/animation.ts

@@ -1,5 +1,5 @@
 import { keyframes } from '@emotion/react';
-import { Keyframes } from '@emotion/serialize';
+import type { Keyframes } from '@emotion/serialize';
 
 export const growAnimation: Keyframes = keyframes({
   '0%': {

package/src/NotchedOutline/NotchedOutline.story.tsx

@@ -1,8 +1,9 @@
 import {} from './';
+import { rem } from 'polished';
+
 import { NotchedOutline } from './NotchedOutline';
 import { Box } from '../Box';
 import { FloatingLabel } from '../FloatingLabel';
-import { rem } from 'polished';
 // import './styles.css';
 
 export default {

package/src/NotchedOutline/NotchedOutline.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
 import { rem } from 'polished';
+
 import { NotchedOutlineProvider } from './context';
 import { useTheme } from '../theme';
 import { NOTCH_PADDING, InnerContainer } from './styledComponents';

package/src/NotchedOutline/styledComponents.ts

@@ -1,10 +1,11 @@
 import styled from '@emotion/styled';
-import { Theme } from '../theme';
 import { rem } from 'polished';
-import { alpha } from '../color';
 import shouldForwardProp from '@styled-system/should-forward-prop';
 import { css } from '@styled-system/css';
 
+import { alpha } from '../color';
+import type { Theme } from '../theme';
+
 export const NOTCH_PADDING = 4;
 
 const makeSelector = (

package/src/Paper/Paper.story.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
+
 import { Paper } from './';
 import { Text } from '../Text';
 import { Box } from '../Box';
-import { rem } from 'polished';
 
 export default {
   title: 'components/Paper',
@@ -23,6 +23,7 @@ const Example = ({}) => {
         width="216px"
         height="216px"
         elevation={elevation}
+        darkThemeBackgroundOverlay={elevation}
         mb="4"
         sx={{ borderRadius: 'large' }}
       >

package/src/Paper/Paper.tsx

@@ -1,15 +1,22 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Box, BoxProps } from '../Box';
-import { useTheme } from '../theme';
+import * as React from 'react';
 import { rem } from 'polished';
-import { alpha, getBackgroundOverlay } from '../color';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { useTheme } from '../theme';
+import {
+  alpha,
+  getBackgroundOverlay,
+  getDarkThemeBackgroundOverlay,
+} from '../color';
 
 export interface PaperProps extends BoxProps {
   as?: React.ElementType<any>;
   elevation?: number;
   outlined?: boolean;
   backgroundOverlay?: number | string;
+  darkThemeBackgroundOverlay?: number | string;
   children?: React.ReactNode;
 }
 
@@ -21,6 +28,7 @@ export const Paper = forwardRef<HTMLDivElement, PaperProps>(function Paper(
     outlined,
     elevation = 0,
     backgroundOverlay,
+    darkThemeBackgroundOverlay,
     __css = {},
     children,
     ...otherProps
@@ -43,11 +51,16 @@ export const Paper = forwardRef<HTMLDivElement, PaperProps>(function Paper(
               borderColor: alpha('on.surface', 0.12),
             }
           : {}),
-        ...getBackgroundOverlay(
-          theme,
-          backgroundOverlay ?? elevation,
-          'primary'
-        ),
+        ...(backgroundOverlay
+          ? getBackgroundOverlay(theme, backgroundOverlay, 'primary')
+          : {}),
+        ...(darkThemeBackgroundOverlay
+          ? getDarkThemeBackgroundOverlay(
+              theme,
+              darkThemeBackgroundOverlay,
+              'primary'
+            )
+          : {}),
         ...__css,
       }}
       {...otherProps}

package/src/ProgressSpinner/ProgressSpinner.story.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+
 import { ProgressSpinner } from './';
 import { Box } from '../Box';
 

package/src/ProgressSpinner/ProgressSpinner.tsx

@@ -1,8 +1,11 @@
-import { forwardRef, SVGAttributes } from 'react';
+import type { SVGAttributes } from 'react';
+import { forwardRef } from 'react';
 import { keyframes } from '@emotion/react';
-import { Box, BoxProps } from '../Box';
 import { rem } from 'polished';
 
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+
 export type ProgressSpinnerProps = BoxProps & {
   progress?: number;
   thickness?: number;

package/src/RadioButton/RadioButton.story.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { RadioButton, RadioGroup, Box } from '../';
 // import './styles.css';
 

package/src/RadioButton/RadioButton.tsx

@@ -1,11 +1,13 @@
-import { forwardRef, InputHTMLAttributes } from 'react';
-import {
-  RadioButton as RadioButtonCore,
-  RadioButtonProps as RadioButtonCoreProps,
-} from '@basic-ui/core';
-import { Box, BoxProps } from '../Box';
-import { RippleBox, RippleBoxProps } from '../Ripple';
+import type { InputHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+import type { RadioButtonProps as RadioButtonCoreProps } from '@basic-ui/core';
+import { RadioButton as RadioButtonCore } from '@basic-ui/core';
 import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import type { RippleBoxProps } from '../Ripple';
+import { RippleBox } from '../Ripple';
 import { alpha } from '../color';
 import { RadioButtonIcon } from './RadioButtonIcon';
 import { useTheme } from '../theme';

package/src/RadioButton/RadioButtonIcon.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
 import { rem } from 'polished';
+
 import { Box } from '../Box';
 
 export interface RadioButtonIconProps

package/src/RadioButton/RadioGroup.tsx

@@ -1,9 +1,9 @@
 import { forwardRef } from 'react';
-import { Box, BoxProps } from '../Box';
-import {
-  RadioGroup as RadioGroupCore,
-  RadioGroupProps as RadioGroupCoreProps,
-} from '@basic-ui/core';
+import type { RadioGroupProps as RadioGroupCoreProps } from '@basic-ui/core';
+import { RadioGroup as RadioGroupCore } from '@basic-ui/core';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export type RadioGroupProps = Omit<
   BoxProps,

package/src/Ripple/Ripple.story.tsx

@@ -1,10 +1,11 @@
 import { useRef, useState } from 'react';
+import { get } from '@styled-system/css';
+
 import { Ripple, useRipple } from './';
 import { Box } from '../Box';
 import { Text } from '../Text';
 import { Button } from '../Button';
 import { useTheme } from '../theme';
-import { get } from '@styled-system/css';
 
 export default {
   title: 'helper components/Ripple',
@@ -14,7 +15,12 @@ const Example = () => {
   const theme = useTheme();
   const ref = useRef<HTMLDivElement>();
   const [textColor, setTextColor] = useState<string>(undefined);
-  const { activate, deactivate, animation, style: rippleStyle } = useRipple({
+  const {
+    activate,
+    deactivate,
+    animation,
+    style: rippleStyle,
+  } = useRipple({
     opacity: 1,
     backgroundColor: get(theme, 'colors.primary'),
   });

package/src/Ripple/Ripple.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
-import { CSSObject } from '@emotion/react';
+import type { CSSObject } from '@emotion/react';
+
 import {
   RIPPLE_BACKGROUND_COLOR,
   RIPPLE_SIZE,

package/src/Ripple/RippleBox.tsx

@@ -1,7 +1,11 @@
-import { forwardRef, HTMLAttributes } from 'react';
-import type * as React from 'react';
-import { UseRippleSurfaceOptions, useRippleSurface } from './useRippleSurface';
-import { Box, BoxProps } from '../Box';
+import type { HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+import * as React from 'react';
+
+import type { UseRippleSurfaceOptions } from './useRippleSurface';
+import { useRippleSurface } from './useRippleSurface';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export type RippleBoxProps<
   H extends HTMLElement = HTMLDivElement,

package/src/Ripple/keyframes.ts

@@ -1,5 +1,6 @@
 import { keyframes } from '@emotion/react';
-import { Keyframes } from '@emotion/serialize';
+import type { Keyframes } from '@emotion/serialize';
+
 import {
   RIPPLE_TRANSLATE_START,
   RIPPLE_TRANSLATE_END,

package/src/Ripple/useRipple.ts

@@ -1,4 +1,5 @@
 import { useState, useRef, useEffect } from 'react';
+
 import { radiusIn, opacityIn, opacityOut } from './keyframes';
 import {
   RIPPLE_TRANSLATE_START,

package/src/Ripple/useRippleHandlers.ts

@@ -1,6 +1,8 @@
 import { useRef } from 'react';
 import type * as React from 'react';
-import { RippleOptions, useRipple } from './useRipple';
+
+import type { RippleOptions } from './useRipple';
+import { useRipple } from './useRipple';
 
 const disabledHandler = () => {
   /* When disabled, we don't wanna handle neither keyDown, nor pointerDown */

package/src/Ripple/useRippleSurface.ts

@@ -1,10 +1,11 @@
-import { CSSProperties } from 'react';
-import { useTheme } from '../theme';
+import type { CSSProperties } from 'react';
 import { get } from '@styled-system/css';
+import { wrapEvent } from '@basic-ui/core';
+
+import { useTheme } from '../theme';
 import { rippleStyle } from './Ripple';
 import { useRippleHandlers } from './useRippleHandlers';
-import { wrapEvent } from '@basic-ui/core';
-import { SxStyleProp } from '../Box';
+import type { SxStyleProp } from '../Box';
 
 export interface UseRippleSurfaceOptions<T extends HTMLElement> {
   baseOpacity?: number;
@@ -110,9 +111,10 @@ export function useRippleSurface<T extends HTMLElement>(
     }),
     ['&: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,
-    },
+    '&[data-disabled]:active::before,&:disabled[aria-pressed="true"]::before']:
+      {
+        opacity: 0,
+      },
     '&:disabled,&[data-disabled]': {
       cursor: 'default',
     },

package/src/Select/PaymentMethodSelect.story.tsx

@@ -1,7 +1,9 @@
-import { Box, Select, SelectItem, SelectProps } from '../';
 import { forwardRef, useState } from 'react';
 import type { ReactElement, ComponentType } from 'react';
 
+import type { SelectProps } from '../';
+import { Box, Select, SelectItem } from '../';
+
 export default {
   title: 'components/Select/Complex',
 };

package/src/Select/Select.story.tsx

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

package/src/Select/Select.tsx

@@ -1,12 +1,13 @@
 import { forwardRef, useState, useRef, useEffect, useId } from 'react';
-
-import type * as React from 'react';
+import * as React from 'react';
 import {
   wrapEvent,
   assignMultipleRefs,
   useControlledState,
 } from '@basic-ui/core';
-import { useTheme, Theme } from '../theme';
+
+import type { Theme } from '../theme';
+import { useTheme } from '../theme';
 import { Select as SelectComp, SelectButton } from './styledComponents';
 import { FilledContainer } from '../TextField/FilledContainer';
 import { HelperText } from '../TextField/HelperText';
@@ -15,7 +16,8 @@ import { SelectProvider } from './context';
 import { Menu, MenuPopover, MenuList } from '../Menu';
 import { SelectIcon } from './SelectIcon';
 import { makeDefaultRender } from './defaultRender';
-import { Box, BoxProps } from '../Box';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { IconContainer } from '../TextField/IconContainer';
 
 const componentMap = {

package/src/Select/SelectIcon.tsx

@@ -1,7 +1,10 @@
-import { forwardRef, SVGAttributes } from 'react';
-import type * as React from 'react';
-import { Box, BoxProps } from '../Box';
+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';
 

package/src/Select/defaultRender.ts

@@ -1,18 +1,18 @@
 import { Children, isValidElement } from 'react';
 
-export const makeDefaultRender = (children?: React.ReactNode) => (
-  val?: string
-): string | undefined => {
-  if (children && val !== undefined) {
-    const allChildren = Children.toArray(children);
-    for (let i = 0; i < allChildren.length; i++) {
-      const child = allChildren[i];
-      if (isValidElement(child)) {
-        if (String(child.props.value) === val) {
-          return child.props.children;
+export const makeDefaultRender =
+  (children?: React.ReactNode) =>
+  (val?: string): string | undefined => {
+    if (children && val !== undefined) {
+      const allChildren = Children.toArray(children);
+      for (let i = 0; i < allChildren.length; i++) {
+        const child = allChildren[i];
+        if (isValidElement(child)) {
+          if (String(child.props.value) === val) {
+            return child.props.children;
+          }
         }
       }
     }
-  }
-  return val || undefined;
-};
+    return val || undefined;
+  };

package/src/Select/styledComponents.tsx

@@ -1,7 +1,9 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { MenuButton as BaseMenuButton, MenuButtonProps } from '@basic-ui/core';
-import { Theme } from '../theme';
+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

package/src/SelectItem/SelectItem.tsx

@@ -1,8 +1,10 @@
 import { forwardRef } from 'react';
-import { MenuItem, MenuItemProps } from '../Menu';
-import { useSelectContext } from '../Select/context';
 import { wrapEvent } from '@basic-ui/core';
 
+import type { MenuItemProps } from '../Menu';
+import { MenuItem } from '../Menu';
+import { useSelectContext } from '../Select/context';
+
 export type SelectItemProps = MenuItemProps;
 
 const ZERO_WIDTH_SPACE = '\u200b';

package/src/SelectionControl/SelectionControlLabel.tsx

@@ -1,6 +1,9 @@
-import { forwardRef, LabelHTMLAttributes } from 'react';
-import type * as React from 'react';
-import { Box, BoxProps } from '../Box';
+import type { LabelHTMLAttributes } 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<

package/src/SelectionControl/SelectionControlText.tsx

@@ -1,6 +1,8 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Text, TextProps } from '../Text';
+import * as React from 'react';
+
+import type { TextProps } from '../Text';
+import { Text } from '../Text';
 import { alpha } from '../color';
 
 export interface SelectionControlTextProps extends TextProps {

package/src/Skeleton/DelayAppearance.tsx

@@ -1,8 +1,10 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { BoxProps, Box } from '../Box';
+import * as React from 'react';
 import { keyframes } from '@emotion/react';
-import { Keyframes } from '@emotion/serialize';
+import type { Keyframes } from '@emotion/serialize';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export const appearAnimation: Keyframes = keyframes({
   to: {

package/src/Skeleton/Skeleton.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';
 import { alpha } from '../color';
 import { useTheme } from '../theme';
 import { pulseAnimationStyle, waveAnimationStyle } from './animation';

package/src/Skeleton/animation.ts

@@ -1,6 +1,7 @@
 import { keyframes } from '@emotion/react';
-import { Keyframes } from '@emotion/serialize';
-import { SystemStyleObject } from '@styled-system/css';
+import type { Keyframes } from '@emotion/serialize';
+import type { SystemStyleObject } from '@styled-system/css';
+
 import { alpha } from '../color';
 
 export const pulseAnimation: Keyframes = keyframes({

package/src/Snackbar/Snackbar.story.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { Snackbar } from './';
 import { Box } from '../Box';
 import { Button } from '../Button';