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

package/src/NotchedOutline/styledComponents.ts

@@ -1,122 +1,122 @@
-import styled from '@emotion/styled';
-import { rem } from 'polished';
-import shouldForwardProp from '@styled-system/should-forward-prop';
-import { css } from '@styled-system/css';
-
-import { alpha } from '../color';
-import type { Theme } from '../theme';
-import { EASING_STANDARD } from '../motion';
-
-export const NOTCH_PADDING = 4;
-
-const makeSelector = (
-  state:
-    | 'hover:not([disabled]):not(:focus)'
-    | 'focus:not([disabled])'
-    | 'disabled'
-) =>
-  `input:${state} ~ & [data-notch-outline-item],` +
-  `select:${state} ~ & [data-notch-outline-item],` +
-  `[role="button"]:${state} ~ & [data-notch-outline-item],` +
-  `textarea:${state} ~ & [data-notch-outline-item]`;
-
-export const InnerContainer = styled('div', {
-  shouldForwardProp,
-})<{
-  color?: string;
-  theme?: Theme;
-  borderRadius: number;
-  borderWidth: number;
-  borderWidthWhenFocused: number;
-  borderStyle: string;
-  notchStart: number;
-  forceActive?: boolean;
-}>(
-  {
-    position: 'absolute',
-    display: 'flex',
-    left: 0,
-    top: 0,
-    bottom: 0,
-    width: '100%',
-    height: '100%',
-    pointerEvents: 'none',
-  },
-  ({
-    color = 'on.surface',
-    borderRadius: borderRadiusPx,
-    borderWidth: borderWidthPx,
-    borderWidthWhenFocused: borderWidthWhenFocusedPx,
-    borderStyle,
-    notchStart,
-    forceActive = false,
-  }) => {
-    const width = rem(notchStart - NOTCH_PADDING);
-    const borderRadius = rem(borderRadiusPx);
-    const borderWidth = rem(borderWidthPx);
-    const borderWidthWhenFocused = rem(borderWidthWhenFocusedPx);
-
-    function borderStyling(borderRadius: string, borderWidth: string) {
-      return {
-        ['&[data-notch-outline-item="start"]']: {
-          borderTopLeftRadius: borderRadius,
-          borderBottomLeftRadius: borderRadius,
-          borderWidth: borderWidth,
-          borderRightWidth: 0,
-          width,
-        },
-        ['&[data-notch-outline-item="middle"]']: {
-          borderWidth: 0,
-          borderBottomWidth: borderWidth,
-        },
-        ['&[data-notch-outline-item="end"]']: {
-          borderWidth: borderWidth,
-          borderLeft: 0,
-          borderTopRightRadius: borderRadius,
-          borderBottomRightRadius: borderRadius,
-          flex: 1,
-        },
-      };
-    }
-
-    const inactiveStyle = {
-      color: 'on.surface-variant',
-      borderColor: 'outline',
-      ...borderStyling(borderRadius, borderWidth),
-    };
-
-    const hoverStyle = {
-      borderColor: 'on.surface',
-      color: 'on.surface-variant',
-    };
-
-    const focusStyle = {
-      borderColor: color,
-      color: alpha(color, 0.87),
-      ...borderStyling(borderRadius, borderWidthWhenFocused),
-    };
-
-    const disabledStyle = {
-      borderColor: alpha('on.surface', 0.06),
-      color: alpha('on.surface', 0.38),
-    };
-
-    return css({
-      // notch items styles when not focused
-      ['[data-notch-outline-item]']: {
-        boxSizing: 'border-box',
-        borderStyle,
-        transition: `border-color .15s ${EASING_STANDARD}`,
-        ...(forceActive ? focusStyle : inactiveStyle),
-      },
-      // notch items styles when input is hovered
-      [makeSelector('hover:not([disabled]):not(:focus)')]: forceActive
-        ? focusStyle
-        : hoverStyle,
-      // notch items styles when input is focused
-      [makeSelector('focus:not([disabled])')]: focusStyle,
-      // notch items styles when input is disabled
-      [makeSelector('disabled')]: disabledStyle,
-    });
-  }
-);
+import styled from '@emotion/styled';
+import { rem } from 'polished';
+import shouldForwardProp from '@styled-system/should-forward-prop';
+import { css } from '@styled-system/css';
+
+import { alpha } from '../color';
+import type { Theme } from '../theme';
+import { EASING_STANDARD } from '../motion';
+
+export const NOTCH_PADDING = 4;
+
+const makeSelector = (
+  state:
+    | 'hover:not([disabled]):not(:focus)'
+    | 'focus:not([disabled])'
+    | 'disabled'
+) =>
+  `input:${state} ~ & [data-notch-outline-item],` +
+  `select:${state} ~ & [data-notch-outline-item],` +
+  `[role="button"]:${state} ~ & [data-notch-outline-item],` +
+  `textarea:${state} ~ & [data-notch-outline-item]`;
+
+export const InnerContainer = styled('div', {
+  shouldForwardProp,
+})<{
+  color?: string;
+  theme?: Theme;
+  borderRadius: number;
+  borderWidth: number;
+  borderWidthWhenFocused: number;
+  borderStyle: string;
+  notchStart: number;
+  forceActive?: boolean;
+}>(
+  {
+    position: 'absolute',
+    display: 'flex',
+    left: 0,
+    top: 0,
+    bottom: 0,
+    width: '100%',
+    height: '100%',
+    pointerEvents: 'none',
+  },
+  ({
+    color = 'on.surface',
+    borderRadius: borderRadiusPx,
+    borderWidth: borderWidthPx,
+    borderWidthWhenFocused: borderWidthWhenFocusedPx,
+    borderStyle,
+    notchStart,
+    forceActive = false,
+  }) => {
+    const width = rem(notchStart - NOTCH_PADDING);
+    const borderRadius = rem(borderRadiusPx);
+    const borderWidth = rem(borderWidthPx);
+    const borderWidthWhenFocused = rem(borderWidthWhenFocusedPx);
+
+    function borderStyling(borderRadius: string, borderWidth: string) {
+      return {
+        ['&[data-notch-outline-item="start"]']: {
+          borderTopLeftRadius: borderRadius,
+          borderBottomLeftRadius: borderRadius,
+          borderWidth: borderWidth,
+          borderRightWidth: 0,
+          width,
+        },
+        ['&[data-notch-outline-item="middle"]']: {
+          borderWidth: 0,
+          borderBottomWidth: borderWidth,
+        },
+        ['&[data-notch-outline-item="end"]']: {
+          borderWidth: borderWidth,
+          borderLeft: 0,
+          borderTopRightRadius: borderRadius,
+          borderBottomRightRadius: borderRadius,
+          flex: 1,
+        },
+      };
+    }
+
+    const inactiveStyle = {
+      color: 'on.surface-variant',
+      borderColor: 'outline',
+      ...borderStyling(borderRadius, borderWidth),
+    };
+
+    const hoverStyle = {
+      borderColor: 'on.surface',
+      color: 'on.surface-variant',
+    };
+
+    const focusStyle = {
+      borderColor: color,
+      color: alpha(color, 0.87),
+      ...borderStyling(borderRadius, borderWidthWhenFocused),
+    };
+
+    const disabledStyle = {
+      borderColor: alpha('on.surface', 0.06),
+      color: alpha('on.surface', 0.38),
+    };
+
+    return css({
+      // notch items styles when not focused
+      ['[data-notch-outline-item]']: {
+        boxSizing: 'border-box',
+        borderStyle,
+        transition: `border-color .15s ${EASING_STANDARD}`,
+        ...(forceActive ? focusStyle : inactiveStyle),
+      },
+      // notch items styles when input is hovered
+      [makeSelector('hover:not([disabled]):not(:focus)')]: forceActive
+        ? focusStyle
+        : hoverStyle,
+      // notch items styles when input is focused
+      [makeSelector('focus:not([disabled])')]: focusStyle,
+      // notch items styles when input is disabled
+      [makeSelector('disabled')]: disabledStyle,
+    });
+  }
+);

package/src/Paper/Paper.story.tsx

@@ -1,50 +1,50 @@
-import { useState } from 'react';
-
-import { Paper } from './';
-import { Text } from '../Text';
-import { Box } from '../Box';
-
-export default {
-  title: 'components/Paper',
-};
-
-const Example = ({}) => {
-  const [elevation, setElevation] = useState(0);
-
-  return (
-    <Box
-      p="6"
-      bg={'surface'}
-      color={'on.primary-container'}
-      width="100%"
-      height="100vh"
-    >
-      <Paper
-        width="216px"
-        height="216px"
-        elevation={elevation}
-        darkThemeBackgroundOverlay={elevation}
-        mb="4"
-        sx={{ borderRadius: 'large' }}
-      >
-        <Text variant="headline-medium">Hello</Text>
-        <Text variant="body-medium">This is looking cool</Text>
-        Pretty cool.
-      </Paper>
-      <label>
-        <Text as="span" variant="body-medium">
-          Elevation: {elevation}
-        </Text>
-        <input
-          type="range"
-          min={0}
-          max={5}
-          value={elevation}
-          onChange={(e) => setElevation(Number(e.target.value))}
-        />
-      </label>
-    </Box>
-  );
-};
-
-export const Default = () => <Example />;
+import { useState } from 'react';
+
+import { Paper } from './';
+import { Text } from '../Text';
+import { Box } from '../Box';
+
+export default {
+  title: 'components/Paper',
+};
+
+const Example = ({}) => {
+  const [elevation, setElevation] = useState(0);
+
+  return (
+    <Box
+      p="6"
+      bg={'surface'}
+      color={'on.primary-container'}
+      width="100%"
+      height="100vh"
+    >
+      <Paper
+        width="216px"
+        height="216px"
+        elevation={elevation}
+        darkThemeBackgroundOverlay={elevation}
+        mb="4"
+        sx={{ borderRadius: 'large' }}
+      >
+        <Text variant="headline-medium">Hello</Text>
+        <Text variant="body-medium">This is looking cool</Text>
+        Pretty cool.
+      </Paper>
+      <label>
+        <Text as="span" variant="body-medium">
+          Elevation: {elevation}
+        </Text>
+        <input
+          type="range"
+          min={0}
+          max={5}
+          value={elevation}
+          onChange={(e) => setElevation(Number(e.target.value))}
+        />
+      </label>
+    </Box>
+  );
+};
+
+export const Default = () => <Example />;

package/src/Paper/Paper.tsx

@@ -1,67 +1,67 @@
-import type { ElementType, ReactNode } from 'react';
-import { forwardRef } from 'react';
-import { rem } from 'polished';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-import { useTheme } from '../theme';
-import { getBackgroundOverlay, getDarkThemeBackgroundOverlay } from '../color';
-
-export interface PaperProps extends BoxProps {
-  as?: ElementType<any>;
-  elevation?: number;
-  outlined?: boolean;
-  backgroundOverlay?: number | string;
-  darkThemeBackgroundOverlay?: number | string;
-  children?: ReactNode;
-}
-
-export const Paper = forwardRef<HTMLDivElement, PaperProps>(function Paper(
-  props,
-  forwardedRef
-) {
-  const {
-    outlined,
-    elevation = 0,
-    backgroundOverlay,
-    darkThemeBackgroundOverlay,
-    __css = {},
-    children,
-    ...otherProps
-  } = props;
-  const theme = useTheme();
-
-  return (
-    <Box
-      ref={forwardedRef}
-      __css={{
-        backgroundColor: 'surface',
-        boxShadow: String(elevation),
-        ':focus': {
-          outline: 'none',
-        },
-        ...(outlined
-          ? {
-              borderStyle: 'solid',
-              borderWidth: rem(1),
-              borderColor: 'surface-variant',
-            }
-          : {}),
-        ...(backgroundOverlay
-          ? getBackgroundOverlay(theme, backgroundOverlay, 'primary')
-          : {}),
-        ...(darkThemeBackgroundOverlay
-          ? getDarkThemeBackgroundOverlay(
-              theme,
-              darkThemeBackgroundOverlay,
-              'primary'
-            )
-          : {}),
-        ...__css,
-      }}
-      {...otherProps}
-    >
-      {children}
-    </Box>
-  );
-});
+import type { ElementType, ReactNode } from 'react';
+import { forwardRef } from 'react';
+import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { useTheme } from '../theme';
+import { getBackgroundOverlay, getDarkThemeBackgroundOverlay } from '../color';
+
+export interface PaperProps extends BoxProps {
+  as?: ElementType<any>;
+  elevation?: number;
+  outlined?: boolean;
+  backgroundOverlay?: number | string;
+  darkThemeBackgroundOverlay?: number | string;
+  children?: ReactNode;
+}
+
+export const Paper = forwardRef<HTMLDivElement, PaperProps>(function Paper(
+  props,
+  forwardedRef
+) {
+  const {
+    outlined,
+    elevation = 0,
+    backgroundOverlay,
+    darkThemeBackgroundOverlay,
+    __css = {},
+    children,
+    ...otherProps
+  } = props;
+  const theme = useTheme();
+
+  return (
+    <Box
+      ref={forwardedRef}
+      __css={{
+        backgroundColor: 'surface',
+        boxShadow: String(elevation),
+        ':focus': {
+          outline: 'none',
+        },
+        ...(outlined
+          ? {
+              borderStyle: 'solid',
+              borderWidth: rem(1),
+              borderColor: 'surface-variant',
+            }
+          : {}),
+        ...(backgroundOverlay
+          ? getBackgroundOverlay(theme, backgroundOverlay, 'primary')
+          : {}),
+        ...(darkThemeBackgroundOverlay
+          ? getDarkThemeBackgroundOverlay(
+              theme,
+              darkThemeBackgroundOverlay,
+              'primary'
+            )
+          : {}),
+        ...__css,
+      }}
+      {...otherProps}
+    >
+      {children}
+    </Box>
+  );
+});

package/src/Paper/index.ts

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

package/src/Popover/PopoverSurface.tsx

@@ -1,51 +1,51 @@
-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 { get } from 'styled-system';
-
-import type { PaperProps } from '../Paper';
-import { Paper } from '../Paper';
-import { useTheme } from '../theme';
-import { growAnimation } from '../Menu';
-import { EASING_STANDARD } from '../motion';
-
-const Modal = _Modal as FC<PopoverSurfaceProps & { ref?: Ref<HTMLDivElement> }>;
-
-export type PopoverSurfaceProps = ModalProps & PaperProps;
-
-export const PopoverSurface = forwardRef<HTMLDivElement, PopoverSurfaceProps>(
-  function PopoverSurface(props, forwardedRef) {
-    const { __css, ...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: 'extra-small',
-          overflow: 'auto',
-          pointerEvents: 'auto',
-          willChange: 'transform,opacity',
-          '[data-popper-placement="top"] &': {
-            transformOrigin: 'bottom center',
-          },
-          '[data-popper-placement="bottom"] &': {
-            transformOrigin: 'top center',
-          },
-          animation: `${growAnimation} .12s ${EASING_STANDARD}`,
-          ...__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 { get } from 'styled-system';
+
+import type { PaperProps } from '../Paper';
+import { Paper } from '../Paper';
+import { useTheme } from '../theme';
+import { growAnimation } from '../Menu';
+import { EASING_STANDARD } from '../motion';
+
+const Modal = _Modal as FC<PopoverSurfaceProps & { ref?: Ref<HTMLDivElement> }>;
+
+export type PopoverSurfaceProps = ModalProps & PaperProps;
+
+export const PopoverSurface = forwardRef<HTMLDivElement, PopoverSurfaceProps>(
+  function PopoverSurface(props, forwardedRef) {
+    const { __css, ...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: 'extra-small',
+          overflow: 'auto',
+          pointerEvents: 'auto',
+          willChange: 'transform,opacity',
+          '[data-popper-placement="top"] &': {
+            transformOrigin: 'bottom center',
+          },
+          '[data-popper-placement="bottom"] &': {
+            transformOrigin: 'top center',
+          },
+          animation: `${growAnimation} .12s ${EASING_STANDARD}`,
+          ...__css,
+        }}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/Popover/index.ts

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

package/src/ProgressSpinner/ProgressSpinner.story.tsx

@@ -1,35 +1,35 @@
-import { useEffect, useState } from 'react';
-
-import { ProgressSpinner } from './';
-import { Box } from '../Box';
-
-export default {
-  title: 'components/ProgressSpinner',
-};
-
-const Example = () => {
-  const steps = [0, 25, 50, 75, 100];
-  const [currentProgress, setCurrentProgress] = useState(0);
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setCurrentProgress((i) => i + 1);
-    }, 1000);
-    return () => clearInterval(interval);
-  });
-  return (
-    <Box m={3}>
-      <Box m={3}>
-        <ProgressSpinner />
-      </Box>
-      <Box m={3}>
-        <ProgressSpinner progress={25} />
-        <ProgressSpinner progress={50} />
-        <ProgressSpinner progress={75} />
-        <ProgressSpinner progress={100} />
-        <ProgressSpinner progress={steps[currentProgress % steps.length]} />
-      </Box>
-    </Box>
-  );
-};
-
-export const Default = () => <Example />;
+import { useEffect, useState } from 'react';
+
+import { ProgressSpinner } from './';
+import { Box } from '../Box';
+
+export default {
+  title: 'components/ProgressSpinner',
+};
+
+const Example = () => {
+  const steps = [0, 25, 50, 75, 100];
+  const [currentProgress, setCurrentProgress] = useState(0);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentProgress((i) => i + 1);
+    }, 1000);
+    return () => clearInterval(interval);
+  });
+  return (
+    <Box m={3}>
+      <Box m={3}>
+        <ProgressSpinner />
+      </Box>
+      <Box m={3}>
+        <ProgressSpinner progress={25} />
+        <ProgressSpinner progress={50} />
+        <ProgressSpinner progress={75} />
+        <ProgressSpinner progress={100} />
+        <ProgressSpinner progress={steps[currentProgress % steps.length]} />
+      </Box>
+    </Box>
+  );
+};
+
+export const Default = () => <Example />;