@basic-ui/material 1.0.0-alpha.51 → 1.0.0-alpha.54

package/src/Box/Box.tsx

@@ -1,127 +1,133 @@
-import type { ElementType, FC, HTMLAttributes, RefAttributes } from 'react';
-import { forwardRef } from 'react';
-import type { CSSObject } from '@emotion/react';
-import styled from '@emotion/styled';
-import type {
-  SpaceProps,
-  LayoutProps,
-  TypographyProps,
-  ColorProps,
-  FlexboxProps,
-  BorderProps,
-  GridProps,
-  BackgroundProps,
-  PositionProps,
-  ShadowProps,
-  ResponsiveValue,
-} from 'styled-system';
-import {
-  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 type { Theme } from '../theme';
-import { useTheme } from '../theme';
-
-export type SxStyleProp =
-  | SystemStyleObject
-  | Record<
-      string,
-      | SystemStyleObject
-      | ResponsiveStyleValue<number | string>
-      | Record<
-          string,
-          SystemStyleObject | ResponsiveStyleValue<number | string>
-        >
-    >;
-
-export interface BaseProps {
-  as?: ElementType<any>;
-  sx?: SxStyleProp;
-  // css?: CSSObject | ((props: { theme: Theme }) => CSSObject);
-  __css?: SxStyleProp;
-  variant?: ResponsiveValue<string>;
-  tx?: string;
-  theme: Theme;
-}
-export const sx = ({ theme, sx }: BaseProps) => css(sx)(theme) as CSSObject;
-export const base = ({ theme, __css }: BaseProps) =>
-  css(__css)(theme) as CSSObject;
-export const variant = ({
-  theme,
-  variant = 'default',
-  tx = 'variants',
-}: BaseProps) =>
-  css(get(theme, tx + '.' + variant, get(theme, variant as any)))(
-    theme
-  ) as CSSObject;
-
-type KnownBoxProps = BaseProps &
-  SpaceProps &
-  LayoutProps &
-  TypographyProps &
-  ColorProps &
-  FlexboxProps &
-  BorderProps &
-  GridProps &
-  BackgroundProps &
-  PositionProps &
-  ShadowProps & { zIndex?: number | string };
-
-export type BoxProps<
-  H = HTMLDivElement,
-  Attr extends HTMLAttributes<H> = HTMLAttributes<H>
-> = Omit<Attr, keyof KnownBoxProps> & Partial<KnownBoxProps> & RefAttributes<H>;
-
-const BoxBase = styled('div' as unknown as FC, {
-  shouldForwardProp,
-})<BoxProps<HTMLDivElement>>(
-  {
-    boxSizing: 'border-box',
-    margin: 0,
-    minWidth: 0,
-  },
-  base,
-  variant,
-  sx,
-  (props: any) => props.css,
-  compose(
-    space,
-    layout,
-    typography,
-    color,
-    flexbox,
-    border,
-    grid,
-    background,
-    position,
-    shadow
-  )
-);
-
-export const Box: <
-  Props = BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>
->(
-  props: Props
-) => JSX.Element = forwardRef<HTMLDivElement, BoxProps<HTMLDivElement>>(
-  function Box(props, forwardedRef) {
-    const theme = useTheme();
-
-    return <BoxBase ref={forwardedRef} theme={theme} {...props} />;
-  }
-) as any;
+import type {
+  ElementType,
+  FC,
+  HTMLAttributes,
+  ReactElement,
+  RefAttributes,
+} from 'react';
+import { forwardRef } from 'react';
+import type { CSSObject } from '@emotion/react';
+import styled from '@emotion/styled';
+import type {
+  SpaceProps,
+  LayoutProps,
+  TypographyProps,
+  ColorProps,
+  FlexboxProps,
+  BorderProps,
+  GridProps,
+  BackgroundProps,
+  PositionProps,
+  ShadowProps,
+  ResponsiveValue,
+} from 'styled-system';
+import {
+  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 type { Theme } from '../theme';
+import { useTheme } from '../theme';
+
+export type SxStyleProp =
+  | SystemStyleObject
+  | Record<
+      string,
+      | SystemStyleObject
+      | ResponsiveStyleValue<number | string>
+      | Record<
+          string,
+          SystemStyleObject | ResponsiveStyleValue<number | string>
+        >
+    >;
+
+export interface BaseProps {
+  as?: ElementType<any>;
+  sx?: SxStyleProp;
+  // css?: CSSObject | ((props: { theme: Theme }) => CSSObject);
+  __css?: SxStyleProp;
+  variant?: ResponsiveValue<string>;
+  tx?: string;
+  theme: Theme;
+}
+export const sx = ({ theme, sx }: BaseProps) => css(sx)(theme) as CSSObject;
+export const base = ({ theme, __css }: BaseProps) =>
+  css(__css)(theme) as CSSObject;
+export const variant = ({
+  theme,
+  variant = 'default',
+  tx = 'variants',
+}: BaseProps) =>
+  css(get(theme, tx + '.' + variant, get(theme, variant as any)))(
+    theme
+  ) as CSSObject;
+
+type KnownBoxProps = BaseProps &
+  SpaceProps &
+  LayoutProps &
+  TypographyProps &
+  ColorProps &
+  FlexboxProps &
+  BorderProps &
+  GridProps &
+  BackgroundProps &
+  PositionProps &
+  ShadowProps & { zIndex?: number | string };
+
+export type BoxProps<
+  H = HTMLDivElement,
+  Attr extends HTMLAttributes<H> = HTMLAttributes<H>
+> = Omit<Attr, keyof KnownBoxProps> & Partial<KnownBoxProps> & RefAttributes<H>;
+
+const BoxBase = styled('div' as unknown as FC, {
+  shouldForwardProp,
+})<BoxProps<HTMLDivElement>>(
+  {
+    boxSizing: 'border-box',
+    margin: 0,
+    minWidth: 0,
+  },
+  base,
+  variant,
+  sx,
+  (props: any) => props.css,
+  compose(
+    space,
+    layout,
+    typography,
+    color,
+    flexbox,
+    border,
+    grid,
+    background,
+    position,
+    shadow
+  )
+);
+
+export const Box: <
+  Props = BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>
+>(
+  props: Props
+) => ReactElement = forwardRef<HTMLDivElement, BoxProps<HTMLDivElement>>(
+  function Box(props, forwardedRef) {
+    const theme = useTheme();
+
+    return <BoxBase ref={forwardedRef} theme={theme} {...props} />;
+  }
+) as any;

package/src/Box/index.ts

@@ -1 +1 @@
-export * from './Box';
+export * from './Box';

package/src/Button/BaseButton.tsx

@@ -1,26 +1,119 @@
 import type { ButtonHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 import { useTheme } from '@emotion/react';
-import { variant } from 'styled-system';
+import { rem } from 'polished';
 
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
+import type { ButtonVariants } from './Button';
+
+export type ButtonElevation =
+  | 'none'
+  | 'default'
+  | 'elevated'
+  | 'floating'
+  | 'contained';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ButtonShape = 'rounded' | 'square';
 
 export interface BaseButtonProps
   extends BoxProps<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>> {
-  elevation?: string;
+  elevation?: ButtonElevation;
+  size?: ButtonSize;
+  shape?: ButtonShape;
   isGroupedButton?: boolean;
+  variant?: ButtonVariants;
+}
+
+const sizeStyles = {
+  xs: {
+    height: rem(32),
+    iconSize: rem(20),
+    contentPaddingInline: rem(12),
+    standardInnerRadius: rem(12),
+    connectedInnerRadius: rem(4),
+    splitInnerRadius: rem(4),
+  },
+  sm: {
+    height: rem(40),
+    iconSize: rem(24),
+    contentPaddingInline: rem(16),
+    standardInnerRadius: rem(12),
+    connectedInnerRadius: rem(8),
+    splitInnerRadius: rem(4),
+  },
+  md: {
+    height: rem(56),
+    iconSize: rem(24),
+    contentPaddingInline: rem(24),
+    standardInnerRadius: rem(16),
+    connectedInnerRadius: rem(8),
+    splitInnerRadius: rem(4),
+  },
+  lg: {
+    height: rem(96),
+    iconSize: rem(32),
+    contentPaddingInline: rem(48),
+    standardInnerRadius: rem(28),
+    connectedInnerRadius: rem(16),
+    splitInnerRadius: rem(8),
+  },
+  xl: {
+    height: rem(136),
+    iconSize: rem(40),
+    contentPaddingInline: rem(64),
+    standardInnerRadius: rem(28),
+    connectedInnerRadius: rem(20),
+    splitInnerRadius: rem(12),
+  },
+};
+
+function getTypographyVariant(size: ButtonSize) {
+  if (size === 'md') return 'text.title-medium';
+  if (size === 'lg') return 'text.headline-small';
+  if (size === 'xl') return 'text.headline-large';
+  return 'text.label-large';
+}
+
+function getSquareRadius(size: ButtonSize) {
+  if (size === 'md') return 'large';
+  if (size === 'lg' || size === 'xl') return 'extra-large';
+  return 'medium';
+}
+
+function isIconVariant(variant?: ButtonVariants) {
+  return (
+    variant === 'icon' ||
+    variant === 'icon-filled' ||
+    variant === 'icon-outlined' ||
+    variant === 'fab'
+  );
 }
 
 export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
   (props, ref) => {
     const theme = useTheme();
-    const { __css, variant: variantProp, elevation, ...otherProps } = props;
+    const {
+      __css,
+      variant: variantProp = 'text',
+      elevation = 'none',
+      size = 'sm',
+      shape = 'rounded',
+      isGroupedButton,
+      ...otherProps
+    } = props;
+    const sizeStyle = sizeStyles[size];
+    const iconOnly = isIconVariant(variantProp);
+    const contentButton = !iconOnly;
 
     return (
       <Box<BoxProps<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>>
         as="button"
         ref={ref}
+        variant={variantProp}
+        data-button-grouped={isGroupedButton ? '' : undefined}
+        data-button-shape={shape}
+        data-button-size={size}
         __css={{
           boxSizing: 'border-box',
           position: 'relative',
@@ -33,29 +126,41 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
           textDecoration: 'none',
           fontSize: 'inherit',
           border: 0,
+          boxShadow: 'none',
           overflow: 'hidden',
           WebkitTapHighlightColor: 'transparent',
           touchAction: 'manipulation',
           userSelect: 'none',
-          minWidth: 'auto',
+          minWidth: 'fit-content',
           whiteSpace: 'nowrap',
+          cursor: 'pointer',
+          outline: 'none',
+          py: 0,
+          variant: getTypographyVariant(size),
+          height: sizeStyle.height,
+          borderRadius: shape === 'square' ? getSquareRadius(size) : 'full',
+          ...(contentButton && {
+            px: sizeStyle.contentPaddingInline,
+          }),
+          ...(iconOnly && {
+            width: sizeStyle.height,
+            maxWidth: sizeStyle.height,
+            maxHeight: sizeStyle.height,
+            px: `calc((${sizeStyle.height} - ${sizeStyle.iconSize}) / 2)`,
+          }),
+          '--btn-pill-radius': `calc(${sizeStyle.height} / 2)`,
+          '--btn-standard-inner-radius': sizeStyle.standardInnerRadius,
+          '--btn-connected-inner-radius': sizeStyle.connectedInnerRadius,
+          '--btn-split-inner-radius': sizeStyle.splitInnerRadius,
+          '& svg': {
+            width: sizeStyle.iconSize,
+            height: sizeStyle.iconSize,
+          },
           '&::-moz-focus-inner': {
             border: 0,
           },
-          ...variant({
-            scale: 'buttons.variants',
-            prop: 'variant',
-            variants: {
-              text: {},
-            },
-          })({ variant: variantProp, theme }),
-          ...variant({
-            scale: 'buttons.elevations',
-            prop: 'elevation',
-            variants: {
-              none: {},
-            },
-          })({ elevation, theme }),
+          ...((theme.buttons.elevations as Record<string, object>)[elevation] ??
+            {}),
           ...__css,
         }}
         {...otherProps}