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

package/src/NavRail/index.ts

@@ -0,0 +1 @@
+export * from './NavRailItem';

package/src/NotchedOutline/NotchedOutline.tsx

@@ -1,13 +1,12 @@
+import type { HTMLAttributes, ReactNode } from 'react';
 import { forwardRef } 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';
 
-export interface NotchedOutlineProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface NotchedOutlineProps extends HTMLAttributes<HTMLDivElement> {
   borderColor: string;
   borderStyle?: string;
   borderWidth: number;
@@ -16,8 +15,8 @@ export interface NotchedOutlineProps
   notchWidth: number;
   notchActive?: boolean;
   forceActive?: boolean;
-  label?: React.ReactNode;
-  children?: React.ReactNode;
+  label?: ReactNode;
+  children?: ReactNode;
 }
 
 export const NotchedOutline = forwardRef<HTMLDivElement, NotchedOutlineProps>(

package/src/NotchedOutline/styledComponents.ts

@@ -5,6 +5,7 @@ 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;
 
@@ -105,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

@@ -27,12 +27,12 @@ const Example = ({}) => {
         mb="4"
         sx={{ borderRadius: 'large' }}
       >
-        <Text variant="h3">Hello</Text>
-        <Text variant="body1">This is looking cool</Text>
+        <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

package/src/Paper/Paper.tsx

@@ -1,23 +1,19 @@
+import type { ElementType, ReactNode } 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 { useTheme } from '../theme';
-import {
-  alpha,
-  getBackgroundOverlay,
-  getDarkThemeBackgroundOverlay,
-} from '../color';
+import { getBackgroundOverlay, getDarkThemeBackgroundOverlay } from '../color';
 
 export interface PaperProps extends BoxProps {
-  as?: React.ElementType<any>;
+  as?: ElementType<any>;
   elevation?: number;
   outlined?: boolean;
   backgroundOverlay?: number | string;
   darkThemeBackgroundOverlay?: number | string;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 export const Paper = forwardRef<HTMLDivElement, PaperProps>(function Paper(
@@ -48,7 +44,7 @@ export const Paper = forwardRef<HTMLDivElement, PaperProps>(function Paper(
           ? {
               borderStyle: 'solid',
               borderWidth: rem(1),
-              borderColor: alpha('on.surface', 0.12),
+              borderColor: 'surface-variant',
             }
           : {}),
         ...(backgroundOverlay

package/src/ProgressSpinner/ProgressSpinner.tsx

@@ -5,6 +5,7 @@ import { rem } from 'polished';
 
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
+import { EASING_STANDARD } from '../motion';
 
 export type ProgressSpinnerProps = BoxProps & {
   progress?: number;
@@ -14,10 +15,10 @@ export type ProgressSpinnerProps = BoxProps & {
 
 const innerDivRotate = keyframes({
   '0%': {
-    transformOrigin: '50% 50%',
+    transform: 'rotate(-90deg)',
   },
   '100%': {
-    transform: 'rotate(360deg)',
+    transform: 'rotate(270deg)',
   },
 });
 
@@ -69,9 +70,11 @@ export const ProgressSpinner = forwardRef<HTMLDivElement, ProgressSpinnerProps>(
             display: 'inline-block',
             width: '100%',
             height: '100%',
-            ...(indeterminate
-              ? { animation: `${innerDivRotate} 1.4s linear infinite` }
-              : { transform: 'rotate(-90deg)' }),
+            transformOrigin: '50% 50%',
+            transform: 'rotate(-90deg)',
+            ...(indeterminate && {
+              animation: `${innerDivRotate} 1.4s linear infinite`,
+            }),
           }}
         >
           <Box<BoxProps<SVGElement, SVGAttributes<SVGElement>>>
@@ -101,12 +104,9 @@ export const ProgressSpinner = forwardRef<HTMLDivElement, ProgressSpinnerProps>(
                 indeterminate
                   ? {
                       animation: `${circleIndeterminate} 1.4s ease-in-out infinite`,
-                      strokeDasharray: '80px, 200px',
-                      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,5 @@
+import type { ChangeEvent } from 'react';
 import { useState } from 'react';
-import * as React from 'react';
 
 import { RadioButton, RadioGroup, Box } from '../';
 // import './styles.css';
@@ -35,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

@@ -21,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';

package/src/RadioButton/RadioButtonIcon.tsx

@@ -1,11 +1,11 @@
+import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import * 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;
 }
@@ -34,8 +34,7 @@ export const RadioButtonIcon = forwardRef<HTMLDivElement, RadioButtonIconProps>(
             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/Ripple/Ripple.story.tsx

@@ -46,7 +46,7 @@ const Example = () => {
         }}
       >
         <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/RippleBox.tsx

@@ -1,6 +1,5 @@
 import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 import type { UseRippleSurfaceOptions } from './useRippleSurface';
 import { useRippleSurface } from './useRippleSurface';
@@ -9,7 +8,7 @@ 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: <

package/src/Ripple/useRippleHandlers.ts

@@ -1,5 +1,5 @@
+import type { KeyboardEvent as ReactKeyboardEvent, PointerEvent } from 'react';
 import { useRef } from 'react';
-import type * as React from 'react';
 
 import type { RippleOptions } from './useRipple';
 import { useRipple } from './useRipple';
@@ -18,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);
@@ -36,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,4 +1,9 @@
-import type { CSSProperties } from 'react';
+import type {
+  CSSProperties,
+  KeyboardEventHandler,
+  PointerEventHandler,
+} from 'react';
+import { useMemo } from 'react';
 import { get } from '@styled-system/css';
 import { wrapEvent } from '@basic-ui/core';
 
@@ -15,14 +20,15 @@ export interface UseRippleSurfaceOptions<T extends HTMLElement> {
   rippleColor?: string;
   rippleEnabled?: boolean;
   center?: boolean;
+  mouseFocus?: 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
@@ -31,6 +37,8 @@ export function useRippleSurface<T extends HTMLElement>(
     focusOpacity = 0.12,
     pressedOpacity = 0.12,
     rippleColor = 'on.surface',
+    // eslint-disable-next-line prefer-const
+    mouseFocus = false,
   } = opts;
   const {
     onKeyDown,
@@ -62,67 +70,81 @@ 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-visible::before': {
-      opacity: focusOpacity,
-    },
-    ...(!rippleEnabled && {
-      '&:active::before': {
-        opacity: pressedOpacity,
+  const focusPseudoClass = mouseFocus ? 'focus' : 'focus-visible';
+
+  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',
       },
-    }),
-    '&[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,
+      '&:hover::before': {
+        opacity: hoverOpacity,
       },
-    }),
-    ['&: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,
+      [`&:${focusPseudoClass}::before`]: {
+        opacity: focusOpacity,
+      },
+      ...(!rippleEnabled && {
+        '&:active::before': {
+          opacity: pressedOpacity,
+        },
+      }),
+      '&[aria-pressed="true"]::before': {
+        opacity: baseOpacity + pressedOpacity,
       },
-    '&:disabled,&[data-disabled]': {
-      cursor: 'default',
-    },
-    // ripple
-    ...(rippleEnabled && {
-      '&::after': { ...rippleStyle({ animation }) },
+      '&[aria-pressed="true"]:hover::before': {
+        opacity: pressedOpacity + hoverOpacity,
+      },
+      [`&[aria-pressed="true"]:${focusPseudoClass}::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,
+      focusPseudoClass,
+      hoverOpacity,
+      pressedOpacity,
+      rippleColor,
+      rippleEnabled,
+    ]
+  );
 
   return {
     style: { ...animationStyle, ...style },

package/src/Select/PaymentMethodSelect.story.tsx

@@ -1,8 +1,9 @@
 import { forwardRef, useState } from 'react';
 import type { ReactElement, ComponentType } from 'react';
+import styled from '@emotion/styled';
 
 import type { SelectProps } from '../';
-import { Box, Select, SelectItem } from '../';
+import { Select, SelectItem } from '../';
 
 export default {
   title: 'components/Select/Complex',
@@ -176,25 +177,19 @@ export interface PaymentMethodSelectProps {
 
 const logoWidth = 32;
 const logoHeight = 24;
-const LogoWrapper = ({ children }: { children: ReactElement }) => (
-  <Box
-    sx={{
-      mr: 2,
-      borderRadius: '2px',
-      overflow: 'hidden',
-      width: logoWidth,
-      height: logoHeight,
-      minWidth: logoWidth,
-      minHeight: logoHeight,
-      '& > svg': { width: logoWidth, height: logoWidth },
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-    }}
-  >
-    {children}
-  </Box>
-);
+const LogoWrapper = styled.div({
+  marginInlineEnd: '8px',
+  borderRadius: '2px',
+  overflow: 'hidden',
+  width: logoWidth,
+  height: logoHeight,
+  minWidth: logoWidth,
+  minHeight: logoHeight,
+  '& > svg': { width: logoWidth, height: logoWidth },
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
 
 function SelectItemContent(props: PaymentMethod): ReactElement {
   if (props.type === 'card') {
@@ -269,9 +264,7 @@ const PaymentMethodSelect = forwardRef<
     >
       {paymentMethods.map((m) => (
         <SelectItem value={m.id} key={m.id}>
-          <Box display="inline-flex" alignItems="center">
-            <SelectItemContent {...m} />
-          </Box>
+          <SelectItemContent {...m} />
         </SelectItem>
       ))}
     </Select>
@@ -300,7 +293,7 @@ export const PaymentMethodSelectControlled = () => {
     'visa',
     'unknown',
   ]) {
-    for (let i = 0; i < 10; i++) {
+    for (let i = 0; i < 50; i++) {
       paymentMethods.push({
         type: 'card',
         id: testCard + `_${i}`,

package/src/Select/Select.tsx

@@ -1,5 +1,10 @@
+import type {
+  SelectHTMLAttributes,
+  ReactNode,
+  ChangeEvent,
+  ComponentType,
+} from 'react';
 import { forwardRef, useState, useRef, useEffect, useId } from 'react';
-import * as React from 'react';
 import {
   wrapEvent,
   assignMultipleRefs,
@@ -19,6 +24,7 @@ import { makeDefaultRender } from './defaultRender';
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
 import { IconContainer } from '../TextField/IconContainer';
+import { listItemStyle } from '../ListItem';
 
 const componentMap = {
   outlined: OutlinedContainer,
@@ -27,21 +33,21 @@ const componentMap = {
 
 export interface SelectProps
   extends Omit<
-    BoxProps<HTMLSelectElement, React.SelectHTMLAttributes<HTMLSelectElement>>,
+    BoxProps<HTMLSelectElement, SelectHTMLAttributes<HTMLSelectElement>>,
     'value' | 'defaultValue' | 'onChange'
   > {
   variant?: 'outlined' | 'filled';
   color?: 'primary' | 'secondary';
-  label?: React.ReactNode;
+  label?: ReactNode;
   helperText?: string;
   defaultValue?: string;
   value?: string;
   native?: boolean;
   theme?: Theme;
   error?: boolean | string;
-  onChange?: (e: React.ChangeEvent<HTMLSelectElement>, value: string) => void;
+  onChange?: (e: ChangeEvent<HTMLSelectElement>, value: string) => void;
   renderValue?: (value?: string) => string | undefined;
-  leadingIcon?: React.ReactNode;
+  leadingIcon?: ReactNode;
 }
 
 export const Select = forwardRef<
@@ -50,6 +56,7 @@ export const Select = forwardRef<
 >(function Select(props, forwardedRef) {
   const {
     id: idProp,
+    name,
     variant = 'outlined',
     color = 'primary',
     value: valueProp,
@@ -115,7 +122,7 @@ export const Select = forwardRef<
 
   const labelIsFloating = hasFocus || open || renderValue(value) !== undefined;
 
-  const Comp: React.ComponentType<any> = native
+  const Comp: ComponentType<any> = native
     ? (SelectComp as any)
     : (SelectButton as any);
 
@@ -132,6 +139,7 @@ export const Select = forwardRef<
   return (
     <SelectProvider value={{ native, onSelect: handleOnChange, value }}>
       <Box display="inline-flex" flexDirection="column" width="100%">
+        {!native && <input type="hidden" name={name} value={value} />}
         <Container
           theme={theme}
           label={label}
@@ -163,6 +171,7 @@ export const Select = forwardRef<
               aria-describedby={helperTextId}
               hasLabel={!!label}
               leadingIcon={Boolean(leadingIcon)}
+              name={native ? name : undefined}
               trailingIcon={true}
               {...otherProps}
             >
@@ -176,6 +185,11 @@ export const Select = forwardRef<
                     minWidth: buttonRef?.current?.offsetWidth,
                   }}
                   role="listbox"
+                  __css={{
+                    '& [data-menu-item=""]': {
+                      ...listItemStyle('primary'),
+                    },
+                  }}
                 >
                   {children}
                 </MenuList>

package/src/Select/SelectIcon.tsx

@@ -1,16 +1,16 @@
 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';
+import { EASING_STANDARD } from '../motion';
 
 export type SelectIconProps = BoxProps<
   SVGElement,
-  React.SVGAttributes<SVGElement>
+  SVGAttributes<SVGElement>
 > & { open?: boolean };
 
 export const SelectIcon = forwardRef<SVGElement, SelectIconProps>(
@@ -32,8 +32,7 @@ export const SelectIcon = forwardRef<SVGElement, SelectIconProps>(
           color: open ? 'primary' : alpha('on.surface', 0.54),
           pointerEvents: 'none',
           transform: open ? 'rotate(180deg)' : undefined,
-          transition:
-            'transform .15s cubic-bezier(.4,0,.2,1), color .15s cubic-bezier(.4,0,.2,1)',
+          transition: `transform .15s ${EASING_STANDARD}, color .15s ${EASING_STANDARD}`,
         }}
         {...otherProps}
       >

package/src/Select/context.ts

@@ -1,3 +1,4 @@
+import type { MouseEvent, KeyboardEvent } from 'react';
 import { useContext, createContext } from 'react';
 
 // Select Component
@@ -5,7 +6,7 @@ export interface SelectContextProps {
   native: boolean;
   value?: string;
   onSelect: (
-    e: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>
+    e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>
   ) => void;
 }
 

package/src/Select/defaultRender.ts

@@ -1,7 +1,8 @@
+import type { ReactNode } from 'react';
 import { Children, isValidElement } from 'react';
 
 export const makeDefaultRender =
-  (children?: React.ReactNode) =>
+  (children?: ReactNode) =>
   (val?: string): string | undefined => {
     if (children && val !== undefined) {
       const allChildren = Children.toArray(children);