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

package/src/ListItem/ListItemText.tsx

@@ -1,8 +1,7 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { Text } from '../Text';
-import { alpha } from '../color';
-import { useListItemContext } from './context';
 
 export interface ListItemTextProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -14,7 +13,6 @@ export interface ListItemTextProps
 export const ListItemText = forwardRef<HTMLDivElement, ListItemTextProps>(
   function ListItemText(props, forwardedRef) {
     const { as: Comp = 'div', text, secondaryText, ...otherProps } = props;
-    const { color, disabled } = useListItemContext();
 
     return (
       <Comp ref={forwardedRef} {...otherProps}>
@@ -25,7 +23,8 @@ export const ListItemText = forwardRef<HTMLDivElement, ListItemTextProps>(
             variant="body2"
             display="block"
             __css={{
-              color: alpha(color, disabled ? 0.3 : 0.57),
+              color: 'currentColor',
+              opacity: 0.65,
             }}
           >
             {secondaryText}

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
@@ -34,11 +41,11 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
       as={List}
       innerAs={as}
       ref={ref as any}
-      elevation={8}
+      elevation={2}
+      darkThemeBackgroundOverlay={2}
       outlined={false}
       variant="default"
       __css={{
-        width: 0,
         minWidth: rem(112),
         maxWidth: rem(280),
         maxHeight: rem(300),

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 {
@@ -17,7 +18,7 @@ const Example = () => {
       <Box
         m={3}
         display="inline-block"
-        sx={{ position: 'relative', bg: 'muted', borderRadius: 4 }}
+        sx={{ position: 'relative', bg: 'muted', borderRadius: 'extra-small' }}
       >
         <NotchedOutline
           borderColor="primary"

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 = (
@@ -78,18 +79,18 @@ export const InnerContainer = styled('div', {
     }
 
     const inactiveStyle = {
-      color: alpha('on.surface', 0.6),
-      borderColor: alpha('on.surface', 0.38),
+      color: 'on.surface-variant',
+      borderColor: 'outline',
       ...borderStyling(borderRadius, borderWidth),
     };
 
     const hoverStyle = {
-      borderColor: alpha('on.surface', 0.87),
-      color: alpha('on.surface', 0.6),
+      borderColor: 'on.surface',
+      color: 'on.surface-variant',
     };
 
     const focusStyle = {
-      borderColor: alpha(color, 0.87),
+      borderColor: color,
       color: alpha(color, 0.87),
       ...borderStyling(borderRadius, borderWidthWhenFocused),
     };

package/src/Paper/Paper.story.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { Paper } from './';
 import { Text } from '../Text';
 import { Box } from '../Box';
@@ -11,8 +12,21 @@ const Example = ({}) => {
   const [elevation, setElevation] = useState(0);
 
   return (
-    <Box p="6" bg={'surface'} color={'on.surface'} width="100%" height="100vh">
-      <Paper outlined width="300px" height="300px" elevation={elevation} mb="4">
+    <Box
+      p="6"
+      bg={'surface'}
+      color={'on.primary-container'}
+      width="100%"
+      height="100vh"
+    >
+      <Paper
+        width="216px"
+        height="216px"
+        elevation={elevation}
+        darkThemeBackgroundOverlay={elevation}
+        mb="4"
+        sx={{ borderRadius: 'large' }}
+      >
         <Text variant="h3">Hello</Text>
         <Text variant="body1">This is looking cool</Text>
         Pretty cool.
@@ -24,7 +38,7 @@ const Example = ({}) => {
         <input
           type="range"
           min={0}
-          max={24}
+          max={5}
           value={elevation}
           onChange={(e) => setElevation(Number(e.target.value))}
         />

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, getDarkThemeBackgroundOverlay } 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,7 +51,16 @@ export const Paper = forwardRef<HTMLDivElement, PaperProps>(function Paper(
               borderColor: alpha('on.surface', 0.12),
             }
           : {}),
-        ...getDarkThemeBackgroundOverlay(theme, backgroundOverlay ?? elevation),
+        ...(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';
@@ -50,7 +52,7 @@ const RadioButtonInner = forwardRef<
             outline: 'none',
           },
           border: 'none',
-          borderRadius: '50%',
+          borderRadius: 'full',
           zIndex: 1,
           position: 'absolute',
           ...__css,

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
@@ -19,7 +20,7 @@ export const RadioButtonIcon = forwardRef<HTMLDivElement, RadioButtonIconProps>(
         __css={{
           borderColor: 'currentColor',
           borderStyle: 'solid',
-          borderRadius: '50%',
+          borderRadius: 'full',
           borderWidth: rem(2),
           width: '100%',
           height: '100%',
@@ -30,7 +31,7 @@ export const RadioButtonIcon = forwardRef<HTMLDivElement, RadioButtonIconProps>(
         <Box
           __css={{
             backgroundColor: 'currentColor',
-            borderRadius: '50%',
+            borderRadius: 'full',
             width: '100%',
             height: '100%',
             transition:

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'),
   });
@@ -34,7 +40,7 @@ const Example = () => {
         bg="#eee"
         sx={{
           position: 'relative',
-          borderRadius: 30,
+          borderRadius: 'extra-large',
           overflow: 'hidden',
           willChange: 'transform',
         }}

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,
@@ -22,7 +23,7 @@ export const rippleStyle = ({
   backgroundColor: `var(${RIPPLE_BACKGROUND_COLOR})`,
   transformOrigin: 'center center',
   opacity: 0,
-  borderRadius: '50%',
+  borderRadius: '999999px',
   animation,
   willChange: 'opacity,transform',
 });

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,
@@ -28,6 +32,7 @@ export const RippleBox: <
       rippleColor, // eslint-disable-line @typescript-eslint/no-unused-vars
       center, // eslint-disable-line @typescript-eslint/no-unused-vars
       disabled, // eslint-disable-line @typescript-eslint/no-unused-vars
+      rippleEnabled, // eslint-disable-line @typescript-eslint/no-unused-vars
       style, // eslint-disable-line @typescript-eslint/no-unused-vars
       ...otherProps
     } = props;

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,17 +1,19 @@
-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?: string | number;
-  hoverOpacity?: string | number;
-  focusOpacity?: string | number;
-  pressedOpacity?: string | number;
+  baseOpacity?: number;
+  hoverOpacity?: number;
+  focusOpacity?: number;
+  pressedOpacity?: number;
   rippleColor?: string;
+  rippleEnabled?: boolean;
   center?: boolean;
   disabled?: boolean;
   style?: CSSProperties;
@@ -35,6 +37,7 @@ export function useRippleSurface<T extends HTMLElement>(
     onPointerDown,
     style = {},
     disabled,
+    rippleEnabled = true,
     ...rippleProps
   } = opts;
 
@@ -84,18 +87,41 @@ export function useRippleSurface<T extends HTMLElement>(
     '&:hover::before': {
       opacity: hoverOpacity,
     },
-    '&:focus::before': {
+    '&:focus-visible::before': {
       opacity: focusOpacity,
     },
-    ['&: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']: {
-      opacity: 0,
+    ...(!rippleEnabled && {
+      '&:active::before': {
+        opacity: pressedOpacity,
+      },
+    }),
+    '&[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,
+      },
+    }),
+    ['&: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
-    '&::after': { ...rippleStyle({ animation }) },
+    ...(rippleEnabled && {
+      '&::after': { ...rippleStyle({ animation }) },
+    }),
   };
 
   return {

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