@basic-ui/material 1.0.0-alpha.44 → 1.0.0-alpha.45

package/src/BottomSheet/BottomSheetSurface.tsx

@@ -1,49 +1,49 @@
-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}
-    />
-  );
-});
+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,127 +1,127 @@
-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, 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/ButtonGroup.story.tsx

@@ -1,106 +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 />;
+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

@@ -1,35 +1,35 @@
-import { 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>
-    );
-  }
-);
+import { 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/FloatingActionButton.tsx

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