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

package/src/Alert/Alert.tsx

@@ -1,7 +1,9 @@
 import { rem } from 'polished';
 import { forwardRef } from 'react';
+
 import { alpha } from '../color';
-import { Text, TextProps } from '../Text';
+import type { TextProps } from '../Text';
+import { Text } from '../Text';
 
 export type AlertProps = TextProps & { color?: string };
 
@@ -15,7 +17,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
     <Text
       ref={forwardedRef}
       as={as}
-      variant="body1"
+      variant="body-medium"
       __css={{
         p: 3,
         bg: alpha(color, 0.1),

package/src/AppBar/AppBar.story.tsx

@@ -1,5 +1,7 @@
 import { useState } from 'react';
-import { AppBar, AppBarButton, AppBarProps } from './';
+
+import type { AppBarProps } from './';
+import { AppBar, AppBarButton } from './';
 import { Box } from '../Box';
 import { LoremIpsum } from '../Text/LoremIpsum';
 import { Button } from '../Button';
@@ -20,9 +22,8 @@ const MenuIcon = (props) => (
 );
 
 const Example = ({ variant, size }) => {
-  const [elevation, setElevation] = useState<AppBarProps['elevation']>(
-    'default'
-  );
+  const [elevation, setElevation] =
+    useState<AppBarProps['elevation']>('default');
   const buttonColor = variant === 'default' ? 'on.surface' : `on.${variant}`;
 
   return (
@@ -32,7 +33,7 @@ const Example = ({ variant, size }) => {
         variant={variant}
         elevation={elevation}
         size={size}
-        css={{ position: 'fixed', top: 0 }}
+        __css={{ position: 'fixed', top: 0 }}
       >
         <AppBarButton>
           <MenuIcon title="open menu" />
@@ -51,7 +52,7 @@ const Example = ({ variant, size }) => {
         </Box>
       </AppBar>
       <Box marginTop={68}>
-        <LoremIpsum />
+        <LoremIpsum count={30} />
       </Box>
     </>
   );

package/src/AppBar/AppBar.tsx

@@ -1,12 +1,15 @@
+import type { ElementType } from 'react';
 import { forwardRef, useEffect, useState } from 'react';
-import type * as React from 'react';
+import { get } from '@styled-system/css';
+
 import { useTheme } from '../theme';
 import { AppBarProvider } from './context';
-import { get } from '@styled-system/css';
-import { Paper, PaperProps } from '../Paper';
+import type { PaperProps } from '../Paper';
+import { Paper } from '../Paper';
+import { EASING_STANDARD } from '../motion';
 
 export interface AppBarProps extends Omit<PaperProps, 'color' | 'elevation'> {
-  as?: React.ElementType<any>;
+  as?: ElementType<any>;
   elevation?: 'default' | 'elevated' | 'dynamic';
   variant?: 'default' | 'primary' | 'secondary' | 'transparent';
   size?: 'default' | 'dense';
@@ -70,7 +73,7 @@ export const AppBar = forwardRef<HTMLDivElement, AppBarProps>(function AppBar(
           alignItems: 'center',
           width: '100%',
           overflow: 'hidden',
-          transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
+          transition: `box-shadow .28s ${EASING_STANDARD}`,
           ...get(theme, `appbar.sizes.${size}`),
           ...get(theme, `appbar.variants.${variantProp}`),
           ...__css,

package/src/AppBar/AppBarButton.tsx

@@ -1,5 +1,7 @@
 import { forwardRef } from 'react';
-import { Button, ButtonProps } from '../Button';
+
+import type { ButtonProps } from '../Button';
+import { Button } from '../Button';
 import { useAppBarContext } from './context';
 
 export type AppBarButtonProps = ButtonProps;

package/src/AppBar/context.ts

@@ -1,5 +1,6 @@
 import { createContext, useContext } from 'react';
-import { AppBarProps } from './AppBar';
+
+import type { AppBarProps } from './AppBar';
 
 // AppBar Component
 export type AppBarContextProps = Pick<AppBarProps, 'variant' | 'size'>;

package/src/Badge/Badge.tsx

@@ -1,5 +1,7 @@
 import { forwardRef } from 'react';
-import { Box, BoxProps } from '../Box';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export interface BadgeProps extends BoxProps {
   placement: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';

package/src/BaseLine/BaseLine.tsx

@@ -1,7 +1,8 @@
 import { Global } from '@emotion/react';
-import { useTheme } from '../theme';
 import { css, get } from '@styled-system/css';
 
+import { useTheme } from '../theme';
+
 export const BaseLine = () => {
   const theme = useTheme();
   return (
@@ -49,13 +50,15 @@ export const BaseLine = () => {
           'button,[type="button"],[type="reset"],[type="submit"]': {
             WebkitAppearance: 'button',
           },
-          'button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner': {
-            borderStyle: 'none',
-            padding: '0',
-          },
-          'button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring': {
-            outline: '1px dotted ButtonText',
-          },
+          'button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner':
+            {
+              borderStyle: 'none',
+              padding: '0',
+            },
+          'button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring':
+            {
+              outline: '1px dotted ButtonText',
+            },
           fieldset: { padding: '0.35em 0.75em 0.625em' },
           legend: {
             boxSizing: 'border-box',
@@ -71,9 +74,10 @@ export const BaseLine = () => {
             boxSizing: 'border-box',
             padding: '0',
           },
-          '[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button': {
-            height: 'auto',
-          },
+          '[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button':
+            {
+              height: 'auto',
+            },
           '[type="search"]': {
             WebkitAppearance: 'textfield',
             outlineOffset: '-2px',

package/src/BottomSheet/BottomSheet.story.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { BottomSheet } from './';
 import { Button } from '../Button';
 import { LoremIpsum } from '../Text/LoremIpsum';

package/src/BottomSheet/BottomSheet.tsx

@@ -1,8 +1,9 @@
 import { forwardRef } from 'react';
 import { Portal } from '@basic-ui/core';
+
 import { Scrim } from '../Dialog/Scrim';
 import { DialogContainer } from '../Dialog/DialogContainer';
-import { DialogSurfaceProps } from '../Dialog/DialogSurface';
+import type { DialogSurfaceProps } from '../Dialog/DialogSurface';
 import { useDialogAnimation } from '../Dialog/useDialogAnimation';
 import { DialogBackdrop } from '../Dialog/DialogBackdrop';
 import { BottomSheetSurface } from './BottomSheetSurface';

package/src/BottomSheet/BottomSheetSurface.tsx

@@ -1,12 +1,15 @@
+import type { FC, Ref } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Modal as _Modal, ModalProps } from '@basic-ui/core';
-import { Paper, PaperProps } from '../Paper';
-import { useTheme } from '../theme';
+import type { ModalProps } from '@basic-ui/core';
+import { Modal as _Modal } from '@basic-ui/core';
 import { rem } from 'polished';
 
-const Modal = _Modal as React.FC<
-  BottomSheetSurfaceProps & { ref?: React.Ref<HTMLDivElement> }
+import type { PaperProps } from '../Paper';
+import { Paper } from '../Paper';
+import { useTheme } from '../theme';
+
+const Modal = _Modal as FC<
+  BottomSheetSurfaceProps & { ref?: Ref<HTMLDivElement> }
 >;
 
 export type BottomSheetSurfaceProps = ModalProps & PaperProps;
@@ -23,7 +26,8 @@ export const BottomSheetSurface = forwardRef<
       ref={forwardedRef}
       as={Paper}
       theme={theme}
-      elevation={5}
+      elevation={3}
+      darkThemeBackgroundOverlay={3}
       __css={{
         position: 'absolute',
         bg: 'surface',

package/src/Box/Box.tsx

@@ -1,19 +1,8 @@
+import type { ElementType, FC, HTMLAttributes, RefAttributes } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { CSSObject } from '@emotion/react';
+import type { CSSObject } from '@emotion/react';
 import styled from '@emotion/styled';
-import {
-  compose,
-  space,
-  layout,
-  typography,
-  color,
-  flexbox,
-  border,
-  grid,
-  background,
-  position,
-  shadow,
+import type {
   SpaceProps,
   LayoutProps,
   TypographyProps,
@@ -27,13 +16,27 @@ import {
   ResponsiveValue,
 } from 'styled-system';
 import {
-  css,
-  get,
+  compose,
+  space,
+  layout,
+  typography,
+  color,
+  flexbox,
+  border,
+  grid,
+  background,
+  position,
+  shadow,
+} from 'styled-system';
+import type {
   SystemStyleObject,
   ResponsiveStyleValue,
 } from '@styled-system/css';
+import { css, get } from '@styled-system/css';
 import shouldForwardProp from '@styled-system/should-forward-prop';
-import { useTheme, Theme } from '../theme';
+
+import type { Theme } from '../theme';
+import { useTheme } from '../theme';
 
 export type SxStyleProp =
   | SystemStyleObject
@@ -48,7 +51,7 @@ export type SxStyleProp =
     >;
 
 export interface BaseProps {
-  as?: React.ElementType<any>;
+  as?: ElementType<any>;
   sx?: SxStyleProp;
   // css?: CSSObject | ((props: { theme: Theme }) => CSSObject);
   __css?: SxStyleProp;
@@ -82,12 +85,10 @@ type KnownBoxProps = BaseProps &
 
 export type BoxProps<
   H = HTMLDivElement,
-  Attr extends React.HTMLAttributes<H> = React.HTMLAttributes<H>
-> = Omit<Attr, keyof KnownBoxProps> &
-  Partial<KnownBoxProps> &
-  React.RefAttributes<H>;
+  Attr extends HTMLAttributes<H> = HTMLAttributes<H>
+> = Omit<Attr, keyof KnownBoxProps> & Partial<KnownBoxProps> & RefAttributes<H>;
 
-const BoxBase = styled(('div' as unknown) as React.FC, {
+const BoxBase = styled('div' as unknown as FC, {
   shouldForwardProp,
 })<BoxProps<HTMLDivElement>>(
   {
@@ -114,7 +115,7 @@ const BoxBase = styled(('div' as unknown) as React.FC, {
 );
 
 export const Box: <
-  Props = BoxProps<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>
+  Props = BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>
 >(
   props: Props
 ) => JSX.Element = forwardRef<HTMLDivElement, BoxProps<HTMLDivElement>>(

package/src/Button/BaseButton.tsx

@@ -1,14 +1,13 @@
+import type { ButtonHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
 import { useTheme } from '@emotion/react';
 import { variant } from 'styled-system';
-import { Box, BoxProps } from '../Box';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export interface BaseButtonProps
-  extends BoxProps<
-    HTMLButtonElement,
-    React.ButtonHTMLAttributes<HTMLButtonElement>
-  > {
+  extends BoxProps<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>> {
   elevation?: string;
   isGroupedButton?: boolean;
 }
@@ -19,12 +18,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
     const { __css, variant: variantProp, elevation, ...otherProps } = props;
 
     return (
-      <Box<
-        BoxProps<
-          HTMLButtonElement,
-          React.ButtonHTMLAttributes<HTMLButtonElement>
-        >
-      >
+      <Box<BoxProps<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>>
         as="button"
         ref={ref}
         __css={{

package/src/Button/Button.story.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { Button } from './';
 import { Box } from '../Box';
 
@@ -16,6 +17,15 @@ const AppsIcon = (props) => (
   </svg>
 );
 
+const NavigationIcon = (props) => (
+  <svg height={48} width={48} viewBox="0 0 48 48" {...props}>
+    <path
+      fill="currentColor"
+      d="m26.35 42-5.7-14.65L6 21.65V19.5L42 6 28.5 42Zm.9-5.7 9.6-25.15-25.1 9.6 11.2 4.3Zm-4.3-11.25Z"
+    />
+  </svg>
+);
+
 const Example = (props) => {
   return (
     <Box bg="surface">
@@ -43,15 +53,18 @@ const Example = (props) => {
       </Box>
       <Box p={3} display="flex" sx={{ gap: 2 }}>
         <Button variant="fab-mini" elevation="floating" {...props}>
-          S
+          <NavigationIcon width="24px" height="24px" />
         </Button>
         <Button variant="fab" elevation="floating" {...props}>
-          S
+          <NavigationIcon width="24px" height="24px" />
         </Button>
         <Button variant="fab-large" elevation="floating" {...props}>
-          S
+          <NavigationIcon width="36px" height="36px" />
         </Button>
         <Button variant="fab-extended" elevation="floating" {...props}>
+          <Box mr={2} lineHeight={0}>
+            <NavigationIcon width="24px" height="24px" />
+          </Box>
           Fab extended
         </Button>
       </Box>
@@ -86,7 +99,12 @@ export const DebugButtonClick = () => {
 
   return (
     <Box m={3}>
-      <Button onClick={() => setCount((c) => c + 1)} variant="filled">
+      <Button
+        onClick={() => setCount((c) => c + 1)}
+        variant="filled"
+        elevation="none"
+        color="surface"
+      >
         Click count: {count}
       </Button>
     </Box>

package/src/Button/Button.tsx

@@ -1,5 +1,6 @@
+import type { ComponentType, ElementType, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
+
 import * as TransparentButton from './TransparentButton';
 import * as FloatingActionButton from './FloatingActionButton';
 import * as FilledButton from './FilledButton';
@@ -7,7 +8,7 @@ import * as OutlinedButton from './OutlinedButton';
 import * as IconButton from './IconButton';
 import { useTheme } from '../theme';
 import { useRippleSurface } from '../Ripple';
-import { BaseButtonProps } from './BaseButton';
+import type { BaseButtonProps } from './BaseButton';
 import { useButtonGroupContext } from './context';
 
 export type ButtonVariants =
@@ -45,8 +46,8 @@ const rippleMapping = {
 export type ButtonColors = 'primary' | 'secondary' | string;
 
 export interface ButtonProps extends BaseButtonProps {
-  as?: React.ElementType<any>;
-  children?: React.ReactNode;
+  as?: ElementType<any>;
+  children?: ReactNode;
   variant?: ButtonVariants;
   color?: ButtonColors;
   disabled?: boolean;
@@ -77,7 +78,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     const theme = useTheme();
 
-    const Comp: React.ComponentType<any> = componentMapping[variant];
+    const Comp: ComponentType<any> = componentMapping[variant];
     const getRippleProperties = rippleMapping[variant];
 
     const rippleProps = useRippleSurface({

package/src/Button/ButtonGroup.tsx

@@ -1,6 +1,8 @@
-import React, { forwardRef, useMemo } from 'react';
-import { ButtonProps } from './Button';
-import { ButtonGroupContext, ButtonGroupContextProps } from './context';
+import { forwardRef, useMemo } from 'react';
+
+import type { ButtonProps } from './Button';
+import type { ButtonGroupContextProps } from './context';
+import { ButtonGroupContext } from './context';
 
 export type ButtonGroupProps = ButtonProps & ButtonGroupContextProps;
 

package/src/Button/FilledButton.tsx

@@ -1,10 +1,11 @@
 import styled from '@emotion/styled';
 import { readableColor, rem } from 'polished';
-import { BaseButton } from './BaseButton';
-import { Theme } from '../theme';
-import { alpha, getBackgroundOverlay } from '../color';
 import { get, css } from '@styled-system/css';
 
+import { BaseButton } from './BaseButton';
+import type { Theme } from '../theme';
+import { alpha, mixColor } from '../color';
+
 export const FilledButton = styled(BaseButton)(
   ({ color = 'primary', theme }) =>
     css({
@@ -28,14 +29,9 @@ export const FilledButton = styled(BaseButton)(
         outlineOffset: '2px',
       },
     }),
-  ({ color = 'primary', elevation = 'none', theme }) =>
-    color === 'surface' && {
-      ...getBackgroundOverlay(
-        theme,
-        get(theme, `buttons.elevations.${elevation}.boxShadow`, 0),
-        'primary'
-      ),
-    },
+  ({ color = 'primary' }) =>
+    color === 'surface' &&
+    css({ background: mixColor('surface', 'primary', 0.05) }),
   ({ color = 'primary', theme, isGroupedButton = false }) =>
     isGroupedButton && {
       '[data-button-group=""] &': {

package/src/Button/FloatingActionButton.tsx

@@ -1,5 +1,5 @@
 import { getRippleProperties as filledButtonGetProperties } from './FilledButton';
-import { Theme } from '../theme';
+import type { Theme } from '../theme';
 
 export function getRippleProperties(theme: Theme) {
   return {

package/src/Button/IconButton.tsx

@@ -1,5 +1,5 @@
 import { getRippleProperties as filledButtonGetProperties } from './FilledButton';
-import { Theme } from '../theme';
+import type { Theme } from '../theme';
 
 export function getRippleProperties(theme: Theme) {
   return {

package/src/Button/OutlinedButton.tsx

@@ -1,9 +1,10 @@
-import { TransparentButton } from './TransparentButton';
 import styled from '@emotion/styled';
 import { css } from '@styled-system/css';
-import { alpha } from '../color';
 import { rem } from 'polished';
 
+import { alpha } from '../color';
+import { TransparentButton } from './TransparentButton';
+
 export const OutlinedButton = styled(TransparentButton)(
   css({
     borderStyle: 'solid',

package/src/Button/SpinnerButton.story.tsx

@@ -1,25 +1,24 @@
-import { useState, FC } from 'react';
+import type { FC } from 'react';
+import { useState } from 'react';
+import type { SpinnerProps, SpinnerButtonProps } from '@basic-ui/core';
 import {
   Spinner as SpinnerBase,
   SpinnerButton as SpinnerButtonBase,
-  SpinnerProps,
-  SpinnerButtonProps,
 } from '@basic-ui/core';
+
 import { Button, Box, Text } from '../';
 import { alpha } from '../color';
 import { useTheme } from '../theme';
-import { BoxProps } from '../Box';
+import type { BoxProps } from '../Box';
 
 export default {
   title: 'components/SpinnerButton',
 };
 
-const Spinner: FC<
-  Omit<BoxProps, 'onChange'> & SpinnerProps
-> = SpinnerBase as any;
-const SpinnerButton: FC<
-  BoxProps & SpinnerButtonProps
-> = SpinnerButtonBase as any;
+const Spinner: FC<Omit<BoxProps, 'onChange'> & SpinnerProps> =
+  SpinnerBase as any;
+const SpinnerButton: FC<BoxProps & SpinnerButtonProps> =
+  SpinnerButtonBase as any;
 
 function AddIcon(props) {
   return (
@@ -71,7 +70,7 @@ const Example = ({ vertical = false }) => {
       >
         <RemoveIcon />
       </SpinnerButton>
-      <Text variant="body1" textAlign="center" width={size}>
+      <Text variant="body-medium" textAlign="center" width={size}>
         {value}
       </Text>
       <SpinnerButton

package/src/Button/TransparentButton.tsx

@@ -1,10 +1,10 @@
 import styled from '@emotion/styled';
-import { get } from '@styled-system/css';
+import { get, css } from '@styled-system/css';
+import { rem } from 'polished';
+
 import { BaseButton } from './BaseButton';
-import { Theme } from '../theme';
-import { css } from '@styled-system/css';
+import type { Theme } from '../theme';
 import { alpha } from '../color';
-import { rem } from 'polished';
 
 export const TransparentButton = styled(BaseButton)(
   ({ theme, color = 'primary' }) =>

package/src/Button/context.tsx

@@ -1,4 +1,5 @@
 import { createContext, useContext } from 'react';
+
 import type { ButtonProps } from './Button';
 
 // ButtonGroup Component

package/src/CheckBox/CheckBox.story.tsx

@@ -1,7 +1,8 @@
 import { useState, useRef } from 'react';
-import { CheckBox, Box } from '../';
 import { keyframes } from '@emotion/react';
-import { Keyframes } from '@emotion/serialize';
+import type { Keyframes } from '@emotion/serialize';
+
+import { CheckBox, Box, EASING_STANDARD } from '../';
 
 export default {
   title: 'components/CheckBox',
@@ -70,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': {
@@ -85,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