@basic-ui/material 1.0.0-alpha.44 → 1.0.0-alpha.45

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 />;

package/src/Badge/Badge.tsx

@@ -1,47 +1,47 @@
-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}
-    />
-  );
-});
+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';

package/src/BottomSheet/BottomSheet.story.tsx

@@ -1,35 +1,35 @@
-import { useState } from 'react';
-
-import { BottomSheet } from './';
-import { Button } from '../Button';
-import { LoremIpsum } from '../Text/LoremIpsum';
-import { Box } from '../Box';
-import { Switch } from '../Switch';
-
-export default {
-  title: 'components/BottomSheet',
-};
-
-export const Default = () => {
-  const [open, setOpen] = useState(false);
-  const [long, setLong] = useState(false);
-
-  return (
-    <Box bg="surface">
-      <Button id="open-button" onClick={() => setOpen(true)}>
-        Open Bottom Sheet
-      </Button>
-      <Switch checked={long} onChange={(e) => setLong(e.target.checked)}>
-        Long content
-      </Switch>
-      <LoremIpsum count={20} />
-      <Button id="open-button-2" onClick={() => setOpen(true)}>
-        Open Bottom Sheet
-      </Button>
-      <BottomSheet open={open} onClose={() => setOpen(false)}>
-        <LoremIpsum count={long ? 10 : 1} />
-        <Button onClick={() => setOpen(false)}>Close</Button>
-      </BottomSheet>
-    </Box>
-  );
-};
+import { useState } from 'react';
+
+import { BottomSheet } from './';
+import { Button } from '../Button';
+import { LoremIpsum } from '../Text/LoremIpsum';
+import { Box } from '../Box';
+import { Switch } from '../Switch';
+
+export default {
+  title: 'components/BottomSheet',
+};
+
+export const Default = () => {
+  const [open, setOpen] = useState(false);
+  const [long, setLong] = useState(false);
+
+  return (
+    <Box bg="surface">
+      <Button id="open-button" onClick={() => setOpen(true)}>
+        Open Bottom Sheet
+      </Button>
+      <Switch checked={long} onChange={(e) => setLong(e.target.checked)}>
+        Long content
+      </Switch>
+      <LoremIpsum count={20} />
+      <Button id="open-button-2" onClick={() => setOpen(true)}>
+        Open Bottom Sheet
+      </Button>
+      <BottomSheet open={open} onClose={() => setOpen(false)}>
+        <LoremIpsum count={long ? 10 : 1} />
+        <Button onClick={() => setOpen(false)}>Close</Button>
+      </BottomSheet>
+    </Box>
+  );
+};

package/src/BottomSheet/BottomSheet.tsx

@@ -1,39 +1,39 @@
-import { forwardRef } from 'react';
-import { Portal } from '@basic-ui/core';
-
-import { Scrim } from '../Dialog/Scrim';
-import { DialogContainer } from '../Dialog/DialogContainer';
-import type { DialogSurfaceProps } from '../Dialog/DialogSurface';
-import { useDialogAnimation } from '../Dialog/useDialogAnimation';
-import { DialogBackdrop } from '../Dialog/DialogBackdrop';
-import { BottomSheetSurface } from './BottomSheetSurface';
-
-export interface BottomSheetProps extends DialogSurfaceProps {
-  open?: boolean;
-  onClose: () => void;
-}
-
-export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
-  function BottomSheet(props, forwardedRef) {
-    const { open: openProp = false, onClose, ...otherProps } = props;
-    const { containerStyle, scrimStyle, open } = useDialogAnimation({
-      open: openProp,
-      mode: 'slide',
-    });
-
-    if (!open) {
-      return null;
-    }
-
-    return (
-      <Portal>
-        <DialogBackdrop onClose={onClose} open={openProp}>
-          <Scrim __css={scrimStyle} />
-          <DialogContainer __css={containerStyle}>
-            <BottomSheetSurface ref={forwardedRef} {...otherProps} />
-          </DialogContainer>
-        </DialogBackdrop>
-      </Portal>
-    );
-  }
-);
+import { forwardRef } from 'react';
+import { Portal } from '@basic-ui/core';
+
+import { Scrim } from '../Dialog/Scrim';
+import { DialogContainer } from '../Dialog/DialogContainer';
+import type { DialogSurfaceProps } from '../Dialog/DialogSurface';
+import { useDialogAnimation } from '../Dialog/useDialogAnimation';
+import { DialogBackdrop } from '../Dialog/DialogBackdrop';
+import { BottomSheetSurface } from './BottomSheetSurface';
+
+export interface BottomSheetProps extends DialogSurfaceProps {
+  open?: boolean;
+  onClose: () => void;
+}
+
+export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
+  function BottomSheet(props, forwardedRef) {
+    const { open: openProp = false, onClose, ...otherProps } = props;
+    const { containerStyle, scrimStyle, open } = useDialogAnimation({
+      open: openProp,
+      mode: 'slide',
+    });
+
+    if (!open) {
+      return null;
+    }
+
+    return (
+      <Portal>
+        <DialogBackdrop onClose={onClose} open={openProp}>
+          <Scrim __css={scrimStyle} />
+          <DialogContainer __css={containerStyle}>
+            <BottomSheetSurface ref={forwardedRef} {...otherProps} />
+          </DialogContainer>
+        </DialogBackdrop>
+      </Portal>
+    );
+  }
+);