@basic-ui/material 0.1.15 → 1.0.0-alpha.1

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';
 
@@ -19,11 +20,12 @@ const AppsIcon = (props) => (
 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 +33,44 @@ 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}>
+      <Box p={3} display="flex" sx={{ gap: 2 }}>
+        <Button variant="fab-mini" elevation="floating" {...props}>
           S
         </Button>
-        <Button
-          variant="fab-mini"
-          elevation="floating"
-          mr={2}
-          mb={2}
-          {...props}
-        >
+        <Button variant="fab" elevation="floating" {...props}>
           S
         </Button>
-        <Button
-          variant="fab-extended"
-          elevation="floating"
-          mr={2}
-          mb={2}
-          {...props}
-        >
+        <Button variant="fab-large" elevation="floating" {...props}>
+          S
+        </Button>
+        <Button variant="fab-extended" elevation="floating" {...props}>
           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 />;

package/src/Button/ButtonGroup.tsx

@@ -0,0 +1,35 @@
+import React, { forwardRef, useMemo } from 'react';
+
+import type { ButtonProps } from './Button';
+import type { ButtonGroupContextProps } from './context';
+import { ButtonGroupContext } from './context';
+
+export type ButtonGroupProps = ButtonProps & ButtonGroupContextProps;
+
+export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
+  function ButtonGroup(props, forwardedRef) {
+    const {
+      as: Comp = 'div',
+      variant = 'text',
+      direction = 'row',
+      ...otherProps
+    } = props;
+
+    const value: ButtonGroupContextProps = useMemo(
+      () => ({ direction, variant }),
+      [direction, variant]
+    );
+
+    return (
+      <ButtonGroupContext.Provider value={value}>
+        <Comp
+          ref={forwardedRef}
+          role="group"
+          data-button-group=""
+          data-button-group-direction={direction}
+          {...otherProps}
+        />
+      </ButtonGroupContext.Provider>
+    );
+  }
+);

package/src/Button/FilledButton.tsx

@@ -1,10 +1,11 @@
 import styled from '@emotion/styled';
-import { readableColor } from 'polished';
-import { BaseButton } from './BaseButton';
-import { Theme } from '../theme';
-import { alpha, getDarkThemeBackgroundOverlay } from '../color';
+import { readableColor, rem } from 'polished';
 import { get, css } from '@styled-system/css';
 
+import { BaseButton } from './BaseButton';
+import type { Theme } from '../theme';
+import { alpha, getBackgroundOverlay } from '../color';
+
 export const FilledButton = styled(BaseButton)(
   ({ color = 'primary', theme }) =>
     css({
@@ -21,13 +22,46 @@ export const FilledButton = styled(BaseButton)(
         backgroundBlendMode: 'overlay',
         cursor: 'default',
       },
+      '&:focus-visible': {
+        outlineColor: get(theme, `colors.${String(color)}`) || color,
+        outlineWidth: 2,
+        outlineStyle: 'auto',
+        outlineOffset: '2px',
+      },
     }),
   ({ color = 'primary', elevation = 'none', theme }) =>
     color === 'surface' && {
-      ...getDarkThemeBackgroundOverlay(
+      ...getBackgroundOverlay(
         theme,
-        get(theme, `buttons.elevations.${elevation}.boxShadow`, 0)
+        get(theme, `buttons.elevations.${elevation}.boxShadow`, 0),
+        'primary'
       ),
+    },
+  ({ color = 'primary', theme, isGroupedButton = false }) =>
+    isGroupedButton && {
+      '[data-button-group=""] &': {
+        borderColor:
+          get(theme, `colors.on.${String(color)}`) ||
+          (typeof color === 'string' ? readableColor(color) : undefined),
+        ':first-of-type': {
+          borderTopRightRadius: 0,
+          borderBottomRightRadius: 0,
+          borderRightStyle: 'solid',
+          borderRightWidth: rem(1),
+        },
+        ':not(:first-of-type):not(:last-of-type)': {
+          borderRadius: 0,
+        },
+        ':last-of-type': {
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0,
+          borderLeftStyle: 'solid',
+          borderLeftWidth: rem(1),
+        },
+        ':last-of-type:nth-of-type(2)': {
+          borderLeftWidth: 0,
+        },
+      },
     }
 );
 
@@ -36,5 +70,6 @@ export function getRippleProperties(theme: Theme) {
     hoverOpacity: get(theme, `buttons.overlays.filled.hover.opacity`),
     focusOpacity: get(theme, `buttons.overlays.filled.focus.opacity`),
     pressedOpacity: get(theme, `buttons.overlays.filled.pressed.opacity`),
+    rippleEnabled: false,
   };
 }

package/src/Button/FloatingActionButton.tsx

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

package/src/Button/IconButton.tsx

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

package/src/Button/OutlinedButton.tsx

@@ -1,18 +1,47 @@
-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',
     borderWidth: rem(1),
-    borderColor: alpha('on.surface', 0.12),
+    borderColor: 'outline',
+    boxShadow: 0,
+    '&:focus,:&active,:&hover': { boxShadow: 0 },
+    '&:focus-visible,&:active': {
+      borderColor: 'currentColor',
+    },
     '&:disabled': {
       color: alpha('on.surface', 0.38),
       borderColor: alpha('on.surface', 0.12),
       cursor: 'default',
     },
-  })
+  }),
+  ({ isGroupedButton = false }) =>
+    isGroupedButton && {
+      '[data-button-group=""] &': {
+        ':first-of-type': {
+          borderTopRightRadius: 0,
+          borderBottomRightRadius: 0,
+        },
+        ':not(:first-of-type):not(:last-of-type)': {
+          borderRadius: 0,
+          borderRightWidth: 0,
+          borderLeftWidth: 0,
+        },
+        ':last-of-type': {
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0,
+          borderLeftStyle: 'solid',
+          borderLeftWidth: rem(1),
+        },
+        ':last-of-type:nth-of-type(2)': {
+          borderLeftWidth: 0,
+        },
+      },
+    }
 );

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 (
@@ -54,7 +53,7 @@ const Example = ({ vertical = false }) => {
         display: 'inline-flex',
         alignItems: 'center',
         flexDirection: vertical ? 'column-reverse' : 'row',
-        borderRadius: '4px',
+        borderRadius: 'full',
         '&:focus': {
           outline: 'none',
           boxShadow: `0px 0px 10px 0px ${alpha('primary', 0.6)(theme)}`,

package/src/Button/TransparentButton.tsx

@@ -1,8 +1,9 @@
 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';
 
 export const TransparentButton = styled(BaseButton)(
@@ -14,7 +15,36 @@ export const TransparentButton = styled(BaseButton)(
         color: alpha('on.surface', 0.38),
         cursor: 'default',
       },
-    })
+      '&:focus-visible': {
+        outline: 'none',
+      },
+    }),
+  ({ theme, color = 'primary', isGroupedButton = false }) =>
+    isGroupedButton && {
+      '[data-button-group=""] &': {
+        borderColor:
+          get(theme, `colors.${String(color)}`) ||
+          (typeof color === 'string' ? color : undefined),
+        ':first-of-type': {
+          borderTopRightRadius: 0,
+          borderBottomRightRadius: 0,
+          borderRightStyle: 'solid',
+          borderRightWidth: rem(1),
+        },
+        ':not(:first-of-type):not(:last-of-type)': {
+          borderRadius: 0,
+        },
+        ':last-of-type': {
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0,
+          borderLeftStyle: 'solid',
+          borderLeftWidth: rem(1),
+        },
+        ':last-of-type:nth-of-type(2)': {
+          borderLeftWidth: 0,
+        },
+      },
+    }
 );
 
 export function getRippleProperties(theme: Theme) {
@@ -22,5 +52,6 @@ export function getRippleProperties(theme: Theme) {
     hoverOpacity: get(theme, `buttons.overlays.transparent.hover.opacity`),
     focusOpacity: get(theme, `buttons.overlays.transparent.focus.opacity`),
     pressedOpacity: get(theme, `buttons.overlays.transparent.pressed.opacity`),
+    rippleEnabled: false,
   };
 }

package/src/Button/context.tsx

@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+
+import type { ButtonProps } from './Button';
+
+// ButtonGroup Component
+export type ButtonGroupContextProps = {
+  variant?: ButtonProps['variant'];
+  direction?: 'row' | 'column';
+};
+
+export const ButtonGroupContext = createContext<ButtonGroupContextProps | null>(
+  null
+);
+ButtonGroupContext.displayName = 'ButtonGroupContext';
+
+export const useButtonGroupContext = (): ButtonGroupContextProps | null =>
+  useContext(ButtonGroupContext);

package/src/Button/index.ts

@@ -1 +1,2 @@
 export * from './Button';
+export * from './ButtonGroup';