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

package/src/AppBar/AppBar.tsx

@@ -1,84 +1,85 @@
-import { forwardRef, useEffect, useState } from 'react';
-import * as React 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';
-
-export interface AppBarProps extends Omit<PaperProps, 'color' | 'elevation'> {
-  as?: React.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 cubic-bezier(.4,0,.2,1)',
-          ...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';

package/src/Badge/Badge.story.tsx

@@ -0,0 +1,68 @@
+import { rem } from 'polished';
+import { useState } from 'react';
+
+import { Box } from '../Box';
+import { NavRailIndicator, NavRailItem, NavRailLabel } from '../NavRail';
+import { KitchenIcon, ListIcon, MenuIcon } from '../NavRail/icons/test-icons';
+import { Badge } from './';
+
+export default { title: 'components/Badge' };
+
+const Example = () => {
+  const [selectedItem, setSelectedItem] = useState('0');
+
+  return (
+    <Box
+      bg="surface"
+      width="80px"
+      position="fixed"
+      top="0"
+      bottom="0"
+      left="0"
+      py={rem(80)}
+      display="flex"
+      flexDirection="column"
+      px={rem(12)}
+    >
+      <NavRailItem
+        selected={selectedItem === '0'}
+        onClick={() => setSelectedItem('0')}
+        position="relative"
+      >
+        <NavRailIndicator>
+          <MenuIcon />
+        </NavRailIndicator>
+        <NavRailLabel>Menu</NavRailLabel>
+        <Badge position="absolute" top="-4px" right="-4px" size="small" />
+      </NavRailItem>
+      <NavRailItem
+        selected={selectedItem === '1'}
+        onClick={() => setSelectedItem('1')}
+        position="relative"
+      >
+        <NavRailIndicator>
+          <KitchenIcon />
+        </NavRailIndicator>
+        <NavRailLabel>Kitchen</NavRailLabel>
+        <Badge position="absolute" top="-4px" right="-4px">
+          9
+        </Badge>
+      </NavRailItem>
+      <NavRailItem
+        selected={selectedItem === '2'}
+        onClick={() => setSelectedItem('2')}
+        position="relative"
+      >
+        <NavRailIndicator>
+          <ListIcon />
+        </NavRailIndicator>
+        <NavRailLabel>Orders</NavRailLabel>
+        <Badge position="absolute" top="-4px" right="-4px">
+          999+
+        </Badge>
+      </NavRailItem>
+    </Box>
+  );
+};
+
+export const Controlled = () => <Example />;

package/src/Badge/Badge.tsx

@@ -1,17 +1,47 @@
-import { forwardRef } from 'react';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-
-export interface BadgeProps extends BoxProps {
-  placement: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
-}
-
-export const Badge = forwardRef<HTMLDivElement, BadgeProps>(function Badge(
-  props,
-  forwardedRef
-) {
-  const { ...otherProps } = props;
-
-  return <Box ref={forwardedRef} {...otherProps} />;
-});
+import { rem } from 'polished';
+import { forwardRef } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+
+export interface BadgeProps extends BoxProps {
+  size?: 'small' | 'large';
+}
+
+export const Badge = forwardRef<HTMLDivElement, BadgeProps>(function Badge(
+  props,
+  forwardedRef
+) {
+  const { size = 'large', __css, ...otherProps } = props;
+
+  return (
+    <Box
+      ref={forwardedRef}
+      __css={{
+        variant: 'text.label-small',
+        bg: 'error',
+        color: 'on.error',
+        borderRadius: 'full',
+        ...(size === 'small'
+          ? {
+              maxWidth: rem(6),
+              maxHeight: rem(6),
+              minWidth: rem(6),
+              minHeight: rem(6),
+            }
+          : {
+              px: 1,
+              maxHeight: rem(16),
+              minWidth: rem(16),
+              minHeight: rem(16),
+            }),
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontVariantNumeric: 'tabular-nums',
+        ...__css,
+      }}
+      {...otherProps}
+    />
+  );
+});

package/src/Badge/index.ts

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

package/src/BaseLine/BaseLine.tsx

@@ -1,100 +1,100 @@
-import { Global } from '@emotion/react';
-import { css, get } from '@styled-system/css';
-
-import { useTheme } from '../theme';
-
-export const BaseLine = () => {
-  const theme = useTheme();
-  return (
-    <>
-      <Global styles={css(get(theme, 'styles.root', {}))} />
-      {/* normalize.css */}
-      <Global
-        styles={{
-          html: { lineHeight: '1.15', WebkitTextSizeAdjust: '100%' },
-          body: {
-            margin: '0',
-          },
-          main: { display: 'block' },
-          h1: { fontSize: '2em', margin: '0.67em 0' },
-          hr: { boxSizing: 'content-box', height: '0', overflow: 'visible' },
-          pre: { fontFamily: 'monospace, monospace', fontSize: '1em' },
-          a: { backgroundColor: 'transparent' },
-          'abbr[title]': {
-            borderBottom: 'none',
-            textDecoration: ['underline', 'underline dotted'],
-          },
-          'b,strong': { fontWeight: 'bolder' },
-          'code,kbd,samp': {
-            fontFamily: 'monospace, monospace',
-            fontSize: '1em',
-          },
-          small: { fontSize: '80%' },
-          'sub,sup': {
-            fontSize: '75%',
-            lineHeight: '0',
-            position: 'relative',
-            verticalAlign: 'baseline',
-          },
-          sub: { bottom: '-0.25em' },
-          sup: { top: '-0.5em' },
-          img: { borderStyle: 'none' },
-          'button,input,optgroup,select,textarea': {
-            fontFamily: 'inherit',
-            fontSize: '100%',
-            lineHeight: '1.15',
-            margin: '0',
-          },
-          'button,input': { overflow: 'visible' },
-          'button,select': { textTransform: 'none' },
-          'button,[type="button"],[type="reset"],[type="submit"]': {
-            WebkitAppearance: 'button',
-          },
-          'button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner':
-            {
-              borderStyle: 'none',
-              padding: '0',
-            },
-          'button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring':
-            {
-              outline: '1px dotted ButtonText',
-            },
-          fieldset: { padding: '0.35em 0.75em 0.625em' },
-          legend: {
-            boxSizing: 'border-box',
-            color: 'inherit',
-            display: 'table',
-            maxWidth: '100%',
-            padding: '0',
-            whiteSpace: 'normal',
-          },
-          progress: { verticalAlign: 'baseline' },
-          textarea: { overflow: 'auto' },
-          '[type="checkbox"],[type="radio"]': {
-            boxSizing: 'border-box',
-            padding: '0',
-          },
-          '[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button':
-            {
-              height: 'auto',
-            },
-          '[type="search"]': {
-            WebkitAppearance: 'textfield',
-            outlineOffset: '-2px',
-          },
-          '[type="search"]::-webkit-search-decoration': {
-            WebkitAppearance: 'none',
-          },
-          '::-webkit-file-upload-button': {
-            WebkitAppearance: 'button',
-            font: 'inherit',
-          },
-          details: { display: 'block' },
-          summary: { display: 'list-item' },
-          template: { display: 'none' },
-          '[hidden]': { display: 'none' },
-        }}
-      />
-    </>
-  );
-};
+import { Global } from '@emotion/react';
+import { css, get } from '@styled-system/css';
+
+import { useTheme } from '../theme';
+
+export const BaseLine = () => {
+  const theme = useTheme();
+  return (
+    <>
+      <Global styles={css(get(theme, 'styles.root', {}))} />
+      {/* normalize.css */}
+      <Global
+        styles={{
+          html: { lineHeight: '1.15', WebkitTextSizeAdjust: '100%' },
+          body: {
+            margin: '0',
+          },
+          main: { display: 'block' },
+          h1: { fontSize: '2em', margin: '0.67em 0' },
+          hr: { boxSizing: 'content-box', height: '0', overflow: 'visible' },
+          pre: { fontFamily: 'monospace, monospace', fontSize: '1em' },
+          a: { backgroundColor: 'transparent' },
+          'abbr[title]': {
+            borderBottom: 'none',
+            textDecoration: ['underline', 'underline dotted'],
+          },
+          'b,strong': { fontWeight: 'bolder' },
+          'code,kbd,samp': {
+            fontFamily: 'monospace, monospace',
+            fontSize: '1em',
+          },
+          small: { fontSize: '80%' },
+          'sub,sup': {
+            fontSize: '75%',
+            lineHeight: '0',
+            position: 'relative',
+            verticalAlign: 'baseline',
+          },
+          sub: { bottom: '-0.25em' },
+          sup: { top: '-0.5em' },
+          img: { borderStyle: 'none' },
+          'button,input,optgroup,select,textarea': {
+            fontFamily: 'inherit',
+            fontSize: '100%',
+            lineHeight: '1.15',
+            margin: '0',
+          },
+          'button,input': { overflow: 'visible' },
+          'button,select': { textTransform: 'none' },
+          'button,[type="button"],[type="reset"],[type="submit"]': {
+            WebkitAppearance: 'button',
+          },
+          'button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner':
+            {
+              borderStyle: 'none',
+              padding: '0',
+            },
+          'button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring':
+            {
+              outline: '1px dotted ButtonText',
+            },
+          fieldset: { padding: '0.35em 0.75em 0.625em' },
+          legend: {
+            boxSizing: 'border-box',
+            color: 'inherit',
+            display: 'table',
+            maxWidth: '100%',
+            padding: '0',
+            whiteSpace: 'normal',
+          },
+          progress: { verticalAlign: 'baseline' },
+          textarea: { overflow: 'auto' },
+          '[type="checkbox"],[type="radio"]': {
+            boxSizing: 'border-box',
+            padding: '0',
+          },
+          '[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button':
+            {
+              height: 'auto',
+            },
+          '[type="search"]': {
+            WebkitAppearance: 'textfield',
+            outlineOffset: '-2px',
+          },
+          '[type="search"]::-webkit-search-decoration': {
+            WebkitAppearance: 'none',
+          },
+          '::-webkit-file-upload-button': {
+            WebkitAppearance: 'button',
+            font: 'inherit',
+          },
+          details: { display: 'block' },
+          summary: { display: 'list-item' },
+          template: { display: 'none' },
+          '[hidden]': { display: 'none' },
+        }}
+      />
+    </>
+  );
+};

package/src/BaseLine/index.ts

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