@basic-ui/material 1.0.0-alpha.5 → 1.0.0-alpha.50

package/src/BottomSheet/BottomSheet.story.tsx

@@ -1,35 +1,35 @@
-import { useState } from 'react';
-
-import { BottomSheet } from './';
-import { Button } from '../Button';
-import { LoremIpsum } from '../Text/LoremIpsum';
-import { Box } from '../Box';
-import { Switch } from '../Switch';
-
-export default {
-  title: 'components/BottomSheet',
-};
-
-export const Default = () => {
-  const [open, setOpen] = useState(false);
-  const [long, setLong] = useState(false);
-
-  return (
-    <Box bg="surface">
-      <Button id="open-button" onClick={() => setOpen(true)}>
-        Open Bottom Sheet
-      </Button>
-      <Switch checked={long} onChange={(e) => setLong(e.target.checked)}>
-        Long content
-      </Switch>
-      <LoremIpsum count={20} />
-      <Button id="open-button-2" onClick={() => setOpen(true)}>
-        Open Bottom Sheet
-      </Button>
-      <BottomSheet open={open} onClose={() => setOpen(false)}>
-        <LoremIpsum count={long ? 10 : 1} />
-        <Button onClick={() => setOpen(false)}>Close</Button>
-      </BottomSheet>
-    </Box>
-  );
-};
+import { useState } from 'react';
+
+import { BottomSheet } from './';
+import { Button } from '../Button';
+import { LoremIpsum } from '../Text/LoremIpsum';
+import { Box } from '../Box';
+import { Switch } from '../Switch';
+
+export default {
+  title: 'components/BottomSheet',
+};
+
+export const Default = () => {
+  const [open, setOpen] = useState(false);
+  const [long, setLong] = useState(false);
+
+  return (
+    <Box bg="surface">
+      <Button id="open-button" onClick={() => setOpen(true)}>
+        Open Bottom Sheet
+      </Button>
+      <Switch checked={long} onChange={(e) => setLong(e.target.checked)}>
+        Long content
+      </Switch>
+      <LoremIpsum count={20} />
+      <Button id="open-button-2" onClick={() => setOpen(true)}>
+        Open Bottom Sheet
+      </Button>
+      <BottomSheet open={open} onClose={() => setOpen(false)}>
+        <LoremIpsum count={long ? 10 : 1} />
+        <Button onClick={() => setOpen(false)}>Close</Button>
+      </BottomSheet>
+    </Box>
+  );
+};

package/src/BottomSheet/BottomSheet.tsx

@@ -1,39 +1,39 @@
-import { forwardRef } from 'react';
-import { Portal } from '@basic-ui/core';
-
-import { Scrim } from '../Dialog/Scrim';
-import { DialogContainer } from '../Dialog/DialogContainer';
-import type { DialogSurfaceProps } from '../Dialog/DialogSurface';
-import { useDialogAnimation } from '../Dialog/useDialogAnimation';
-import { DialogBackdrop } from '../Dialog/DialogBackdrop';
-import { BottomSheetSurface } from './BottomSheetSurface';
-
-export interface BottomSheetProps extends DialogSurfaceProps {
-  open?: boolean;
-  onClose: () => void;
-}
-
-export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
-  function BottomSheet(props, forwardedRef) {
-    const { open: openProp = false, onClose, ...otherProps } = props;
-    const { containerStyle, scrimStyle, open } = useDialogAnimation({
-      open: openProp,
-      mode: 'slide',
-    });
-
-    if (!open) {
-      return null;
-    }
-
-    return (
-      <Portal>
-        <DialogBackdrop onClose={onClose} open={openProp}>
-          <Scrim __css={scrimStyle} />
-          <DialogContainer __css={containerStyle}>
-            <BottomSheetSurface ref={forwardedRef} {...otherProps} />
-          </DialogContainer>
-        </DialogBackdrop>
-      </Portal>
-    );
-  }
-);
+import { forwardRef } from 'react';
+import { Portal } from '@basic-ui/core';
+
+import { Scrim } from '../Dialog/Scrim';
+import { DialogContainer } from '../Dialog/DialogContainer';
+import type { DialogSurfaceProps } from '../Dialog/DialogSurface';
+import { useDialogAnimation } from '../Dialog/useDialogAnimation';
+import { DialogBackdrop } from '../Dialog/DialogBackdrop';
+import { BottomSheetSurface } from './BottomSheetSurface';
+
+export interface BottomSheetProps extends DialogSurfaceProps {
+  open?: boolean;
+  onClose: () => void;
+}
+
+export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
+  function BottomSheet(props, forwardedRef) {
+    const { open: openProp = false, onClose, ...otherProps } = props;
+    const { containerStyle, scrimStyle, open } = useDialogAnimation({
+      open: openProp,
+      mode: 'slide',
+    });
+
+    if (!open) {
+      return null;
+    }
+
+    return (
+      <Portal>
+        <DialogBackdrop onClose={onClose} open={openProp}>
+          <Scrim __css={scrimStyle} />
+          <DialogContainer __css={containerStyle}>
+            <BottomSheetSurface ref={forwardedRef} {...otherProps} />
+          </DialogContainer>
+        </DialogBackdrop>
+      </Portal>
+    );
+  }
+);

package/src/BottomSheet/BottomSheetSurface.tsx

@@ -1,49 +1,49 @@
-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';
-
-import type { PaperProps } from '../Paper';
-import { Paper } from '../Paper';
-import { useTheme } from '../theme';
-
-const Modal = _Modal as React.FC<
-  BottomSheetSurfaceProps & { ref?: React.Ref<HTMLDivElement> }
->;
-
-export type BottomSheetSurfaceProps = ModalProps & PaperProps;
-
-export const BottomSheetSurface = forwardRef<
-  HTMLDivElement,
-  BottomSheetSurfaceProps
->(function BottomSheetSurface(props, forwardedRef) {
-  const { __css, ...otherProps } = props;
-  const theme = useTheme();
-
-  return (
-    <Modal
-      ref={forwardedRef}
-      as={Paper}
-      theme={theme}
-      elevation={3}
-      darkThemeBackgroundOverlay={3}
-      __css={{
-        position: 'absolute',
-        bg: 'surface',
-        bottom: 0,
-        mx: 'auto',
-        borderRadius: 0,
-        borderTopLeftRadius: rem(8),
-        borderTopRightRadius: rem(8),
-        width: '100%',
-        maxWidth: rem(600),
-        maxHeight: '50%',
-        overflow: 'auto',
-        pointerEvents: 'auto',
-        ...__css,
-      }}
-      {...otherProps}
-    />
-  );
-});
+import type { FC, Ref } from 'react';
+import { forwardRef } 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 FC<
+  BottomSheetSurfaceProps & { ref?: Ref<HTMLDivElement> }
+>;
+
+export type BottomSheetSurfaceProps = ModalProps & PaperProps;
+
+export const BottomSheetSurface = forwardRef<
+  HTMLDivElement,
+  BottomSheetSurfaceProps
+>(function BottomSheetSurface(props, forwardedRef) {
+  const { __css, ...otherProps } = props;
+  const theme = useTheme();
+
+  return (
+    <Modal
+      ref={forwardedRef}
+      as={Paper}
+      theme={theme}
+      elevation={3}
+      darkThemeBackgroundOverlay={3}
+      __css={{
+        position: 'absolute',
+        bg: 'surface',
+        bottom: 0,
+        mx: 'auto',
+        borderRadius: 0,
+        borderTopLeftRadius: rem(8),
+        borderTopRightRadius: rem(8),
+        width: '100%',
+        maxWidth: rem(600),
+        maxHeight: '50%',
+        overflow: 'auto',
+        pointerEvents: 'auto',
+        ...__css,
+      }}
+      {...otherProps}
+    />
+  );
+});

package/src/BottomSheet/index.ts

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

package/src/Box/Box.tsx

@@ -1,129 +1,127 @@
-import { forwardRef } from 'react';
-import * as React 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?: React.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 React.HTMLAttributes<H> = React.HTMLAttributes<H>
-> = Omit<Attr, keyof KnownBoxProps> &
-  Partial<KnownBoxProps> &
-  React.RefAttributes<H>;
-
-const BoxBase = styled('div' as unknown as React.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, React.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, 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;

package/src/Box/index.ts

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

package/src/Button/BaseButton.tsx

@@ -1,5 +1,5 @@
+import type { ButtonHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { useTheme } from '@emotion/react';
 import { variant } from 'styled-system';
 
@@ -7,10 +7,7 @@ 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;
 }
@@ -21,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={{
@@ -46,6 +38,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
           touchAction: 'manipulation',
           userSelect: 'none',
           minWidth: 'auto',
+          whiteSpace: 'nowrap',
           '&::-moz-focus-inner': {
             border: 0,
           },

package/src/Button/Button.story.tsx

@@ -29,6 +29,10 @@ const NavigationIcon = (props) => (
 const Example = (props) => {
   return (
     <Box bg="surface">
+      <div className="bg-primary w-16 h-16 text-body-medium">Hello</div>
+      <div className="bg-primary-container w-16 h-16" />
+      <div className="bg-on-primary-container w-16 h-16" />
+      <div className="bg-ss-container-high w-16 h-16" />
       <Box p={3} display="flex" sx={{ gap: 2 }}>
         <Button variant="filled" {...props}>
           Filled
@@ -99,7 +103,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,5 @@
+import type { ComponentType, ElementType, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 import * as TransparentButton from './TransparentButton';
 import * as FloatingActionButton from './FloatingActionButton';
@@ -46,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;
@@ -78,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({