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

package/src/CheckBox/CheckBox.story.tsx

@@ -2,7 +2,7 @@ import { useState, useRef } from 'react';
 import { keyframes } from '@emotion/react';
 import type { Keyframes } from '@emotion/serialize';
 
-import { CheckBox, Box } from '../';
+import { CheckBox, Box, EASING_STANDARD } from '../';
 
 export default {
   title: 'components/CheckBox',
@@ -71,7 +71,7 @@ const HeartCheckBoxIcon = (props) => {
         opacity: props.opacity,
         color: props.borderColor,
         animation: animation.current
-          ? `${animation.current} .25s cubic-bezier(.4,0,.2,1)`
+          ? `${animation.current} .25s ${EASING_STANDARD}`
           : undefined,
         translate: 'scale(1)',
         '& > svg': {
@@ -86,22 +86,23 @@ const HeartCheckBoxIcon = (props) => {
 
 function ThreeStates() {
   const [state, setState] = useState<boolean | 'mixed'>(false);
+  const prevState = useRef(false);
 
   function onChange() {
-    console.log('here', state);
     switch (state) {
       case false:
+        prevState.current = false;
         setState('mixed');
         break;
       case 'mixed':
-        setState(true);
+        setState(prevState.current ? false : true);
         break;
       case true:
-        setState(false);
+        prevState.current = true;
+        setState('mixed');
         break;
     }
   }
-  console.log({ state });
 
   return (
     <CheckBox

package/src/CheckBox/CheckBox.tsx

@@ -1,6 +1,5 @@
-import type { InputHTMLAttributes } from 'react';
+import type { ElementType, FC, InputHTMLAttributes, ReactElement } from 'react';
 import { forwardRef, cloneElement } from 'react';
-import * as React from 'react';
 import { rem } from 'polished';
 import { CheckBox as _CheckBoxCore } from '@basic-ui/core';
 
@@ -16,20 +15,17 @@ import {
 } from '../SelectionControl';
 
 export interface CheckBoxProps
-  extends BoxProps<
-    HTMLInputElement,
-    React.InputHTMLAttributes<HTMLInputElement>
-  > {
-  as?: React.ElementType<any>;
+  extends BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>> {
+  as?: ElementType<any>;
   checked?: boolean;
   indeterminate?: boolean;
   disabled?: boolean;
-  icon?: React.ReactElement<{ checked?: boolean; disabled?: boolean }>;
+  icon?: ReactElement<{ checked?: boolean; disabled?: boolean }>;
 }
 
-const CheckBoxCore: React.FC<
+const CheckBoxCore: FC<
   CheckBoxProps & {
-    innerAs?: React.ElementType<any>;
+    innerAs?: ElementType<any>;
   }
 > = _CheckBoxCore as any;
 

package/src/CheckBox/CheckBoxIcon.tsx

@@ -1,18 +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 { CheckPath } from './CheckPath';
 import { IndeterminatePath } from './IndeterminatePath';
+import { EASING_STANDARD } from '../motion';
 
 export interface CheckBoxIconProps extends BoxProps {
-  as?: React.ElementType<any>;
+  as?: ElementType<any>;
   checked?: boolean;
   disabled?: boolean;
   indeterminate?: boolean;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 export const CheckBoxIcon = forwardRef<HTMLDivElement, CheckBoxIconProps>(
@@ -45,8 +46,7 @@ export const CheckBoxIcon = forwardRef<HTMLDivElement, CheckBoxIconProps>(
           borderStyle: 'solid',
           width: rem(18),
           height: rem(18),
-          transition:
-            'background-color 90ms 0s cubic-bezier(0,0,.2,1), border-color 90ms 0s cubic-bezier(0,0,.2,1), opacity 90ms 0s cubic-bezier(0,0,.2,1)',
+          transition: `background-color 90ms 0s ${EASING_STANDARD}, border-color 90ms 0s ${EASING_STANDARD}, opacity 90ms 0s ${EASING_STANDARD}`,
           '& > svg': {
             display: 'block',
           },

package/src/Chip/ButtonChip.tsx

@@ -1,5 +1,5 @@
+import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { rem } from 'polished';
 
 import type { ChipBaseProps } from './ChipBase';
@@ -10,8 +10,8 @@ import { useTheme } from '../theme';
 export type ButtonChipProps = ChipBaseProps & {
   checked?: boolean;
   disabled?: boolean;
-  leadingIcon?: React.ReactNode;
-  trailingIcon?: React.ReactNode;
+  leadingIcon?: ReactNode;
+  trailingIcon?: ReactNode;
 };
 
 export const ButtonChip = forwardRef<HTMLDivElement, ButtonChipProps>(

package/src/Chip/Chip.story.tsx

@@ -55,7 +55,7 @@ const Example = ({ variant, color = 'default' }) => {
 
   return (
     <Box>
-      <Text variant="h6" mb={2}>
+      <Text variant="title-small" mb={2}>
         Variant: {variant}, Color: {color}
       </Text>
       <Box my={2} display="flex" sx={{ gap: 2 }}>

package/src/Chip/ChipBase.tsx

@@ -1,5 +1,5 @@
+import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { variant } from 'styled-system';
 import { rem } from 'polished';
 
@@ -15,7 +15,7 @@ import {
 
 export type ChipBaseProps<
   H = HTMLDivElement,
-  Attr = React.HTMLAttributes<H>
+  Attr = HTMLAttributes<H>
 > = BoxProps<H, Attr> & {
   variant?: 'filled' | 'outlined';
   backgroundColor?: string;

package/src/Chip/ChoiceChip.tsx

@@ -1,5 +1,5 @@
+import type { FC, InputHTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { RadioButton, CheckBox } from '@basic-ui/core';
 import { rem } from 'polished';
 
@@ -12,16 +12,16 @@ import { Box } from '../Box';
 
 export type ChoiceChipProps = ChipBaseProps<
   HTMLInputElement,
-  React.InputHTMLAttributes<HTMLInputElement>
+  InputHTMLAttributes<HTMLInputElement>
 > & {
   checked?: boolean;
   disabled?: boolean;
   type: 'checkbox' | 'radio';
-  leadingIcon?: React.ReactNode;
-  trailingIcon?: React.ReactNode;
+  leadingIcon?: ReactNode;
+  trailingIcon?: ReactNode;
 };
 
-const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
+const InnerInput: FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
   function InnerInput(props, forwardedRef) {
     const {
       type,
@@ -69,7 +69,7 @@ const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
           <RippleBox<
             RippleBoxProps<
               HTMLInputElement,
-              React.InputHTMLAttributes<HTMLInputElement>
+              InputHTMLAttributes<HTMLInputElement>
             >
           >
             as="input"
@@ -116,7 +116,7 @@ export const ChoiceChip = forwardRef<HTMLInputElement, ChoiceChipProps>(
   function ChoiceChip(props, forwardedRef) {
     const { type = 'checkbox', ...otherProps } = props;
 
-    const Comp: React.FC<ChoiceChipProps> = (
+    const Comp: FC<ChoiceChipProps> = (
       type === 'radio' ? RadioButton : CheckBox
     ) as any;
 

package/src/Combobox/Combobox.story.tsx

@@ -1,5 +1,5 @@
+import type { ChangeEvent } from 'react';
 import { useMemo, useState } from 'react';
-import * as React from 'react';
 
 import {
   Combobox,
@@ -34,7 +34,7 @@ function UncontrolledClientSideExample({ initialValue = '' }) {
   const [selected, setSelected] = useState(initialValue);
   const results = useCityMatch(term);
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setTerm(event.target.value);
   };
 
@@ -92,7 +92,7 @@ function ControlledClientSideExample({ initialValue = '' }) {
   const [selected, setSelected] = useState(initialValue);
   const results = useCityMatch(term);
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setTerm(event.target.value);
     setSelected('');
   };

package/src/Combobox/Combobox.tsx

@@ -1,6 +1,5 @@
-import type { FC } from 'react';
+import type { FC, HTMLAttributes, RefAttributes } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import type {
   ComboboxProps as ComboboxPropsCore,
   ComboboxInputProps as ComboboxInputPropsCore,
@@ -31,12 +30,13 @@ import { TextField } from '../TextField';
 import type { ListProps } from '../List';
 import { List } from '../List';
 import type { ListItemProps } from '../ListItem';
-import { ListItem } from '../ListItem';
+import { listItemStyle } from '../ListItem';
 import type { TextProps } from '../Text';
 import { Text } from '../Text';
 import type { ButtonProps } from '../Button';
 import { Button } from '../Button';
 import { alpha } from '../color';
+import { EASING_STANDARD } from '../motion';
 
 export { useComboBoxContext } from '@basic-ui/core';
 
@@ -44,7 +44,7 @@ export { useComboBoxContext } from '@basic-ui/core';
 // Combobox
 
 export type ComboboxProps = Omit<
-  BoxProps<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>,
+  BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>,
   'onSelect'
 > &
   ComboboxPropsCore;
@@ -73,7 +73,7 @@ export type ComboboxInputProps = Omit<
   ComboboxInputPropsCore & TextFieldProps,
   'ref'
 > &
-  React.RefAttributes<HTMLInputElement>;
+  RefAttributes<HTMLInputElement>;
 
 const ComboboxInputCore: FC<ComboboxInputProps> = _ComboboxInputCore as any;
 
@@ -95,7 +95,7 @@ export const ComboboxInput = forwardRef<HTMLInputElement, ComboboxInputProps>(
 // ComboboxList
 
 export type ComboboxListProps = Omit<ComboboxListPropsCore & ListProps, 'ref'> &
-  React.RefAttributes<HTMLUListElement>;
+  RefAttributes<HTMLUListElement>;
 
 const ComboboxListCore: FC<ComboboxListProps> = _ComboboxListCore as any;
 
@@ -113,13 +113,16 @@ export const ComboboxList = forwardRef<HTMLUListElement, ComboboxListProps>(
         __css={{
           maxHeight: rem(300),
           overflowY: 'auto',
-          borderRadius: 'default',
+          borderRadius: 'extra-small',
           '[data-popper-placement="top"] &': {
             transformOrigin: 'bottom center',
           },
           '[data-popper-placement="bottom"] &': {
             transformOrigin: 'top center',
           },
+          '& [data-reach-combobox-option=""]': {
+            ...listItemStyle('primary'),
+          },
           ...__css,
         }}
         {...otherProps}
@@ -180,7 +183,7 @@ export type ComboboxOptionProps = Omit<
   ComboboxOptionPropsCore & ListItemProps,
   'ref'
 > &
-  React.RefAttributes<HTMLLIElement>;
+  RefAttributes<HTMLLIElement>;
 
 const ComboboxOptionCore: FC<ComboboxOptionProps> = _ComboboxOptionCore as any;
 
@@ -189,7 +192,7 @@ export const ComboboxOption = forwardRef<HTMLLIElement, ComboboxOptionProps>(
     const { as = 'li', ...otherProps } = props;
     return (
       <ComboboxOptionCore
-        as={ListItem}
+        as={Box}
         ref={forwardedRef}
         innerAs={as}
         {...otherProps}
@@ -205,7 +208,7 @@ export type ComboboxLabelProps = Omit<
   ComboboxLabelPropsCore & TextProps,
   'ref'
 > &
-  React.RefAttributes<HTMLLabelElement>;
+  RefAttributes<HTMLLabelElement>;
 
 const ComboboxLabelCore: FC<ComboboxLabelProps> = _ComboboxLabelCore as any;
 
@@ -248,8 +251,7 @@ export const ComboboxButton = forwardRef<
         height: rem(40),
         px: 0,
         '& > svg': {
-          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}`,
         },
         '&[aria-expanded="false"] > svg': {
           color: alpha('on.surface', 0.54),

package/src/Dialog/DialogBackdrop.tsx

@@ -1,13 +1,13 @@
+import type { FC, Ref } from 'react';
 import { forwardRef } from 'react';
-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> }
+const ModalBackdrop = _ModalBackdrop as FC<
+  DialogBackdropProps & { ref?: Ref<HTMLDivElement> }
 >;
 
 export type DialogBackdropProps = ModalBackdropProps &

package/src/Dialog/DialogSurface.tsx

@@ -1,5 +1,5 @@
+import type { FC, Ref } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import type { ModalProps } from '@basic-ui/core';
 import { Modal as _Modal } from '@basic-ui/core';
 import { rem } from 'polished';
@@ -9,9 +9,7 @@ import type { PaperProps } from '../Paper';
 import { Paper } from '../Paper';
 import { useTheme } from '../theme';
 
-const Modal = _Modal as React.FC<
-  DialogSurfaceProps & { ref?: React.Ref<HTMLDivElement> }
->;
+const Modal = _Modal as FC<DialogSurfaceProps & { ref?: Ref<HTMLDivElement> }>;
 
 export type DialogSurfaceProps = ModalProps &
   PaperProps & {

package/src/Dialog/useDialogAnimation.tsx

@@ -1,4 +1,5 @@
 import { useAnimation } from '../hooks/useAnimation';
+import { EASING_STANDARD } from '../motion';
 
 const styles = {
   slide: {
@@ -34,10 +35,8 @@ export function useDialogAnimation(opts: {
   });
   const scrimOpacity = state === 'open' ? 1 : 0;
 
-  const transition = `opacity ${timing}ms cubic-bezier(.4,0,.2,1),transform ${timing}ms cubic-bezier(.4,0,.2,1)`;
-  const scrimTransition = `opacity ${
-    (timing * 0.4) | 0
-  }ms cubic-bezier(.4,0,.2,1)`;
+  const transition = `opacity ${timing}ms ${EASING_STANDARD},transform ${timing}ms ${EASING_STANDARD}`;
+  const scrimTransition = `opacity ${(timing * 0.4) | 0}ms ${EASING_STANDARD}`;
 
   return {
     containerStyle: { ...style, transition },

package/src/Divider/Divider.tsx

@@ -1,5 +1,5 @@
+import type { ElementType } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { rem } from 'polished';
 
 import type { BoxProps } from '../Box';
@@ -7,7 +7,7 @@ import { Box } from '../Box';
 import { alpha } from '../color';
 
 export interface DividerProps extends BoxProps {
-  as?: React.ElementType<any>;
+  as?: ElementType<any>;
   direction?: 'vertical' | 'horizontal';
 }
 

package/src/FloatingLabel/FloatingLabel.tsx

@@ -1,13 +1,14 @@
+import type { ComponentType, LabelHTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { rem } from 'polished';
 
 import { Text as _Text } from '../Text';
 import { useNotchedOutlineContext } from '../NotchedOutline/context';
+import { EASING_STANDARD } from '../motion';
 
 export interface FloatingLabelProps
-  extends React.LabelHTMLAttributes<HTMLLabelElement> {
-  children?: React.ReactNode;
+  extends LabelHTMLAttributes<HTMLLabelElement> {
+  children?: ReactNode;
   active?: boolean;
   offsetX?: number;
   height?: number;
@@ -36,7 +37,7 @@ export const FloatingLabel = forwardRef<HTMLLabelElement, FloatingLabelProps>(
     const ctx = useNotchedOutlineContext();
     const notchStart = ctx ? ctx.notchStart : 0;
 
-    const Text: React.ComponentType<any> = _Text;
+    const Text: ComponentType<any> = _Text;
 
     const translateX =
       translateXProp !== undefined ? translateXProp : notchStart - offsetX;
@@ -50,7 +51,7 @@ export const FloatingLabel = forwardRef<HTMLLabelElement, FloatingLabelProps>(
     return (
       <Text
         as="label"
-        variant="subtitle1"
+        variant="body-large"
         ref={forwardedRef}
         __css={{
           position: 'absolute',
@@ -60,7 +61,7 @@ export const FloatingLabel = forwardRef<HTMLLabelElement, FloatingLabelProps>(
           left: rem(offsetX),
           height: typeof height === 'number' ? rem(height) : height,
           transformOrigin: 'left center',
-          transition: `transform ${transitionTime}ms cubic-bezier(.4,0,.2,1), color ${transitionTime}ms cubic-bezier(.4,0,.2,1)`,
+          transition: `transform ${transitionTime}ms ${EASING_STANDARD}, color ${transitionTime}ms ${EASING_STANDARD}`,
           pointerEvents: 'none',
         }}
         style={{

package/src/LineRipple/LineRipple.story.tsx

@@ -29,7 +29,7 @@ const Example = () => {
         bg="#eee"
         overflow="hidden"
       >
-        <Text variant="body1" style={{ zIndex: 1 }}>
+        <Text variant="body-medium" style={{ zIndex: 1 }}>
           Hello
         </Text>
         <LineRipple active={active} />

package/src/LineRipple/LineRipple.tsx

@@ -1,17 +1,17 @@
-import type { CSSProperties } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import { forwardRef, useState, useRef, useEffect } from 'react';
-import * as React from 'react';
 import { rem } from 'polished';
 
 import { useTheme } from '../theme';
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
+import { EASING_STANDARD } from '../motion';
 
 export interface LineRippleProps extends BoxProps {
   active?: boolean;
   transitionDuration?: number;
   posx?: number;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 export const LineRipple = forwardRef<HTMLDivElement, LineRippleProps>(
@@ -70,7 +70,7 @@ export const LineRipple = forwardRef<HTMLDivElement, LineRippleProps>(
           zIndex: 1,
           transform: 'scaleX(0)',
           transformOrigin: 'center center',
-          transition: `transform ${transitionDuration}ms cubic-bezier(.4,0,.2,1),opacity ${transitionDuration}ms cubic-bezier(.4,0,.2,1)`,
+          transition: `transform ${transitionDuration}ms ${EASING_STANDARD},opacity ${transitionDuration}ms ${EASING_STANDARD}`,
           opacity: 0,
           ...__css,
         }}

package/src/Link/Link.tsx

@@ -1,5 +1,5 @@
+import type { AnchorHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { rem } from 'polished';
 
 import type { BoxProps } from '../Box';
@@ -7,10 +7,7 @@ import { Box } from '../Box';
 import { alpha } from '../color';
 
 export interface LinkProps
-  extends BoxProps<
-    HTMLAnchorElement,
-    React.AnchorHTMLAttributes<HTMLAnchorElement>
-  > {
+  extends BoxProps<HTMLAnchorElement, AnchorHTMLAttributes<HTMLAnchorElement>> {
   color?: string;
   // ReachRouter Props
   to?: string;
@@ -36,6 +33,12 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
         letterSpacing: 'inherit',
         color,
         textDecoration: 'underline',
+        background: 'none',
+        border: 'none',
+        borderRadius: 'extra-small',
+        'button&': {
+          cursor: 'pointer',
+        },
         '&:hover,&:focus': {
           textDecoration: 'none',
         },
@@ -47,6 +50,12 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
         '&:active': {
           bg: alpha(color, 0.16),
         },
+        '&[aria-disabled="true"],&:disabled': {
+          color: 'on.surface',
+          opacity: 0.38,
+          cursor: 'default',
+          pointerEvents: 'none',
+        },
         WebkitTapHighlightColor: 'transparent',
         ...__css,
       }}

package/src/List/List.tsx

@@ -1,13 +1,13 @@
+import type { ElementType, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 import type { PaperProps } from '../Paper';
 import { Paper } from '../Paper';
 
 export interface ListProps extends PaperProps {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
 }
 
 export const List = forwardRef<HTMLDivElement, ListProps>(function List(