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

package/src/Link/Link.tsx

@@ -1,65 +1,65 @@
-import type { AnchorHTMLAttributes } from 'react';
-import { forwardRef } from 'react';
-import { rem } from 'polished';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-import { alpha } from '../color';
-
-export interface LinkProps
-  extends BoxProps<HTMLAnchorElement, AnchorHTMLAttributes<HTMLAnchorElement>> {
-  color?: string;
-  // ReachRouter Props
-  to?: string;
-  replace?: boolean;
-  state?: any;
-}
-
-export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
-  props,
-  forwardedRef
-) {
-  const { as: asProp = 'a', color = 'primary', __css, ...otherProps } = props;
-
-  return (
-    <Box
-      ref={forwardedRef as any}
-      as={asProp}
-      __css={{
-        fontFamily: 'inherit',
-        fontSize: 'inherit',
-        fontWeight: 'inherit',
-        lineHeight: 'inherit',
-        letterSpacing: 'inherit',
-        color,
-        textDecoration: 'underline',
-        background: 'none',
-        border: 'none',
-        borderRadius: 'extra-small',
-        'button&': {
-          cursor: 'pointer',
-        },
-        '&:hover,&:focus': {
-          textDecoration: 'none',
-        },
-        '&:focus,&:active': {
-          outlineWidth: rem(1),
-          outlineStyle: 'solid',
-          outlineColor: alpha(color, 0.87),
-        },
-        '&:active': {
-          bg: alpha(color, 0.16),
-        },
-        '&[aria-disabled="true"],&:disabled': {
-          color: 'on.surface',
-          opacity: 0.38,
-          cursor: 'default',
-          pointerEvents: 'none',
-        },
-        WebkitTapHighlightColor: 'transparent',
-        ...__css,
-      }}
-      {...otherProps}
-    />
-  );
-});
+import type { AnchorHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { alpha } from '../color';
+
+export interface LinkProps
+  extends BoxProps<HTMLAnchorElement, AnchorHTMLAttributes<HTMLAnchorElement>> {
+  color?: string;
+  // ReachRouter Props
+  to?: string;
+  replace?: boolean;
+  state?: any;
+}
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
+  props,
+  forwardedRef
+) {
+  const { as: asProp = 'a', color = 'primary', __css, ...otherProps } = props;
+
+  return (
+    <Box
+      ref={forwardedRef as any}
+      as={asProp}
+      __css={{
+        fontFamily: 'inherit',
+        fontSize: 'inherit',
+        fontWeight: 'inherit',
+        lineHeight: 'inherit',
+        letterSpacing: 'inherit',
+        color,
+        textDecoration: 'underline',
+        background: 'none',
+        border: 'none',
+        borderRadius: 'extra-small',
+        'button&': {
+          cursor: 'pointer',
+        },
+        '&:hover,&:focus': {
+          textDecoration: 'none',
+        },
+        '&:focus,&:active': {
+          outlineWidth: rem(1),
+          outlineStyle: 'solid',
+          outlineColor: alpha(color, 0.87),
+        },
+        '&:active': {
+          bg: alpha(color, 0.16),
+        },
+        '&[aria-disabled="true"],&:disabled': {
+          color: 'on.surface',
+          opacity: 0.38,
+          cursor: 'default',
+          pointerEvents: 'none',
+        },
+        WebkitTapHighlightColor: 'transparent',
+        ...__css,
+      }}
+      {...otherProps}
+    />
+  );
+});

package/src/Link/index.ts

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

package/src/List/List.tsx

@@ -1,46 +1,46 @@
-import type { ElementType, ReactNode } from 'react';
-import { forwardRef } from 'react';
-
-import type { PaperProps } from '../Paper';
-import { Paper } from '../Paper';
-
-export interface ListProps extends PaperProps {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  children?: ReactNode;
-}
-
-export const List = forwardRef<HTMLDivElement, ListProps>(function List(
-  props,
-  forwardedRef
-) {
-  const {
-    as = 'div',
-    innerAs,
-    elevation = 0,
-    py = 2,
-    px = 0,
-    outlined = true,
-    variant = 'square',
-    __css = {},
-    ...otherProps
-  } = props;
-
-  return (
-    <Paper
-      as={innerAs || as}
-      ref={forwardedRef}
-      py={py}
-      px={px}
-      elevation={elevation}
-      darkThemeBackgroundOverlay={elevation}
-      variant={variant}
-      outlined={outlined}
-      __css={{
-        width: '100%',
-        ...__css,
-      }}
-      {...otherProps}
-    />
-  );
-});
+import type { ElementType, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+import type { PaperProps } from '../Paper';
+import { Paper } from '../Paper';
+
+export interface ListProps extends PaperProps {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+}
+
+export const List = forwardRef<HTMLDivElement, ListProps>(function List(
+  props,
+  forwardedRef
+) {
+  const {
+    as = 'div',
+    innerAs,
+    elevation = 0,
+    py = 2,
+    px = 0,
+    outlined = true,
+    variant = 'square',
+    __css = {},
+    ...otherProps
+  } = props;
+
+  return (
+    <Paper
+      as={innerAs || as}
+      ref={forwardedRef}
+      py={py}
+      px={px}
+      elevation={elevation}
+      darkThemeBackgroundOverlay={elevation}
+      variant={variant}
+      outlined={outlined}
+      __css={{
+        width: '100%',
+        ...__css,
+      }}
+      {...otherProps}
+    />
+  );
+});

package/src/List/index.ts

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

package/src/ListItem/ListItem.story.tsx

@@ -1,43 +1,43 @@
-import { useState } from 'react';
-
-import { ListItem, ListItemText } from './';
-import { List } from '../List';
-// import './styles.css';
-
-export default {
-  title: 'components/ListItem',
-};
-
-const Example = ({ selectable = false }) => {
-  const [selectedItem, setSelectedItem] = useState(selectable ? '0' : '-1');
-
-  return (
-    <List>
-      <ListItem
-        selected={selectedItem === '0'}
-        onClick={() => {
-          selectable && setSelectedItem('0');
-        }}
-      >
-        <ListItemText text="Line item" />
-      </ListItem>
-      <ListItem
-        selected={selectedItem === '1'}
-        onClick={() => {
-          selectable && setSelectedItem('1');
-        }}
-      >
-        <ListItemText text="Line item" secondaryText="Secondary Text" />
-      </ListItem>
-      <ListItem disabled>
-        <ListItemText
-          text="Disabled line item"
-          secondaryText="Disabled secondary Text"
-        />
-      </ListItem>
-    </List>
-  );
-};
-
-export const Normal = () => <Example />;
-export const Selectable = () => <Example selectable={true} />;
+import { useState } from 'react';
+
+import { ListItem, ListItemText } from './';
+import { List } from '../List';
+// import './styles.css';
+
+export default {
+  title: 'components/ListItem',
+};
+
+const Example = ({ selectable = false }) => {
+  const [selectedItem, setSelectedItem] = useState(selectable ? '0' : '-1');
+
+  return (
+    <List>
+      <ListItem
+        selected={selectedItem === '0'}
+        onClick={() => {
+          selectable && setSelectedItem('0');
+        }}
+      >
+        <ListItemText text="Line item" />
+      </ListItem>
+      <ListItem
+        selected={selectedItem === '1'}
+        onClick={() => {
+          selectable && setSelectedItem('1');
+        }}
+      >
+        <ListItemText text="Line item" secondaryText="Secondary Text" />
+      </ListItem>
+      <ListItem disabled>
+        <ListItemText
+          text="Disabled line item"
+          secondaryText="Disabled secondary Text"
+        />
+      </ListItem>
+    </List>
+  );
+};
+
+export const Normal = () => <Example />;
+export const Selectable = () => <Example selectable={true} />;

package/src/ListItem/ListItem.tsx

@@ -1,104 +1,104 @@
-import type { ElementType, ReactNode } from 'react';
-import { forwardRef } from 'react';
-import { rem } from 'polished';
-import type { SystemStyleObject } from '@styled-system/css';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-import { useTheme } from '../theme';
-import { alpha } from '../color';
-
-export interface ListItemProps extends BoxProps {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  children?: ReactNode;
-  disabled?: boolean;
-  selected?: boolean;
-  color?: string;
-  rippleColor?: string;
-}
-
-export const listItemStyle = (
-  color: string,
-  hoverOpacity = 0.16,
-  focusOpacity = 0.24
-): SystemStyleObject => ({
-  variant: 'text.label-large',
-  px: 3,
-  py: rem(12),
-  transition: 'background-color 75ms linear',
-  backgroundColor: 'transparent',
-  color: alpha('on.surface', 0.87),
-  cursor: 'pointer',
-  display: 'flex',
-  alignItems: 'center',
-  textDecoration: 'none',
-  ':hover': {
-    backgroundColor: alpha('on.surface', hoverOpacity),
-  },
-  ':focus': {
-    outline: 'none',
-    backgroundColor: alpha('on.surface', focusOpacity),
-  },
-  ':active': {
-    backgroundColor: alpha('on.surface', focusOpacity),
-  },
-  '&[aria-selected="true"]': {
-    backgroundColor: alpha(color, 0.08),
-    color,
-    ':hover': {
-      backgroundColor: alpha(color, hoverOpacity),
-    },
-    ':focus': {
-      outline: 'none',
-      backgroundColor: alpha(color, focusOpacity),
-    },
-    ':active': {
-      backgroundColor: alpha(color, focusOpacity),
-    },
-  },
-  '&[data-disabled]': {
-    color: alpha('on.surface', 0.6),
-    backgroundColor: 'transparent',
-    cursor: 'default',
-  },
-});
-
-export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
-  function ListItem(props, forwardedRef) {
-    const {
-      as = 'div',
-      innerAs,
-      children,
-      selected: selectedProp = false,
-      'aria-selected': ariaSelectedProp = false,
-      disabled = false,
-      color: colorProp,
-      rippleColor,
-      __css,
-      ...otherProps
-    } = props;
-    const selected = ariaSelectedProp || selectedProp;
-    const color = rippleColor || colorProp || 'primary';
-    const theme = useTheme();
-
-    return (
-      <Box
-        ref={forwardedRef}
-        as={innerAs || as}
-        theme={theme}
-        display="flex"
-        data-disabled={disabled ? '' : undefined}
-        aria-selected={selected ? 'true' : undefined}
-        disabled={disabled}
-        {...otherProps}
-        __css={{
-          ...listItemStyle(color),
-          ...__css,
-        }}
-      >
-        {children}
-      </Box>
-    );
-  }
-);
+import type { ElementType, ReactNode } from 'react';
+import { forwardRef } from 'react';
+import { rem } from 'polished';
+import type { SystemStyleObject } from '@styled-system/css';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { useTheme } from '../theme';
+import { alpha } from '../color';
+
+export interface ListItemProps extends BoxProps {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+  disabled?: boolean;
+  selected?: boolean;
+  color?: string;
+  rippleColor?: string;
+}
+
+export const listItemStyle = (
+  color: string,
+  hoverOpacity = 0.16,
+  focusOpacity = 0.24
+): SystemStyleObject => ({
+  variant: 'text.label-large',
+  px: 3,
+  py: rem(12),
+  transition: 'background-color 75ms linear',
+  backgroundColor: 'transparent',
+  color: alpha('on.surface', 0.87),
+  cursor: 'pointer',
+  display: 'flex',
+  alignItems: 'center',
+  textDecoration: 'none',
+  ':hover': {
+    backgroundColor: alpha('on.surface', hoverOpacity),
+  },
+  ':focus': {
+    outline: 'none',
+    backgroundColor: alpha('on.surface', focusOpacity),
+  },
+  ':active': {
+    backgroundColor: alpha('on.surface', focusOpacity),
+  },
+  '&[aria-selected="true"]': {
+    backgroundColor: alpha(color, 0.08),
+    color,
+    ':hover': {
+      backgroundColor: alpha(color, hoverOpacity),
+    },
+    ':focus': {
+      outline: 'none',
+      backgroundColor: alpha(color, focusOpacity),
+    },
+    ':active': {
+      backgroundColor: alpha(color, focusOpacity),
+    },
+  },
+  '&[data-disabled]': {
+    color: alpha('on.surface', 0.6),
+    backgroundColor: 'transparent',
+    cursor: 'default',
+  },
+});
+
+export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
+  function ListItem(props, forwardedRef) {
+    const {
+      as = 'div',
+      innerAs,
+      children,
+      selected: selectedProp = false,
+      'aria-selected': ariaSelectedProp = false,
+      disabled = false,
+      color: colorProp,
+      rippleColor,
+      __css,
+      ...otherProps
+    } = props;
+    const selected = ariaSelectedProp || selectedProp;
+    const color = rippleColor || colorProp || 'primary';
+    const theme = useTheme();
+
+    return (
+      <Box
+        ref={forwardedRef}
+        as={innerAs || as}
+        theme={theme}
+        display="flex"
+        data-disabled={disabled ? '' : undefined}
+        aria-selected={selected ? 'true' : undefined}
+        disabled={disabled}
+        {...otherProps}
+        __css={{
+          ...listItemStyle(color),
+          ...__css,
+        }}
+      >
+        {children}
+      </Box>
+    );
+  }
+);

package/src/ListItem/ListItemText.tsx

@@ -1,35 +1,35 @@
-import type { ElementType, HTMLAttributes, ReactNode } from 'react';
-import { forwardRef } from 'react';
-
-import { Text } from '../Text';
-
-export interface ListItemTextProps extends HTMLAttributes<HTMLDivElement> {
-  as?: ElementType<any>;
-  text?: ReactNode;
-  secondaryText?: ReactNode;
-}
-
-export const ListItemText = forwardRef<HTMLDivElement, ListItemTextProps>(
-  function ListItemText(props, forwardedRef) {
-    const { as: Comp = 'div', text, secondaryText, ...otherProps } = props;
-
-    return (
-      <Comp ref={forwardedRef} {...otherProps}>
-        {text}
-        {secondaryText && (
-          <Text
-            as="span"
-            variant="body-small"
-            display="block"
-            __css={{
-              color: 'currentColor',
-              opacity: 0.65,
-            }}
-          >
-            {secondaryText}
-          </Text>
-        )}
-      </Comp>
-    );
-  }
-);
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+import { Text } from '../Text';
+
+export interface ListItemTextProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  text?: ReactNode;
+  secondaryText?: ReactNode;
+}
+
+export const ListItemText = forwardRef<HTMLDivElement, ListItemTextProps>(
+  function ListItemText(props, forwardedRef) {
+    const { as: Comp = 'div', text, secondaryText, ...otherProps } = props;
+
+    return (
+      <Comp ref={forwardedRef} {...otherProps}>
+        {text}
+        {secondaryText && (
+          <Text
+            as="span"
+            variant="body-small"
+            display="block"
+            __css={{
+              color: 'currentColor',
+              opacity: 0.65,
+            }}
+          >
+            {secondaryText}
+          </Text>
+        )}
+      </Comp>
+    );
+  }
+);

package/src/ListItem/index.ts

@@ -1,2 +1,2 @@
-export * from './ListItem';
-export * from './ListItemText';
+export * from './ListItem';
+export * from './ListItemText';

package/src/Menu/ContextMenu.story.tsx

@@ -1,34 +1,34 @@
-import { Menu, MenuList, MenuItem, MenuPopover, ContextMenuTrigger } from '.';
-import { Divider } from '../Divider';
-import { Box } from '../Box';
-// import './styles.css';
-
-export default {
-  title: 'components/Menu/ContextMenu',
-};
-
-const ContextMenuUncontrolled = ({ disabled }: { disabled?: boolean }) => {
-  return (
-    <Box px={5}>
-      <Menu>
-        <ContextMenuTrigger as="button" disabled={disabled}>
-          I only show menu on right click
-        </ContextMenuTrigger>
-        <MenuPopover usePortal>
-          <MenuList>
-            <MenuItem>Dog</MenuItem>
-            <MenuItem>Lion</MenuItem>
-            <MenuItem disabled={true}>Cat</MenuItem>
-            <Divider />
-            <MenuItem>Bear</MenuItem>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    </Box>
-  );
-};
-
-export const Uncontrolled = () => (
-  <ContextMenuUncontrolled disabled={undefined} />
-);
-export const Disabled = () => <ContextMenuUncontrolled disabled={true} />;
+import { Menu, MenuList, MenuItem, MenuPopover, ContextMenuTrigger } from '.';
+import { Divider } from '../Divider';
+import { Box } from '../Box';
+// import './styles.css';
+
+export default {
+  title: 'components/Menu/ContextMenu',
+};
+
+const ContextMenuUncontrolled = ({ disabled }: { disabled?: boolean }) => {
+  return (
+    <Box px={5}>
+      <Menu>
+        <ContextMenuTrigger as="button" disabled={disabled}>
+          I only show menu on right click
+        </ContextMenuTrigger>
+        <MenuPopover usePortal>
+          <MenuList>
+            <MenuItem>Dog</MenuItem>
+            <MenuItem>Lion</MenuItem>
+            <MenuItem disabled={true}>Cat</MenuItem>
+            <Divider />
+            <MenuItem>Bear</MenuItem>
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    </Box>
+  );
+};
+
+export const Uncontrolled = () => (
+  <ContextMenuUncontrolled disabled={undefined} />
+);
+export const Disabled = () => <ContextMenuUncontrolled disabled={true} />;