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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/material",
-  "version": "0.1.16",
+  "version": "1.0.0-alpha.2",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -18,7 +18,7 @@
     "build:dts": "run -T tsc -p ./tsconfig.json --isolatedModules false --declaration --emitDeclarationOnly",
     "build:cjs": "run -T rollup -c ../../rollup.config.js",
     "build:esm": "run -T cross-env NODE_ENV=production BABEL_ENV=esm run -T babel --config-file ../../babel.config.js ./src --extensions \".ts,.tsx,.js,.jsx\" --source-maps --out-dir ./build/esm --ignore \"**/*.story.tsx,**/*.story.ts,**/*.test.tsx,**/*.test.ts\"",
-    "build-storybook": "run -T build-storybook -c ../../scripts/storybook -o .out",
+    "build-storybook": "run -T build-storybook -c ./scripts/storybook -o .out",
     "lint": "run -T eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
     "format": "run -T prettier --write '**/*.js'",
     "start": "run -T start-storybook -p 9001 -c ./scripts/storybook",
@@ -27,7 +27,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@basic-ui/core": "^0.0.38",
+    "@basic-ui/core": "^0.0.39",
     "@styled-system/should-forward-prop": "5.1.5",
     "@types/styled-system": "^5.1.10",
     "@types/styled-system__css": "^5.0.14",
@@ -35,8 +35,10 @@
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
+    "@basic-ui/color-picker": "^0.0.8",
     "@emotion/react": "11.9.0",
     "@emotion/styled": "11.8.1",
+    "@material/material-color-utilities": "^0.1.2",
     "polished": "^4.1.1"
   },
   "peerDependencies": {
@@ -50,5 +52,5 @@
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "react-spring": "^9.0.0"
   },
-  "gitHead": "316b04b3332bb9f982ab7679c5f32590015787fd"
+  "gitHead": "874053111a07b1a1afa0f7abf93929d695a855d5"
 }

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 };
 
@@ -19,7 +21,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
       __css={{
         p: 3,
         bg: alpha(color, 0.1),
-        borderRadius: rem(4),
+        borderRadius: 'extra-small',
         borderColor: alpha(color, 0.2),
         borderStyle: 'solid',
         borderWidth: rem(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,9 +1,11 @@
 import { forwardRef, useEffect, useState } from 'react';
-import type * as React from 'react';
+import * 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';
 
 export interface AppBarProps extends Omit<PaperProps, 'color' | 'elevation'> {
   as?: React.ElementType<any>;
@@ -54,17 +56,16 @@ export const AppBar = forwardRef<HTMLDivElement, AppBarProps>(function AppBar(
         ref={forwardedRef}
         theme={theme}
         variant="square"
-        backgroundOverlay={variantProp === 'default' ? 4 : 0}
+        backgroundOverlay={
+          elevation === 'elevated' && variantProp === 'default'
+            ? get(theme, `appbar.elevations.${elevation}.boxShadow`, 2)
+            : 0
+        }
         color={
           variantProp === 'default' || variantProp === 'transparent'
             ? 'on.surface'
             : `on.${variantProp}`
         }
-        elevation={
-          elevation === 'elevated'
-            ? get(theme, `appbar.elevations.${elevation}.boxShadow`, 4)
-            : 0
-        }
         __css={{
           boxSizing: 'border-box',
           display: 'inline-flex',

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

package/src/Box/Box.tsx

@@ -1,19 +1,8 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { CSSObject } from '@emotion/react';
+import * as React from '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
@@ -87,7 +90,7 @@ export type BoxProps<
   Partial<KnownBoxProps> &
   React.RefAttributes<H>;
 
-const BoxBase = styled(('div' as unknown) as React.FC, {
+const BoxBase = styled('div' as unknown as React.FC, {
   shouldForwardProp,
 })<BoxProps<HTMLDivElement>>(
   {

package/src/Button/BaseButton.tsx

@@ -1,8 +1,10 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * 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<
@@ -10,6 +12,7 @@ export interface BaseButtonProps
     React.ButtonHTMLAttributes<HTMLButtonElement>
   > {
   elevation?: string;
+  isGroupedButton?: boolean;
 }
 
 export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(

package/src/Button/Button.story.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { Button } from './';
 import { Box } from '../Box';
 
@@ -16,14 +17,24 @@ 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">
-      <Box p={3}>
+      <Box p={3} display="flex" sx={{ gap: 2 }}>
+        <Button variant="filled" {...props}>
+          Filled
+        </Button>
         <Button
           variant="text"
-          mr={2}
-          mb={2}
           {...props}
           color={props.colorTransparent || props.color}
         >
@@ -31,58 +42,47 @@ const Example = (props) => {
         </Button>
         <Button
           variant="outlined"
-          mr={2}
-          mb={2}
           {...props}
           color={props.colorTransparent || props.color}
         >
           Outlined
         </Button>
-        <Button variant="filled" mr={2} mb={2} {...props}>
-          Unelevated
-        </Button>
-        <Button variant="filled" elevation="contained" mr={2} mb={2} {...props}>
-          Contained
+        <Button variant="filled" elevation="elevated" {...props}>
+          Elevated
         </Button>
       </Box>
-      <Box p={3}>
-        <Button variant="fab" elevation="floating" mr={2} mb={2} {...props}>
-          S
+      <Box p={3} display="flex" sx={{ gap: 2 }}>
+        <Button variant="fab-mini" elevation="floating" {...props}>
+          <NavigationIcon width="24px" height="24px" />
         </Button>
-        <Button
-          variant="fab-mini"
-          elevation="floating"
-          mr={2}
-          mb={2}
-          {...props}
-        >
-          S
+        <Button variant="fab" elevation="floating" {...props}>
+          <NavigationIcon width="24px" height="24px" />
         </Button>
-        <Button
-          variant="fab-extended"
-          elevation="floating"
-          mr={2}
-          mb={2}
-          {...props}
-        >
+        <Button variant="fab-large" elevation="floating" {...props}>
+          <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>
-      <Box p={3}>
-        <Box bg={props.color} display="inline-block" mr={2}>
-          <Button variant="icon" m={1} {...props} color={`on.${props.color}`}>
+      <Box p={3} display="flex" sx={{ gap: 2 }}>
+        <Box bg={props.color} display="inline-block">
+          <Button variant="icon" {...props} color={`on.${props.color}`}>
             <AppsIcon title="apps icon" />
           </Button>
         </Box>
-        <Box bg={'#333'} display="inline-block" mr={2}>
-          <Button variant="icon" m={1} {...props} color="#fff">
+        <Box bg={'#333'} display="inline-block">
+          <Button variant="icon" {...props} color="#fff">
             <AppsIcon title="apps icon" />
           </Button>
         </Box>
-        <Button variant="icon" m={1} {...props} color="on.surface">
+        <Button variant="icon" {...props} color="on.surface">
           <AppsIcon title="apps icon" />
         </Button>
-        <Button variant="icon" m={1} {...props} color="#f00">
+        <Button variant="icon" {...props} color="#f00">
           <AppsIcon title="apps icon" />
         </Button>
       </Box>

package/src/Button/Button.tsx

@@ -1,12 +1,15 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import * as TransparentButton from './TransparentButton';
+import * as FloatingActionButton from './FloatingActionButton';
 import * as FilledButton from './FilledButton';
 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 =
   | 'text'
@@ -14,6 +17,7 @@ export type ButtonVariants =
   | 'filled'
   | 'fab'
   | 'fab-mini'
+  | 'fab-large'
   | 'fab-extended'
   | 'icon';
 
@@ -22,8 +26,9 @@ const componentMapping = {
   outlined: OutlinedButton.OutlinedButton,
   filled: FilledButton.FilledButton,
   fab: FilledButton.FilledButton,
-  'fab-extended': FilledButton.FilledButton,
   'fab-mini': FilledButton.FilledButton,
+  'fab-large': FilledButton.FilledButton,
+  'fab-extended': FilledButton.FilledButton,
   icon: TransparentButton.TransparentButton,
 };
 
@@ -31,9 +36,10 @@ const rippleMapping = {
   text: TransparentButton.getRippleProperties,
   outlined: TransparentButton.getRippleProperties,
   filled: FilledButton.getRippleProperties,
-  fab: FilledButton.getRippleProperties,
+  fab: FloatingActionButton.getRippleProperties,
+  'fab-mini': FloatingActionButton.getRippleProperties,
+  'fab-large': FloatingActionButton.getRippleProperties,
   'fab-extended': FilledButton.getRippleProperties,
-  'fab-mini': FilledButton.getRippleProperties,
   icon: IconButton.getRippleProperties,
 };
 
@@ -45,19 +51,27 @@ export interface ButtonProps extends BaseButtonProps {
   variant?: ButtonVariants;
   color?: ButtonColors;
   disabled?: boolean;
-  elevation?: 'none' | 'contained' | 'floating';
+  elevation?: 'none' | 'default' | 'contained' | 'floating' | 'elevated';
+}
+
+function getFallbackElevation(variant: ButtonVariants = 'text') {
+  if (variant === 'text' || variant === 'outlined' || variant === 'icon') {
+    return 'none';
+  }
+  return 'default';
 }
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   function Button(props, forwardedRef) {
+    const buttonGroup = useButtonGroupContext();
     const {
       children,
-      variant = 'text',
+      variant = buttonGroup?.variant || 'text',
       onPointerDown: onPointerDownProp,
       onKeyDown: onKeyDownProp,
       color = 'primary',
       disabled = false,
-      elevation = 'none',
+      elevation = getFallbackElevation(props.variant),
       style: styleProp,
       ...otherProps
     } = props;
@@ -85,6 +99,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         aria-disabled={disabled ? 'true' : undefined}
         color={color}
         elevation={elevation}
+        isGroupedButton={Boolean(buttonGroup)}
         {...rippleProps}
         {...otherProps}
       >

package/src/Button/ButtonGroup.story.tsx

@@ -0,0 +1,106 @@
+import { Box } from '../Box';
+import { Button } from './Button';
+import { ButtonGroup as BaseButtonGroup } from './ButtonGroup';
+
+export default { title: 'components/ButtonGroup' };
+
+const Example = () => {
+  return (
+    <Box sx={{ gap: 24, flexDirection: 'column', display: 'flex' }}>
+      <BaseButtonGroup variant="text">
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="text">
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="text">
+        <Button>Hello</Button>
+        <Button disabled>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="filled">
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="filled">
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="filled">
+        <Button>Hello</Button>
+        <Button disabled>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="outlined">
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="outlined">
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="outlined">
+        <Button>Hello</Button>
+        <Button disabled>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+    </Box>
+  );
+};
+
+const Pressable = () => {
+  return (
+    <Box sx={{ gap: 24, flexDirection: 'column', display: 'flex' }}>
+      <BaseButtonGroup variant="text">
+        <Button aria-pressed="true">Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="text">
+        <Button aria-pressed="true">Hello</Button>
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="text">
+        <Button aria-pressed="true">Hello</Button>
+        <Button disabled>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="filled">
+        <Button aria-pressed="true">Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="filled">
+        <Button aria-pressed="true">Hello</Button>
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="filled">
+        <Button aria-pressed="true">Hello</Button>
+        <Button disabled>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="outlined">
+        <Button aria-pressed="true">Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="outlined">
+        <Button aria-pressed="true">Hello</Button>
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="outlined">
+        <Button aria-pressed="true">Hello</Button>
+        <Button disabled>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+    </Box>
+  );
+};
+
+export const ButtonGroup = () => <Example />;
+export const ButtonGroupPressable = () => <Pressable />;