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

package/src/NotchedOutline/styledComponents.ts

@@ -1,10 +1,12 @@
 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';
+import { EASING_STANDARD } from '../motion';
+
 export const NOTCH_PADDING = 4;
 
 const makeSelector = (
@@ -78,18 +80,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),
     };
@@ -104,7 +106,7 @@ export const InnerContainer = styled('div', {
       ['[data-notch-outline-item]']: {
         boxSizing: 'border-box',
         borderStyle,
-        transition: `border-color .15s cubic-bezier(.4,0,.2,1)`,
+        transition: `border-color .15s ${EASING_STANDARD}`,
         ...(forceActive ? focusStyle : inactiveStyle),
       },
       // notch items styles when input is hovered

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,20 +12,33 @@ 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">
-        <Text variant="h3">Hello</Text>
-        <Text variant="body1">This is looking cool</Text>
+    <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="headline-medium">Hello</Text>
+        <Text variant="body-medium">This is looking cool</Text>
         Pretty cool.
       </Paper>
       <label>
-        <Text as="span" variant="body1">
+        <Text as="span" variant="body-medium">
           Elevation: {elevation}
         </Text>
         <input
           type="range"
           min={0}
-          max={24}
+          max={5}
           value={elevation}
           onChange={(e) => setElevation(Number(e.target.value))}
         />

package/src/Paper/Paper.tsx

@@ -1,16 +1,23 @@
+import type { ElementType, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Box, BoxProps } from '../Box';
-import { useTheme } from '../theme';
 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>;
+  as?: ElementType<any>;
   elevation?: number;
   outlined?: boolean;
   backgroundOverlay?: number | string;
-  children?: React.ReactNode;
+  darkThemeBackgroundOverlay?: number | string;
+  children?: ReactNode;
 }
 
 export const Paper = forwardRef<HTMLDivElement, PaperProps>(function Paper(
@@ -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,12 @@
-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';
+import { EASING_STANDARD } from '../motion';
+
 export type ProgressSpinnerProps = BoxProps & {
   progress?: number;
   thickness?: number;
@@ -102,8 +106,7 @@ export const ProgressSpinner = forwardRef<HTMLDivElement, ProgressSpinnerProps>(
                       strokeDashoffset: '0px',
                     }
                   : {
-                      transition:
-                        'stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+                      transition: `stroke-dashoffset 300ms ${EASING_STANDARD} 0ms`,
                       strokeDasharray: circumference.toFixed(3),
                     }
               }

package/src/RadioButton/RadioButton.story.tsx

@@ -1,5 +1,6 @@
+import type { ChangeEvent } from 'react';
 import { useState } from 'react';
-import type * as React from 'react';
+
 import { RadioButton, RadioGroup, Box } from '../';
 // import './styles.css';
 
@@ -34,7 +35,7 @@ const Example = (props) => {
 
 const StandaloneExample = (props) => {
   const [selectedValue, setSelectedValue] = useState('a');
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     setSelectedValue(e.target.value);
   };
 

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';
@@ -19,7 +21,7 @@ export type RadioButtonProps = RadioButtonCoreProps;
 const RadioButtonInner = forwardRef<
   HTMLInputElement,
   RadioButtonProps &
-    BoxProps<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>
+    BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>
 >(function RadioButtonInner(props, forwardedRef) {
   const { innerAs: as, checked, disabled, __css, ...otherProps } = props;
   const color = 'primary';
@@ -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,10 +1,11 @@
+import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
 import { rem } from 'polished';
+
 import { Box } from '../Box';
+import { EASING_STANDARD } from '../motion';
 
-export interface RadioButtonIconProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface RadioButtonIconProps extends HTMLAttributes<HTMLDivElement> {
   checked?: boolean;
   disabled?: boolean;
 }
@@ -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,11 +31,10 @@ export const RadioButtonIcon = forwardRef<HTMLDivElement, RadioButtonIconProps>(
         <Box
           __css={{
             backgroundColor: 'currentColor',
-            borderRadius: '50%',
+            borderRadius: 'full',
             width: '100%',
             height: '100%',
-            transition:
-              'transform .12s cubic-bezier(0,0,.2,1) 0ms,background-color .12s cubic-bezier(0,0,.2,1) 0ms',
+            transition: `transform .12s ${EASING_STANDARD} 0ms,background-color .12s ${EASING_STANDARD} 0ms`,
             transform: checked ? 'scale(1)' : 'scale(0)',
           }}
         />

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,13 +40,13 @@ const Example = () => {
         bg="#eee"
         sx={{
           position: 'relative',
-          borderRadius: 30,
+          borderRadius: 'extra-large',
           overflow: 'hidden',
           willChange: 'transform',
         }}
       >
         <Ripple animation={animation} style={rippleStyle} />
-        <Text variant="h3" style={{ zIndex: 1, color: textColor }}>
+        <Text variant="headline-medium" style={{ zIndex: 1, color: textColor }}>
           Hello
         </Text>
       </Box>

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,11 +1,14 @@
-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 type { UseRippleSurfaceOptions } from './useRippleSurface';
+import { useRippleSurface } from './useRippleSurface';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export type RippleBoxProps<
   H extends HTMLElement = HTMLDivElement,
-  Attr = React.HTMLAttributes<H>
+  Attr = HTMLAttributes<H>
 > = BoxProps<H, Attr> & UseRippleSurfaceOptions<H>;
 
 export const RippleBox: <
@@ -28,6 +31,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 type { KeyboardEvent as ReactKeyboardEvent, PointerEvent } from 'react';
 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 */
@@ -16,7 +18,7 @@ export function useRippleHandlers<T extends HTMLElement>(opts: RippleOptions) {
     deactivate();
   };
 
-  const handlePointerDown = (e: React.PointerEvent<T>) => {
+  const handlePointerDown = (e: PointerEvent<T>) => {
     const rect = e.currentTarget.getBoundingClientRect();
     activate(rect, e.clientX, e.clientY, opts.center);
     window.addEventListener('pointerup', handlePointerUp);
@@ -34,7 +36,7 @@ export function useRippleHandlers<T extends HTMLElement>(opts: RippleOptions) {
     deactivate();
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent<T>) => {
+  const handleKeyDown = (e: ReactKeyboardEvent<T>) => {
     if (e.key !== ' ' || !keyReleased.current) {
       return;
     }

package/src/Ripple/useRippleSurface.ts

@@ -1,26 +1,33 @@
-import { CSSProperties } from 'react';
-import { useTheme } from '../theme';
+import type {
+  CSSProperties,
+  KeyboardEventHandler,
+  PointerEventHandler,
+} from 'react';
+import { useMemo } 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;
-  onPointerDown?: React.PointerEventHandler<T>;
-  onKeyDown?: React.KeyboardEventHandler<T>;
+  onPointerDown?: PointerEventHandler<T>;
+  onKeyDown?: KeyboardEventHandler<T>;
 }
 
 export function useRippleSurface<T extends HTMLElement>(
-  opts: UseRippleSurfaceOptions<T>
+  opts: UseRippleSurfaceOptions<T> = {}
 ) {
   let {
     // eslint-disable-next-line prefer-const
@@ -35,6 +42,7 @@ export function useRippleSurface<T extends HTMLElement>(
     onPointerDown,
     style = {},
     disabled,
+    rippleEnabled = true,
     ...rippleProps
   } = opts;
 
@@ -59,44 +67,78 @@ export function useRippleSurface<T extends HTMLElement>(
     ...rippleProps,
   });
 
-  const css: SxStyleProp = {
-    overflow: 'hidden',
-    position: 'relative',
-    cursor: 'pointer',
-    // fix overflow: hidden + borderRadius in Safari
-    // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479
-    willChange: 'transform,opacity',
-    WebkitTapHighlightColor: 'transparent',
-    // ripple overlay
-    '&::before': {
-      backgroundColor: rippleColor,
-      boxSizing: 'content-box',
-      position: 'absolute',
-      content: '""',
-      opacity: baseOpacity,
-      pointerEvents: 'none',
-      top: '0',
-      left: '0',
-      width: '100%',
-      height: '100%',
-      transition: 'opacity 75ms linear',
-    },
-    '&:hover::before': {
-      opacity: hoverOpacity,
-    },
-    '&:focus::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,
-    },
-    '&:disabled,&[data-disabled]': {
-      cursor: 'default',
-    },
-    // ripple
-    '&::after': { ...rippleStyle({ animation }) },
-  };
+  const css: SxStyleProp = useMemo(
+    () => ({
+      overflow: 'hidden',
+      position: 'relative',
+      cursor: 'pointer',
+      // fix overflow: hidden + borderRadius in Safari
+      // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479
+      willChange: 'transform,opacity',
+      WebkitTapHighlightColor: 'transparent',
+      // ripple overlay
+      '&::before': {
+        backgroundColor: rippleColor,
+        boxSizing: 'content-box',
+        position: 'absolute',
+        content: '""',
+        opacity: baseOpacity,
+        pointerEvents: 'none',
+        top: '0',
+        left: '0',
+        width: '100%',
+        height: '100%',
+        transition: 'opacity 75ms linear',
+      },
+      '&:hover::before': {
+        opacity: hoverOpacity,
+      },
+      '&:focus-visible::before': {
+        opacity: focusOpacity,
+      },
+      ...(!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
+      ...(rippleEnabled && {
+        '&::after': { ...rippleStyle({ animation }) },
+      }),
+    }),
+    [
+      animation,
+      baseOpacity,
+      focusOpacity,
+      hoverOpacity,
+      pressedOpacity,
+      rippleColor,
+      rippleEnabled,
+    ]
+  );
 
   return {
     style: { ...animationStyle, ...style },

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';