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

package/src/LineRipple/LineRipple.tsx

@@ -1,81 +1,81 @@
-import type { CSSProperties } from 'react';
-import { forwardRef, useState, useRef, useEffect } from 'react';
-import * as React from 'react';
-import { rem } from 'polished';
-
-import { useTheme } from '../theme';
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-
-export interface LineRippleProps extends BoxProps {
-  active?: boolean;
-  transitionDuration?: number;
-  posx?: number;
-  children?: React.ReactNode;
-}
-
-export const LineRipple = forwardRef<HTMLDivElement, LineRippleProps>(
-  function LineRipple(props, forwardedRef) {
-    const {
-      as: asProp,
-      transitionDuration = 180,
-      color = 'primary',
-      active = false,
-      posx = -1,
-      style: styleProp = {},
-      __css,
-      ...otherProps
-    } = props;
-
-    const [style, setStyle] = useState<CSSProperties>();
-    const theme = useTheme();
-    const leaveTimeout = useRef<number>();
-
-    useEffect(() => {
-      if (active) {
-        setStyle({
-          transform: 'scaleX(1)',
-          transformOrigin: posx >= 0 ? `${posx}px center` : undefined,
-          opacity: 1,
-        });
-      } else {
-        setStyle({
-          transform: 'scaleX(1)',
-          opacity: 0,
-        });
-
-        leaveTimeout.current = window.setTimeout(() => {
-          setStyle(undefined);
-        }, transitionDuration);
-      }
-
-      return () => {
-        clearTimeout(leaveTimeout.current);
-      };
-    }, [active, posx, transitionDuration]);
-
-    return (
-      <Box
-        as={asProp}
-        ref={forwardedRef}
-        bg={color}
-        theme={theme}
-        style={{ ...style, ...styleProp }}
-        __css={{
-          position: 'absolute',
-          bottom: '0',
-          left: '0',
-          width: '100%',
-          height: rem(2),
-          zIndex: 1,
-          transform: 'scaleX(0)',
-          transformOrigin: 'center center',
-          transition: `transform ${transitionDuration}ms cubic-bezier(.4,0,.2,1),opacity ${transitionDuration}ms cubic-bezier(.4,0,.2,1)`,
-          opacity: 0,
-          ...__css,
-        }}
-        {...otherProps}
-      />
-    );
-  }
-);
+import type { CSSProperties, ReactNode } from 'react';
+import { forwardRef, useState, useRef, useEffect } from 'react';
+import { rem } from 'polished';
+
+import { useTheme } from '../theme';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { EASING_STANDARD } from '../motion';
+
+export interface LineRippleProps extends BoxProps {
+  active?: boolean;
+  transitionDuration?: number;
+  posx?: number;
+  children?: ReactNode;
+}
+
+export const LineRipple = forwardRef<HTMLDivElement, LineRippleProps>(
+  function LineRipple(props, forwardedRef) {
+    const {
+      as: asProp,
+      transitionDuration = 180,
+      color = 'primary',
+      active = false,
+      posx = -1,
+      style: styleProp = {},
+      __css,
+      ...otherProps
+    } = props;
+
+    const [style, setStyle] = useState<CSSProperties>();
+    const theme = useTheme();
+    const leaveTimeout = useRef<number>();
+
+    useEffect(() => {
+      if (active) {
+        setStyle({
+          transform: 'scaleX(1)',
+          transformOrigin: posx >= 0 ? `${posx}px center` : undefined,
+          opacity: 1,
+        });
+      } else {
+        setStyle({
+          transform: 'scaleX(1)',
+          opacity: 0,
+        });
+
+        leaveTimeout.current = window.setTimeout(() => {
+          setStyle(undefined);
+        }, transitionDuration);
+      }
+
+      return () => {
+        clearTimeout(leaveTimeout.current);
+      };
+    }, [active, posx, transitionDuration]);
+
+    return (
+      <Box
+        as={asProp}
+        ref={forwardedRef}
+        bg={color}
+        theme={theme}
+        style={{ ...style, ...styleProp }}
+        __css={{
+          position: 'absolute',
+          bottom: '0',
+          left: '0',
+          width: '100%',
+          height: rem(2),
+          zIndex: 1,
+          transform: 'scaleX(0)',
+          transformOrigin: 'center center',
+          transition: `transform ${transitionDuration}ms ${EASING_STANDARD},opacity ${transitionDuration}ms ${EASING_STANDARD}`,
+          opacity: 0,
+          ...__css,
+        }}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/LineRipple/index.ts

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

package/src/Link/Link.story.tsx

@@ -1,14 +1,14 @@
-import { Link } from './';
-import { Text } from '../Text';
-
-export default { title: 'components/Link' };
-
-const Example = () => {
-  return (
-    <Text>
-      Hello world. Welcome to <Link href="https://google.com">Google.com</Link>
-    </Text>
-  );
-};
-
-export const Simple = () => <Example />;
+import { Link } from './';
+import { Text } from '../Text';
+
+export default { title: 'components/Link' };
+
+const Example = () => {
+  return (
+    <Text>
+      Hello world. Welcome to <Link href="https://google.com">Google.com</Link>
+    </Text>
+  );
+};
+
+export const Simple = () => <Example />;

package/src/Link/Link.tsx

@@ -1,56 +1,65 @@
-import { forwardRef } from 'react';
-import * as React 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,
-    React.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',
-        '&:hover,&:focus': {
-          textDecoration: 'none',
-        },
-        '&:focus,&:active': {
-          outlineWidth: rem(1),
-          outlineStyle: 'solid',
-          outlineColor: alpha(color, 0.87),
-        },
-        '&:active': {
-          bg: alpha(color, 0.16),
-        },
-        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 { forwardRef } from 'react';
-import * as React from 'react';
-
-import type { PaperProps } from '../Paper';
-import { Paper } from '../Paper';
-
-export interface ListProps extends PaperProps {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.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} />;