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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/material",
-  "version": "1.0.0-alpha.51",
+  "version": "1.0.0-alpha.54",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -20,18 +20,18 @@
     "build:dts": "run -T tsc -p ./tsconfig-build.json --isolatedModules false --declaration --emitDeclarationOnly",
     "build:cjs": "run -T cross-env NODE_ENV=production rollup -c ../../rollup.config.js",
     "build:esm": "run -T cross-env NODE_ENV=production BABEL_ENV=esm run -T babel --config-file ../../babel.config.js ./src --extensions \".ts,.tsx,.js,.jsx\" --source-maps --out-dir ./build/esm --ignore \"**/*.story.tsx,**/*.story.ts,**/*.test.tsx,**/*.test.ts\"",
-    "build-storybook": "run -T sb build -c ./scripts/storybook -o .out",
+    "build-storybook": "run -T storybook build -c ./scripts/storybook -o .out",
     "lint": "run -T eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
     "format": "run -T prettier --write '**/*.js'",
-    "start": "run -T sb dev -p 9001 -c ./scripts/storybook",
+    "start": "run -T storybook dev -p 11002 --no-open -c ./scripts/storybook",
     "serve": "run -T http-server .out",
     "typecheck": "run -T tsc --noEmit -p ./tsconfig.json",
     "test": "run -T jest --config ../../jest.config.js",
     "test:watch": "yarn test --watch"
   },
   "dependencies": {
-    "@basic-ui/core": "^0.0.54",
-    "@basic-ui/dynamic-theme": "^0.0.11",
+    "@basic-ui/core": "^0.0.56",
+    "@basic-ui/dynamic-theme": "^0.0.16",
     "@styled-system/should-forward-prop": "5.1.5",
     "@types/styled-system": "^5.1.10",
     "@types/styled-system__css": "^5.0.14",
@@ -39,9 +39,9 @@
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
-    "@basic-ui/color-picker": "^0.0.12",
-    "@emotion/react": "11.9.0",
-    "@emotion/styled": "11.8.1",
+    "@basic-ui/color-picker": "^0.0.14",
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.1",
     "@material/material-color-utilities": "0.1.1",
     "autoprefixer": "^10.4.14",
     "polished": "^4.2.2",
@@ -58,8 +58,9 @@
     "autoprefixer": "^10.0.0",
     "polished": ">=3.0.0",
     "postcss": "^8.0.0",
-    "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0",
+    "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "tailwindcss": "^3.0.0"
-  }
+  },
+  "gitHead": "212b1b1d75d5b054ae08cbc540321a8e0d5bc8cd"
 }

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: any) => (
+  <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 }: any) => {
+  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';

package/src/Badge/Badge.story.tsx

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