@basic-ui/material 1.0.0-alpha.3 → 1.0.0-alpha.6

package/src/NavRail/NavRailItem.tsx

@@ -0,0 +1,158 @@
+import React, { forwardRef, useMemo } from 'react';
+import { rem } from 'polished';
+import { get } from 'styled-system';
+
+import type { BoxProps, SxStyleProp } from '../Box';
+import { Box } from '../Box';
+import { useTheme } from '../theme';
+import { Text } from '../Text';
+import type { TextProps } from '../Text';
+import type { RippleBoxProps } from '../Ripple';
+import { useRippleSurface } from '../Ripple';
+
+export interface NavRailItemProps extends Omit<BoxProps, 'color'> {
+  as?: React.ElementType<any>;
+  children?: React.ReactNode;
+  disabled?: boolean;
+  selected?: boolean;
+  color?: string;
+}
+
+export const NavRailIndicator = forwardRef<HTMLDivElement, RippleBoxProps>(
+  function NavRailIndicator(props, forwardedRef) {
+    const { as = 'div', children, __css, ...otherProps } = props;
+
+    return (
+      <Box
+        color="currentColor"
+        ref={forwardedRef}
+        as={as}
+        data-nav-rail-item-indicator=""
+        {...otherProps}
+        __css={{
+          width: '100%',
+          height: '100%',
+          maxWidth: rem(56),
+          maxHeight: rem(56),
+          borderRadius: 'full',
+          bg: 'var(--indicator-background-color)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          minHeight: rem(32),
+          ...__css,
+        }}
+      >
+        {children}
+      </Box>
+    );
+  }
+);
+
+export const NavRailLabel = forwardRef<HTMLDivElement, TextProps>(
+  function NavRailLabel(props, forwardedRef) {
+    const { as = 'div', children, __css, ...otherProps } = props;
+
+    return (
+      <Text
+        ref={forwardedRef}
+        as={as}
+        variant="caption"
+        {...otherProps}
+        lineHeight={1}
+        __css={{
+          pt: rem(4),
+          pb: rem(12),
+          color: 'inherit',
+          ...__css,
+        }}
+      >
+        {children}
+      </Text>
+    );
+  }
+);
+
+export const NavRailItem = forwardRef<HTMLDivElement, NavRailItemProps>(
+  function NavRailItem(props, forwardedRef) {
+    const {
+      as = 'button',
+      children,
+      color = 'primary-container',
+      selected = false,
+      disabled = false,
+      style,
+      onKeyDown,
+      onPointerDown,
+      __css,
+      ...otherProps
+    } = props;
+    const theme = useTheme();
+    const baseOpacity = 0,
+      hoverOpacity = 0.04,
+      focusOpacity = 0.12,
+      pressedOpacity = 0.12;
+    const ripple = useRippleSurface({
+      rippleColor: `on.${color}`,
+      onKeyDown,
+      onPointerDown,
+      baseOpacity,
+      hoverOpacity,
+      focusOpacity,
+      pressedOpacity,
+    });
+
+    // Apply ripple from nav item to nav indicator
+    const rippleCss = useMemo(() => {
+      const ret: SxStyleProp = {};
+      const keys = Object.keys(ripple.__css);
+      for (const key of keys) {
+        const newKey =
+          key === '&'
+            ? '& [data-nav-rail-item-indicator]'
+            : key.replace(
+                /(.+?)::(before|after)/g,
+                '$1 [data-nav-rail-item-indicator]::$2'
+              );
+        ret[newKey] = ripple.__css[key];
+      }
+      return ret;
+    }, [ripple.__css]);
+
+    return (
+      <Box
+        ref={forwardedRef}
+        as={as}
+        {...otherProps}
+        onPointerDown={ripple.onPointerDown}
+        onKeyDown={ripple.onKeyDown}
+        aria-pressed={selected}
+        type="button"
+        style={{ ...ripple.style, ...style }}
+        __css={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          color: `on.${color}`,
+          '--indicator-background-color': selected
+            ? get(theme, `colors.${color}`)
+            : 'transparent',
+          border: 'none',
+          ':focus': {
+            outline: 'none',
+          },
+          backgroundColor: 'transparent',
+          margin: 0,
+          padding: 0,
+          px: rem(12),
+          cursor: 'pointer',
+          textDecoration: 'none',
+          ...rippleCss,
+          ...__css,
+        }}
+      >
+        {children}
+      </Box>
+    );
+  }
+);

package/src/NavRail/index.ts

@@ -0,0 +1 @@
+export * from './NavRailItem';

package/src/Ripple/useRippleSurface.ts

@@ -1,4 +1,5 @@
 import type { CSSProperties } from 'react';
+import { useMemo } from 'react';
 import { get } from '@styled-system/css';
 import { wrapEvent } from '@basic-ui/core';
 
@@ -22,7 +23,7 @@ export interface UseRippleSurfaceOptions<T extends HTMLElement> {
 }
 
 export function useRippleSurface<T extends HTMLElement>(
-  opts: UseRippleSurfaceOptions<T>
+  opts: UseRippleSurfaceOptions<T> = {}
 ) {
   let {
     // eslint-disable-next-line prefer-const
@@ -62,67 +63,80 @@ export function useRippleSurface<T extends HTMLElement>(
     ...rippleProps,
   });
 
-  const css: SxStyleProp = {
-    overflow: 'hidden',
-    position: 'relative',
-    cursor: 'pointer',
-    // fix overflow: hidden + borderRadius in Safari
-    // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479
-    willChange: 'transform,opacity',
-    WebkitTapHighlightColor: 'transparent',
-    // ripple overlay
-    '&::before': {
-      backgroundColor: rippleColor,
-      boxSizing: 'content-box',
-      position: 'absolute',
-      content: '""',
-      opacity: baseOpacity,
-      pointerEvents: 'none',
-      top: '0',
-      left: '0',
-      width: '100%',
-      height: '100%',
-      transition: 'opacity 75ms linear',
-    },
-    '&:hover::before': {
-      opacity: hoverOpacity,
-    },
-    '&:focus-visible::before': {
-      opacity: focusOpacity,
-    },
-    ...(!rippleEnabled && {
-      '&:active::before': {
-        opacity: pressedOpacity,
+  const css: SxStyleProp = useMemo(
+    () => ({
+      '&': {
+        overflow: 'hidden',
+        position: 'relative',
+        cursor: 'pointer',
+        // fix overflow: hidden + borderRadius in Safari
+        // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479
+        willChange: 'transform,opacity',
+        WebkitTapHighlightColor: 'transparent',
       },
-    }),
-    '&[aria-pressed="true"]::before': {
-      opacity: baseOpacity + pressedOpacity,
-    },
-    '&[aria-pressed="true"]:hover::before': {
-      opacity: pressedOpacity + hoverOpacity,
-    },
-    '&[aria-pressed="true"]:focus-visible::before': {
-      opacity: pressedOpacity + focusOpacity,
-    },
-    ...(!rippleEnabled && {
-      '&[aria-pressed="true"]:active::before': {
-        opacity: pressedOpacity + pressedOpacity,
+      // ripple overlay
+      '&::before': {
+        backgroundColor: rippleColor,
+        boxSizing: 'content-box',
+        position: 'absolute',
+        content: '""',
+        opacity: baseOpacity,
+        pointerEvents: 'none',
+        top: '0',
+        left: '0',
+        width: '100%',
+        height: '100%',
+        transition: 'opacity 75ms linear',
       },
-    }),
-    ['&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' +
-    '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' +
-    '&[data-disabled]:active::before,&:disabled[aria-pressed="true"]::before']:
-      {
-        opacity: 0,
+      '&:hover::before': {
+        opacity: hoverOpacity,
+      },
+      '&:focus-visible::before': {
+        opacity: focusOpacity,
+      },
+      ...(!rippleEnabled && {
+        '&:active::before': {
+          opacity: pressedOpacity,
+        },
+      }),
+      '&[aria-pressed="true"]::before': {
+        opacity: baseOpacity + pressedOpacity,
       },
-    '&:disabled,&[data-disabled]': {
-      cursor: 'default',
-    },
-    // ripple
-    ...(rippleEnabled && {
-      '&::after': { ...rippleStyle({ animation }) },
+      '&[aria-pressed="true"]:hover::before': {
+        opacity: pressedOpacity + hoverOpacity,
+      },
+      '&[aria-pressed="true"]:focus-visible::before': {
+        opacity: pressedOpacity + focusOpacity,
+      },
+      ...(!rippleEnabled && {
+        '&[aria-pressed="true"]:active::before': {
+          opacity: pressedOpacity + pressedOpacity,
+        },
+      }),
+      ['&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' +
+      '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' +
+      '&[data-disabled]:active::before,&:disabled[aria-pressed="true"]::before']:
+        {
+          opacity: 0,
+        },
+      '&:disabled,&[data-disabled]': {
+        cursor: 'default',
+      },
+      // ripple
+      ...(rippleEnabled && {
+        '&::after': { ...rippleStyle({ animation }) },
+      }),
     }),
-  };
+    [
+      animation,
+      baseOpacity,
+      focusOpacity,
+      hoverOpacity,
+      pressedOpacity,
+      rippleColor,
+      rippleEnabled,
+    ]
+  );
 
   return {
     style: { ...animationStyle, ...style },

package/src/Switch/Switch.tsx

@@ -20,7 +20,7 @@ const CheckBoxCore: React.FC<
   }
 > = _CheckBoxCore as any;
 
-interface SwitchProps
+export interface SwitchProps
   extends BoxProps<
     HTMLInputElement,
     React.InputHTMLAttributes<HTMLInputElement>

package/src/Tab/Tab.tsx

@@ -27,7 +27,7 @@ const TabInner = forwardRef<
   const { textColor, indicatorColor, selectedTextColor } = useTabListContext();
 
   return (
-    <Box position="relative" display="flex" flexGrow={1} flexDirection="column">
+    <Box position="relative" display="flex" flex={1} flexDirection="column">
       <RippleBox<
         RippleBoxProps<
           HTMLButtonElement,

package/src/ThemeExplorer/ThemeBuilder.story.tsx

@@ -3,7 +3,7 @@ import {
   CorePalette,
   argbFromHex,
   hexFromArgb,
-} from '@material/material-color-utilities';
+} from '@material/material-color-utilities'; // eslint-disable-line import/no-unresolved
 import type { Color } from '@basic-ui/color-picker';
 import { toColor } from '@basic-ui/color-picker';
 

package/src/ThemeExplorer/components.tsx

@@ -1,7 +1,7 @@
 import type { CSSProperties } from 'react';
 import React, { memo, useState } from 'react';
 import { rgb, parseToHsl, parseToRgb } from 'polished';
-import { hexFromArgb, TonalPalette } from '@material/material-color-utilities';
+import { hexFromArgb, TonalPalette } from '@material/material-color-utilities'; // eslint-disable-line import/no-unresolved
 
 import { Box, Text, Tooltip } from '../';
 

package/src/ThemeExplorer/makeColorScheme.tsx

@@ -1,5 +1,5 @@
 import type { TonalPalette } from '@material/material-color-utilities';
-import { hexFromArgb } from '@material/material-color-utilities';
+import { hexFromArgb } from '@material/material-color-utilities'; // eslint-disable-line import/no-unresolved
 
 export function makeColorScheme(opts: {
   primary: TonalPalette;

package/src/ThemeExplorer/useDeferredColor.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useDeferredValue } from 'react';
-import { TonalPalette, argbFromHex } from '@material/material-color-utilities';
+import { TonalPalette, argbFromHex } from '@material/material-color-utilities'; // eslint-disable-line import/no-unresolved
 import type { Color } from '@basic-ui/color-picker';
 
 import { useLocalStorageCachedState } from './useLocalStorageCachedState';