@basic-ui/material 1.0.0-alpha.41 → 1.0.0-alpha.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/material",
-  "version": "1.0.0-alpha.41",
+  "version": "1.0.0-alpha.43",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -62,5 +62,5 @@
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "tailwindcss": "^3.0.0"
   },
-  "gitHead": "68a29b9cb6a7f16642a8bab33488e3f52b711cce"
+  "gitHead": "3fed4eb9238027ed52b7ac89538023810aac260d"
 }

package/src/Alert/Alert.story.tsx

@@ -1,28 +1,28 @@
-import { Alert } from './';
-import { Link } from '../Link';
-// import './styles.css';
-
-export default {
-  title: 'Components/Alert',
-};
-
-export const Controlled = () => {
-  const color = ['primary', 'secondary', 'error'];
-  return (
-    <>
-      {color.map((c) => (
-        <Alert color={c} key={c} m={3}>
-          You can use{' '}
-          <Link
-            target="__blank"
-            rel="noopener noreferrer"
-            href="https://stripe.com/docs/connect/testing#account-numbers"
-          >
-            test accounts
-          </Link>{' '}
-          to simulate events and verify your integration.
-        </Alert>
-      ))}
-    </>
-  );
-};
+import { Alert } from './';
+import { Link } from '../Link';
+// import './styles.css';
+
+export default {
+  title: 'Components/Alert',
+};
+
+export const Controlled = () => {
+  const color = ['primary', 'secondary', 'error'];
+  return (
+    <>
+      {color.map((c) => (
+        <Alert color={c} key={c} m={3}>
+          You can use{' '}
+          <Link
+            target="__blank"
+            rel="noopener noreferrer"
+            href="https://stripe.com/docs/connect/testing#account-numbers"
+          >
+            test accounts
+          </Link>{' '}
+          to simulate events and verify your integration.
+        </Alert>
+      ))}
+    </>
+  );
+};

package/src/Alert/Alert.tsx

@@ -1,33 +1,33 @@
-import { rem } from 'polished';
-import { forwardRef } from 'react';
-
-import { alpha } from '../color';
-import type { TextProps } from '../Text';
-import { Text } from '../Text';
-
-export type AlertProps = TextProps & { color?: string };
-
-export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
-  props,
-  forwardedRef
-) {
-  const { as = 'div', color = 'secondary', __css, ...otherProps } = props;
-
-  return (
-    <Text
-      ref={forwardedRef}
-      as={as}
-      variant="body-medium"
-      __css={{
-        p: 3,
-        bg: alpha(color, 0.1),
-        borderRadius: 'extra-small',
-        borderColor: alpha(color, 0.2),
-        borderStyle: 'solid',
-        borderWidth: rem(1),
-        ...__css,
-      }}
-      {...otherProps}
-    />
-  );
-});
+import { rem } from 'polished';
+import { forwardRef } from 'react';
+
+import { alpha } from '../color';
+import type { TextProps } from '../Text';
+import { Text } from '../Text';
+
+export type AlertProps = TextProps & { color?: string };
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
+  props,
+  forwardedRef
+) {
+  const { as = 'div', color = 'secondary', __css, ...otherProps } = props;
+
+  return (
+    <Text
+      ref={forwardedRef}
+      as={as}
+      variant="body-medium"
+      __css={{
+        p: 3,
+        bg: alpha(color, 0.1),
+        borderRadius: 'extra-small',
+        borderColor: alpha(color, 0.2),
+        borderStyle: 'solid',
+        borderWidth: rem(1),
+        ...__css,
+      }}
+      {...otherProps}
+    />
+  );
+});

package/src/Alert/index.ts

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

package/src/AppBar/AppBar.story.tsx

@@ -1,69 +1,69 @@
-import { useState } from 'react';
-
-import type { AppBarProps } from './';
-import { AppBar, AppBarButton } from './';
-import { Box } from '../Box';
-import { LoremIpsum } from '../Text/LoremIpsum';
-import { Button } from '../Button';
-import { BaseLine } from '../BaseLine';
-
-export default {
-  title: 'Components/AppBar',
-};
-
-const MenuIcon = (props) => (
-  <svg width={24} height={24} {...props}>
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path
-      d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-const Example = ({ variant, size }) => {
-  const [elevation, setElevation] =
-    useState<AppBarProps['elevation']>('default');
-  const buttonColor = variant === 'default' ? 'on.surface' : `on.${variant}`;
-
-  return (
-    <>
-      <BaseLine />
-      <AppBar
-        variant={variant}
-        elevation={elevation}
-        size={size}
-        __css={{ position: 'fixed', top: 0 }}
-      >
-        <AppBarButton>
-          <MenuIcon title="open menu" />
-        </AppBarButton>
-        Hello
-        <Box marginLeft="auto">
-          <Button onClick={() => setElevation('default')} color={buttonColor}>
-            Default
-          </Button>
-          <Button onClick={() => setElevation('elevated')} color={buttonColor}>
-            Elevated
-          </Button>
-          <Button onClick={() => setElevation('dynamic')} color={buttonColor}>
-            Dynamic
-          </Button>
-        </Box>
-      </AppBar>
-      <Box marginTop={68}>
-        <LoremIpsum count={30} />
-      </Box>
-    </>
-  );
-};
-
-export const Default = () => <Example variant="default" size="default" />;
-export const Primary = () => <Example variant="primary" size="default" />;
-export const Secondary = () => <Example variant="secondary" size="default" />;
-
-export const DefaultDense = () => <Example variant="default" size="dense" />;
-export const PrimaryDense = () => <Example variant="primary" size="dense" />;
-export const SecondaryDense = () => (
-  <Example variant="secondary" size="dense" />
-);
+import { useState } from 'react';
+
+import type { AppBarProps } from './';
+import { AppBar, AppBarButton } from './';
+import { Box } from '../Box';
+import { LoremIpsum } from '../Text/LoremIpsum';
+import { Button } from '../Button';
+import { BaseLine } from '../BaseLine';
+
+export default {
+  title: 'Components/AppBar',
+};
+
+const MenuIcon = (props) => (
+  <svg width={24} height={24} {...props}>
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path
+      d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+const Example = ({ variant, size }) => {
+  const [elevation, setElevation] =
+    useState<AppBarProps['elevation']>('default');
+  const buttonColor = variant === 'default' ? 'on.surface' : `on.${variant}`;
+
+  return (
+    <>
+      <BaseLine />
+      <AppBar
+        variant={variant}
+        elevation={elevation}
+        size={size}
+        __css={{ position: 'fixed', top: 0 }}
+      >
+        <AppBarButton>
+          <MenuIcon title="open menu" />
+        </AppBarButton>
+        Hello
+        <Box marginLeft="auto">
+          <Button onClick={() => setElevation('default')} color={buttonColor}>
+            Default
+          </Button>
+          <Button onClick={() => setElevation('elevated')} color={buttonColor}>
+            Elevated
+          </Button>
+          <Button onClick={() => setElevation('dynamic')} color={buttonColor}>
+            Dynamic
+          </Button>
+        </Box>
+      </AppBar>
+      <Box marginTop={68}>
+        <LoremIpsum count={30} />
+      </Box>
+    </>
+  );
+};
+
+export const Default = () => <Example variant="default" size="default" />;
+export const Primary = () => <Example variant="primary" size="default" />;
+export const Secondary = () => <Example variant="secondary" size="default" />;
+
+export const DefaultDense = () => <Example variant="default" size="dense" />;
+export const PrimaryDense = () => <Example variant="primary" size="dense" />;
+export const SecondaryDense = () => (
+  <Example variant="secondary" size="dense" />
+);

package/src/AppBar/AppBar.tsx

@@ -1,85 +1,85 @@
-import type { ElementType } from 'react';
-import { forwardRef, useEffect, useState } from 'react';
-import { get } from '@styled-system/css';
-
-import { useTheme } from '../theme';
-import { AppBarProvider } from './context';
-import type { PaperProps } from '../Paper';
-import { Paper } from '../Paper';
-import { EASING_STANDARD } from '../motion';
-
-export interface AppBarProps extends Omit<PaperProps, 'color' | 'elevation'> {
-  as?: ElementType<any>;
-  elevation?: 'default' | 'elevated' | 'dynamic';
-  variant?: 'default' | 'primary' | 'secondary' | 'transparent';
-  size?: 'default' | 'dense';
-}
-
-export const AppBar = forwardRef<HTMLDivElement, AppBarProps>(function AppBar(
-  props,
-  forwardedRef
-) {
-  const {
-    elevation: elevationProp = 'default',
-    variant: variantProp = 'default',
-    size = 'default',
-    __css = {},
-    ...otherProps
-  } = props;
-  const [elevation, setElevation] = useState(elevationProp);
-  const theme = useTheme();
-
-  useEffect(() => {
-    const onScroll = function () {
-      if (window.scrollY > 10) {
-        setElevation('elevated');
-      } else {
-        setElevation('default');
-      }
-    };
-
-    if (elevationProp === 'dynamic') {
-      window.addEventListener('scroll', onScroll);
-
-      return () => {
-        window.removeEventListener('scroll', onScroll);
-      };
-    } else {
-      setElevation(elevationProp);
-    }
-
-    return;
-  }, [elevationProp]);
-
-  return (
-    <AppBarProvider value={{ variant: variantProp, size }}>
-      <Paper
-        ref={forwardedRef}
-        theme={theme}
-        variant="square"
-        backgroundOverlay={
-          elevation === 'elevated' && variantProp === 'default'
-            ? get(theme, `appbar.elevations.${elevation}.boxShadow`, 2)
-            : 0
-        }
-        color={
-          variantProp === 'default' || variantProp === 'transparent'
-            ? 'on.surface'
-            : `on.${variantProp}`
-        }
-        __css={{
-          boxSizing: 'border-box',
-          display: 'inline-flex',
-          alignItems: 'center',
-          width: '100%',
-          overflow: 'hidden',
-          transition: `box-shadow .28s ${EASING_STANDARD}`,
-          ...get(theme, `appbar.sizes.${size}`),
-          ...get(theme, `appbar.variants.${variantProp}`),
-          ...__css,
-        }}
-        {...otherProps}
-      />
-    </AppBarProvider>
-  );
-});
+import type { ElementType } from 'react';
+import { forwardRef, useEffect, useState } from 'react';
+import { get } from '@styled-system/css';
+
+import { useTheme } from '../theme';
+import { AppBarProvider } from './context';
+import type { PaperProps } from '../Paper';
+import { Paper } from '../Paper';
+import { EASING_STANDARD } from '../motion';
+
+export interface AppBarProps extends Omit<PaperProps, 'color' | 'elevation'> {
+  as?: ElementType<any>;
+  elevation?: 'default' | 'elevated' | 'dynamic';
+  variant?: 'default' | 'primary' | 'secondary' | 'transparent';
+  size?: 'default' | 'dense';
+}
+
+export const AppBar = forwardRef<HTMLDivElement, AppBarProps>(function AppBar(
+  props,
+  forwardedRef
+) {
+  const {
+    elevation: elevationProp = 'default',
+    variant: variantProp = 'default',
+    size = 'default',
+    __css = {},
+    ...otherProps
+  } = props;
+  const [elevation, setElevation] = useState(elevationProp);
+  const theme = useTheme();
+
+  useEffect(() => {
+    const onScroll = function () {
+      if (window.scrollY > 10) {
+        setElevation('elevated');
+      } else {
+        setElevation('default');
+      }
+    };
+
+    if (elevationProp === 'dynamic') {
+      window.addEventListener('scroll', onScroll);
+
+      return () => {
+        window.removeEventListener('scroll', onScroll);
+      };
+    } else {
+      setElevation(elevationProp);
+    }
+
+    return;
+  }, [elevationProp]);
+
+  return (
+    <AppBarProvider value={{ variant: variantProp, size }}>
+      <Paper
+        ref={forwardedRef}
+        theme={theme}
+        variant="square"
+        backgroundOverlay={
+          elevation === 'elevated' && variantProp === 'default'
+            ? get(theme, `appbar.elevations.${elevation}.boxShadow`, 2)
+            : 0
+        }
+        color={
+          variantProp === 'default' || variantProp === 'transparent'
+            ? 'on.surface'
+            : `on.${variantProp}`
+        }
+        __css={{
+          boxSizing: 'border-box',
+          display: 'inline-flex',
+          alignItems: 'center',
+          width: '100%',
+          overflow: 'hidden',
+          transition: `box-shadow .28s ${EASING_STANDARD}`,
+          ...get(theme, `appbar.sizes.${size}`),
+          ...get(theme, `appbar.variants.${variantProp}`),
+          ...__css,
+        }}
+        {...otherProps}
+      />
+    </AppBarProvider>
+  );
+});

package/src/AppBar/AppBarButton.tsx

@@ -1,25 +1,25 @@
-import { forwardRef } from 'react';
-
-import type { ButtonProps } from '../Button';
-import { Button } from '../Button';
-import { useAppBarContext } from './context';
-
-export type AppBarButtonProps = ButtonProps;
-
-export const AppBarButton = forwardRef<HTMLButtonElement, AppBarButtonProps>(
-  function AppBarButton(props, forwardedRef) {
-    const { variant = 'icon', ...otherProps } = props;
-    const { variant: appbarVariant } = useAppBarContext();
-
-    return (
-      <Button
-        ref={forwardedRef}
-        variant={variant}
-        color={
-          appbarVariant === 'default' ? 'on.surface' : `on.${appbarVariant}`
-        }
-        {...otherProps}
-      />
-    );
-  }
-);
+import { forwardRef } from 'react';
+
+import type { ButtonProps } from '../Button';
+import { Button } from '../Button';
+import { useAppBarContext } from './context';
+
+export type AppBarButtonProps = ButtonProps;
+
+export const AppBarButton = forwardRef<HTMLButtonElement, AppBarButtonProps>(
+  function AppBarButton(props, forwardedRef) {
+    const { variant = 'icon', ...otherProps } = props;
+    const { variant: appbarVariant } = useAppBarContext();
+
+    return (
+      <Button
+        ref={forwardedRef}
+        variant={variant}
+        color={
+          appbarVariant === 'default' ? 'on.surface' : `on.${appbarVariant}`
+        }
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/AppBar/context.ts

@@ -1,13 +1,13 @@
-import { createContext, useContext } from 'react';
-
-import type { AppBarProps } from './AppBar';
-
-// AppBar Component
-export type AppBarContextProps = Pick<AppBarProps, 'variant' | 'size'>;
-
-const appbarContext = createContext<AppBarContextProps>({
-  variant: 'default',
-  size: 'default',
-});
-export const { Provider: AppBarProvider } = appbarContext;
-export const useAppBarContext = () => useContext(appbarContext);
+import { createContext, useContext } from 'react';
+
+import type { AppBarProps } from './AppBar';
+
+// AppBar Component
+export type AppBarContextProps = Pick<AppBarProps, 'variant' | 'size'>;
+
+const appbarContext = createContext<AppBarContextProps>({
+  variant: 'default',
+  size: 'default',
+});
+export const { Provider: AppBarProvider } = appbarContext;
+export const useAppBarContext = () => useContext(appbarContext);

package/src/AppBar/index.ts

@@ -1,3 +1,3 @@
-export * from './AppBar';
-export * from './AppBarButton';
-export * from './context';
+export * from './AppBar';
+export * from './AppBarButton';
+export * from './context';