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

package/src/Dialog/Dialog.tsx

@@ -1,73 +1,73 @@
-import { forwardRef } from 'react';
-import { Portal } from '@basic-ui/core';
-
-import type { ScrimProps } from './Scrim';
-import { Scrim } from './Scrim';
-import type { DialogContainerProps } from './DialogContainer';
-import { DialogContainer } from './DialogContainer';
-import type { DialogSurfaceProps } from './DialogSurface';
-import { DialogSurface } from './DialogSurface';
-import { useDialogAnimation } from './useDialogAnimation';
-import type { DialogBackdropProps } from './DialogBackdrop';
-import { DialogBackdrop } from './DialogBackdrop';
-import type { DialogAnimationModes } from './useDialogAnimation';
-export type { DialogAnimationModes } from './useDialogAnimation';
-
-export interface DialogProps extends DialogSurfaceProps {
-  open?: boolean;
-  onClose: () => void;
-  disableBackdropClick?: boolean;
-  disableEscapeKeyDown?: boolean;
-  animationMode?: DialogAnimationModes;
-  openTimeoutInMilliseconds?: number;
-  closeTimeoutInMilliseconds?: number;
-  backdropProps?: DialogBackdropProps;
-  containerProps?: DialogContainerProps;
-  scrimProps?: ScrimProps;
-}
-
-export const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(
-  props,
-  forwardedRef
-) {
-  const {
-    open: openProp = false,
-    animationMode = 'grow',
-    onClose,
-    disableBackdropClick,
-    disableEscapeKeyDown,
-    backdropProps,
-    containerProps,
-    scrimProps,
-    openTimeoutInMilliseconds,
-    closeTimeoutInMilliseconds,
-    ...otherProps
-  } = props;
-  const { containerStyle, scrimStyle, open } = useDialogAnimation({
-    open: openProp,
-    mode: animationMode,
-    openTimeoutInMilliseconds,
-    closeTimeoutInMilliseconds,
-  });
-
-  if (!open) {
-    return null;
-  }
-
-  return (
-    <Portal>
-      <DialogBackdrop
-        onClose={onClose}
-        open={openProp}
-        disableCloseOnClick={disableBackdropClick}
-        disableEscapeKeyDown={disableEscapeKeyDown}
-        {...backdropProps}
-      >
-        <Scrim __css={scrimStyle} {...scrimProps} />
-        <DialogContainer __css={containerStyle} {...containerProps}>
-          <DialogSurface ref={forwardedRef} {...otherProps} />
-        </DialogContainer>
-      </DialogBackdrop>
-    </Portal>
-  );
-});
+import { forwardRef } from 'react';
+import { Portal } from '@basic-ui/core';
+
+import type { ScrimProps } from './Scrim';
+import { Scrim } from './Scrim';
+import type { DialogContainerProps } from './DialogContainer';
+import { DialogContainer } from './DialogContainer';
+import type { DialogSurfaceProps } from './DialogSurface';
+import { DialogSurface } from './DialogSurface';
+import { useDialogAnimation } from './useDialogAnimation';
+import type { DialogBackdropProps } from './DialogBackdrop';
+import { DialogBackdrop } from './DialogBackdrop';
+import type { DialogAnimationModes } from './useDialogAnimation';
+export type { DialogAnimationModes } from './useDialogAnimation';
+
+export interface DialogProps extends DialogSurfaceProps {
+  open?: boolean;
+  onClose: () => void;
+  disableBackdropClick?: boolean;
+  disableEscapeKeyDown?: boolean;
+  animationMode?: DialogAnimationModes;
+  openTimeoutInMilliseconds?: number;
+  closeTimeoutInMilliseconds?: number;
+  backdropProps?: DialogBackdropProps;
+  containerProps?: DialogContainerProps;
+  scrimProps?: ScrimProps;
+}
+
+export const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(
+  props,
+  forwardedRef
+) {
+  const {
+    open: openProp = false,
+    animationMode = 'grow',
+    onClose,
+    disableBackdropClick,
+    disableEscapeKeyDown,
+    backdropProps,
+    containerProps,
+    scrimProps,
+    openTimeoutInMilliseconds,
+    closeTimeoutInMilliseconds,
+    ...otherProps
+  } = props;
+  const { containerStyle, scrimStyle, open } = useDialogAnimation({
+    open: openProp,
+    mode: animationMode,
+    openTimeoutInMilliseconds,
+    closeTimeoutInMilliseconds,
+  });
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <Portal>
+      <DialogBackdrop
+        onClose={onClose}
+        open={openProp}
+        disableCloseOnClick={disableBackdropClick}
+        disableEscapeKeyDown={disableEscapeKeyDown}
+        {...backdropProps}
+      >
+        <Scrim __css={scrimStyle} {...scrimProps} />
+        <DialogContainer __css={containerStyle} {...containerProps}>
+          <DialogSurface ref={forwardedRef} {...otherProps} />
+        </DialogContainer>
+      </DialogBackdrop>
+    </Portal>
+  );
+});

package/src/Dialog/DialogBackdrop.tsx

@@ -1,42 +1,42 @@
-import type { FC, Ref } from 'react';
-import { forwardRef } from 'react';
-import type { ModalBackdropProps } from '@basic-ui/core';
-import { ModalBackdrop as _ModalBackdrop } from '@basic-ui/core';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-
-const ModalBackdrop = _ModalBackdrop as FC<
-  DialogBackdropProps & { ref?: Ref<HTMLDivElement> }
->;
-
-export type DialogBackdropProps = ModalBackdropProps &
-  BoxProps & { open?: boolean };
-
-export const DialogBackdrop = forwardRef<HTMLDivElement, DialogBackdropProps>(
-  function DialogBackdrop(props, forwardedRef) {
-    const { open, onClose, __css, ...otherProps } = props;
-
-    const pointerEvents = open ? undefined : 'none';
-
-    return (
-      <ModalBackdrop
-        as={Box}
-        ref={forwardedRef}
-        onClose={onClose}
-        style={{ pointerEvents }}
-        __css={{
-          position: 'fixed',
-          top: '0',
-          left: '0',
-          right: '0',
-          bottom: '0',
-          zIndex: 'dialog',
-          // Can't set overflow auto here otherwise slide animation
-          ...__css,
-        }}
-        {...otherProps}
-      />
-    );
-  }
-);
+import type { FC, Ref } from 'react';
+import { forwardRef } from 'react';
+import type { ModalBackdropProps } from '@basic-ui/core';
+import { ModalBackdrop as _ModalBackdrop } from '@basic-ui/core';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+
+const ModalBackdrop = _ModalBackdrop as FC<
+  DialogBackdropProps & { ref?: Ref<HTMLDivElement> }
+>;
+
+export type DialogBackdropProps = ModalBackdropProps &
+  BoxProps & { open?: boolean };
+
+export const DialogBackdrop = forwardRef<HTMLDivElement, DialogBackdropProps>(
+  function DialogBackdrop(props, forwardedRef) {
+    const { open, onClose, __css, ...otherProps } = props;
+
+    const pointerEvents = open ? undefined : 'none';
+
+    return (
+      <ModalBackdrop
+        as={Box}
+        ref={forwardedRef}
+        onClose={onClose}
+        style={{ pointerEvents }}
+        __css={{
+          position: 'fixed',
+          top: '0',
+          left: '0',
+          right: '0',
+          bottom: '0',
+          zIndex: 'dialog',
+          // Can't set overflow auto here otherwise slide animation
+          ...__css,
+        }}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/Dialog/DialogContainer.tsx

@@ -1,31 +1,31 @@
-import { forwardRef } from 'react';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-
-export type DialogContainerProps = BoxProps;
-
-export const DialogContainer = forwardRef<HTMLDivElement, BoxProps>(
-  function DialogContainer(props, forwardedRef) {
-    const { __css, ...otherProps } = props;
-
-    return (
-      <Box
-        ref={forwardedRef}
-        __css={{
-          position: 'absolute',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          width: '100%',
-          height: '100%',
-          willChange: 'transform,opacity',
-          transformOrigin: 'center center',
-          pointerEvents: 'none',
-          ...__css,
-        }}
-        {...otherProps}
-      />
-    );
-  }
-);
+import { forwardRef } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+
+export type DialogContainerProps = BoxProps;
+
+export const DialogContainer = forwardRef<HTMLDivElement, BoxProps>(
+  function DialogContainer(props, forwardedRef) {
+    const { __css, ...otherProps } = props;
+
+    return (
+      <Box
+        ref={forwardedRef}
+        __css={{
+          position: 'absolute',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '100%',
+          height: '100%',
+          willChange: 'transform,opacity',
+          transformOrigin: 'center center',
+          pointerEvents: 'none',
+          ...__css,
+        }}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/Dialog/DialogSurface.tsx

@@ -1,55 +1,55 @@
-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 { get, variant } from 'styled-system';
-
-import type { PaperProps } from '../Paper';
-import { Paper } from '../Paper';
-import { useTheme } from '../theme';
-
-const Modal = _Modal as FC<DialogSurfaceProps & { ref?: Ref<HTMLDivElement> }>;
-
-export type DialogSurfaceProps = ModalProps &
-  PaperProps & {
-    variant?: 'base';
-  };
-
-export const DialogSurface = forwardRef<HTMLDivElement, DialogSurfaceProps>(
-  function DialogSurface(props, forwardedRef) {
-    const { __css, variant: variantProp = 'base', ...otherProps } = props;
-    const theme = useTheme();
-
-    const overlayValue =
-      (get(theme, 'dialogs.backgroundColorOverlay') as number) || 0;
-
-    return (
-      <Modal
-        ref={forwardedRef}
-        as={Paper}
-        theme={theme}
-        elevation={3}
-        darkThemeBackgroundOverlay={overlayValue}
-        __css={{
-          position: 'relative',
-          borderRadius: 'small',
-          width: '100%',
-          maxWidth: rem(600),
-          maxHeight: '100%',
-          overflow: 'auto',
-          pointerEvents: 'auto',
-          ...variant({
-            scale: 'dialogs.variants',
-            prop: 'variant',
-            variants: {
-              base: {},
-            },
-          })({ variant: variantProp, theme }),
-          ...__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 { get, variant } from 'styled-system';
+
+import type { PaperProps } from '../Paper';
+import { Paper } from '../Paper';
+import { useTheme } from '../theme';
+
+const Modal = _Modal as FC<DialogSurfaceProps & { ref?: Ref<HTMLDivElement> }>;
+
+export type DialogSurfaceProps = ModalProps &
+  PaperProps & {
+    variant?: 'base';
+  };
+
+export const DialogSurface = forwardRef<HTMLDivElement, DialogSurfaceProps>(
+  function DialogSurface(props, forwardedRef) {
+    const { __css, variant: variantProp = 'base', ...otherProps } = props;
+    const theme = useTheme();
+
+    const overlayValue =
+      (get(theme, 'dialogs.backgroundColorOverlay') as number) || 0;
+
+    return (
+      <Modal
+        ref={forwardedRef}
+        as={Paper}
+        theme={theme}
+        elevation={3}
+        darkThemeBackgroundOverlay={overlayValue}
+        __css={{
+          position: 'relative',
+          borderRadius: 'small',
+          width: '100%',
+          maxWidth: rem(600),
+          maxHeight: '100%',
+          overflow: 'auto',
+          pointerEvents: 'auto',
+          ...variant({
+            scale: 'dialogs.variants',
+            prop: 'variant',
+            variants: {
+              base: {},
+            },
+          })({ variant: variantProp, theme }),
+          ...__css,
+        }}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/Dialog/Scrim.tsx

@@ -1,35 +1,35 @@
-import { forwardRef } from 'react';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-import { alpha } from '../color';
-
-export type ScrimProps = BoxProps;
-
-export const Scrim = forwardRef<HTMLDivElement, ScrimProps>(function Scrim(
-  props,
-  forwardedRef
-) {
-  const { __css, ...otherProps } = props;
-
-  return (
-    <Box
-      ref={forwardedRef}
-      __css={{
-        position: 'fixed',
-        top: '0',
-        left: '0',
-        right: '0',
-        bottom: '0',
-        width: '100%',
-        height: '100%',
-        backgroundColor: alpha('#000', 0.32),
-        willChange: 'opacity',
-        zIndex: -1,
-        pointerEvents: 'none',
-        ...__css,
-      }}
-      {...otherProps}
-    />
-  );
-});
+import { forwardRef } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { alpha } from '../color';
+
+export type ScrimProps = BoxProps;
+
+export const Scrim = forwardRef<HTMLDivElement, ScrimProps>(function Scrim(
+  props,
+  forwardedRef
+) {
+  const { __css, ...otherProps } = props;
+
+  return (
+    <Box
+      ref={forwardedRef}
+      __css={{
+        position: 'fixed',
+        top: '0',
+        left: '0',
+        right: '0',
+        bottom: '0',
+        width: '100%',
+        height: '100%',
+        backgroundColor: alpha('#000', 0.32),
+        willChange: 'opacity',
+        zIndex: -1,
+        pointerEvents: 'none',
+        ...__css,
+      }}
+      {...otherProps}
+    />
+  );
+});

package/src/Dialog/index.ts

@@ -1,2 +1,2 @@
-export * from './Dialog';
-export type { DialogBackdropProps } from './DialogBackdrop';
+export * from './Dialog';
+export type { DialogBackdropProps } from './DialogBackdrop';

package/src/Dialog/useDialogAnimation.tsx

@@ -1,49 +1,59 @@
-import { useAnimation } from '../hooks/useAnimation';
-import { EASING_STANDARD } from '../motion';
-
-const styles = {
-  slide: {
-    closed: { opacity: 0.6, transform: 'translateY(100%)' },
-    open: { opacity: 1, transform: 'translateY(0%)' },
-    close: { opacity: 0, transform: 'translateY(10%)' },
-  },
-  grow: {
-    closed: { opacity: 0.8, transform: 'scale(0.8)' },
-    open: { opacity: 1, transform: 'scale(1)' },
-    close: { opacity: 0, transform: 'scale(1)' },
-  },
-  'slide-grow': {
-    closed: { opacity: 0.8, transform: 'translateY(50%) scale(0.8)' },
-    open: { opacity: 1, transform: 'translateY(0%) scale(1)' },
-    close: { opacity: 0 },
-  },
-};
-
-export type DialogAnimationModes = keyof typeof styles;
-
-export function useDialogAnimation(opts: {
-  open: boolean;
-  mode?: DialogAnimationModes;
-  openTimeoutInMilliseconds?: number;
-  closeTimeoutInMilliseconds?: number;
-}) {
-  const { mode = 'grow', ...otherOpts } = opts;
-  const { open, state, style, timing } = useAnimation({
-    styles,
-    mode,
-    ...otherOpts,
-  });
-  const scrimOpacity = state === 'open' ? 1 : 0;
-
-  const transition = `opacity ${timing}ms ${EASING_STANDARD},transform ${timing}ms ${EASING_STANDARD}`;
-  const scrimTransition = `opacity ${(timing * 0.4) | 0}ms ${EASING_STANDARD}`;
-
-  return {
-    containerStyle: { ...style, transition },
-    scrimStyle: {
-      opacity: scrimOpacity,
-      transition: scrimTransition,
-    },
-    open,
-  };
-}
+import { useAnimation } from '../hooks/useAnimation';
+import { EASING_STANDARD } from '../motion';
+
+const styles = {
+  slide: {
+    closed: { opacity: 0.6, transform: 'translateY(100%)' },
+    open: { opacity: 1, transform: 'translateY(0%)' },
+    close: { opacity: 0, transform: 'translateY(10%)' },
+  },
+  grow: {
+    closed: { opacity: 0.8, transform: 'scale(0.8)' },
+    open: { opacity: 1, transform: 'scale(1)' },
+    close: { opacity: 0, transform: 'scale(1)' },
+  },
+  'slide-grow': {
+    closed: { opacity: 0.8, transform: 'translateY(50%) scale(0.8)' },
+    open: { opacity: 1, transform: 'translateY(0%) scale(1)' },
+    close: { opacity: 0 },
+  },
+};
+
+export type DialogAnimationModes = keyof typeof styles;
+
+export interface UseDialogAnimationOptions {
+  open: boolean;
+  mode?: DialogAnimationModes;
+  openTimeoutInMilliseconds?: number;
+  closeTimeoutInMilliseconds?: number;
+}
+
+export interface UseDialogAnimationResult {
+  containerStyle: Record<string, string | number>;
+  scrimStyle: Record<string, string | number>;
+  open: boolean;
+}
+
+export function useDialogAnimation(
+  opts: UseDialogAnimationOptions
+): UseDialogAnimationResult {
+  const { mode = 'grow', ...otherOpts } = opts;
+  const { open, state, style, timing } = useAnimation({
+    styles,
+    mode,
+    ...otherOpts,
+  });
+  const scrimOpacity = state === 'open' ? 1 : 0;
+
+  const transition = `opacity ${timing}ms ${EASING_STANDARD},transform ${timing}ms ${EASING_STANDARD}`;
+  const scrimTransition = `opacity ${(timing * 0.4) | 0}ms ${EASING_STANDARD}`;
+
+  return {
+    containerStyle: { ...style, transition },
+    scrimStyle: {
+      opacity: scrimOpacity,
+      transition: scrimTransition,
+    },
+    open,
+  };
+}

package/src/Divider/Divider.story.tsx

@@ -1,39 +1,39 @@
-import { Divider } from './';
-import { Text } from '../Text';
-import { Box } from '../Box';
-// import './styles.css';
-
-export default {
-  title: 'components/Divider',
-};
-
-const ExampleHorizontal = () => {
-  return (
-    <Box bg="surface">
-      <Text height={50} p={3}>
-        Hello
-      </Text>
-      <Divider m={2} />
-      <Text height={50} p={3}>
-        Hello
-      </Text>
-    </Box>
-  );
-};
-
-const ExampleVertical = () => {
-  return (
-    <Box bg="surface" display="flex" flexDirection="row">
-      <Text height={50} p={3}>
-        Hello
-      </Text>
-      <Divider m={2} direction="vertical" />
-      <Text height={50} p={3}>
-        Hello
-      </Text>
-    </Box>
-  );
-};
-
-export const Horizontal = () => <ExampleHorizontal />;
-export const Vertical = () => <ExampleVertical />;
+import { Divider } from './';
+import { Text } from '../Text';
+import { Box } from '../Box';
+// import './styles.css';
+
+export default {
+  title: 'components/Divider',
+};
+
+const ExampleHorizontal = () => {
+  return (
+    <Box bg="surface">
+      <Text height={50} p={3}>
+        Hello
+      </Text>
+      <Divider m={2} />
+      <Text height={50} p={3}>
+        Hello
+      </Text>
+    </Box>
+  );
+};
+
+const ExampleVertical = () => {
+  return (
+    <Box bg="surface" display="flex" flexDirection="row">
+      <Text height={50} p={3}>
+        Hello
+      </Text>
+      <Divider m={2} direction="vertical" />
+      <Text height={50} p={3}>
+        Hello
+      </Text>
+    </Box>
+  );
+};
+
+export const Horizontal = () => <ExampleHorizontal />;
+export const Vertical = () => <ExampleVertical />;