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

package/src/NavRail/NavRail.story.tsx

@@ -1,146 +1,146 @@
-import { rem } from 'polished';
-import { forwardRef, useState } from 'react';
-
-import { Box } from '../Box';
-import { NavRailItem, NavRailIndicator, NavRailLabel } from './';
-import type { NavRailLabelProps } from './';
-import { EASING_STANDARD } from '../motion';
-import { KitchenIcon, ListIcon, MenuIcon } from './icons/test-icons';
-// import './styles.css';
-
-export default {
-  title: 'components/NavRail',
-};
-
-export const Default = () => {
-  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"
-    >
-      <NavRailItem
-        selected={selectedItem === '0'}
-        onClick={() => setSelectedItem('0')}
-      >
-        <NavRailIndicator>
-          <MenuIcon />
-        </NavRailIndicator>
-        <NavRailLabel>Menu</NavRailLabel>
-      </NavRailItem>
-      <NavRailItem
-        selected={selectedItem === '1'}
-        onClick={() => setSelectedItem('1')}
-      >
-        <NavRailIndicator>
-          <KitchenIcon />
-        </NavRailIndicator>
-        <NavRailLabel>Kitchen</NavRailLabel>
-      </NavRailItem>
-      <NavRailItem
-        selected={selectedItem === '2'}
-        onClick={() => setSelectedItem('2')}
-      >
-        <NavRailIndicator>
-          <ListIcon />
-        </NavRailIndicator>
-        <NavRailLabel>Orders</NavRailLabel>
-      </NavRailItem>
-    </Box>
-  );
-};
-
-const DisappearingNavRailLabel = forwardRef<
-  HTMLDivElement,
-  NavRailLabelProps & { selected: boolean }
->(function AnimatedNavRailLabel({ selected, height = '28px', ...props }, ref) {
-  const transitionDuration = '0.2s';
-  const transitionTimingFunction = EASING_STANDARD;
-  return (
-    <Box
-      ref={ref}
-      style={{
-        height: selected ? height : '0px',
-      }}
-      sx={{
-        transition: `height ${transitionDuration} ${transitionTimingFunction}`,
-      }}
-    >
-      <NavRailLabel
-        style={{
-          transform: selected
-            ? 'scale(1) translateY(0)'
-            : `scale(0.8, 0.64) translateY(calc(${height} * -0.5 * 0.64))`,
-          opacity: selected ? '1' : '0',
-        }}
-        sx={{
-          transformOrigin: 'center top',
-          transition:
-            `transform ${transitionDuration} ${transitionTimingFunction}, ` +
-            `opacity ${transitionDuration} ${transitionTimingFunction}`,
-        }}
-        {...props}
-      />
-    </Box>
-  );
-});
-
-export const WithHiddenLabels = () => {
-  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"
-    >
-      <NavRailItem
-        selected={selectedItem === '0'}
-        onClick={() => setSelectedItem('0')}
-      >
-        <NavRailIndicator>
-          <MenuIcon />
-        </NavRailIndicator>
-        <DisappearingNavRailLabel selected={selectedItem === '0'}>
-          Menu
-        </DisappearingNavRailLabel>
-      </NavRailItem>
-      <NavRailItem
-        selected={selectedItem === '1'}
-        onClick={() => setSelectedItem('1')}
-      >
-        <NavRailIndicator>
-          <KitchenIcon />
-        </NavRailIndicator>
-        <DisappearingNavRailLabel selected={selectedItem === '1'}>
-          Kitchen
-        </DisappearingNavRailLabel>
-      </NavRailItem>
-      <NavRailItem
-        selected={selectedItem === '2'}
-        onClick={() => setSelectedItem('2')}
-      >
-        <NavRailIndicator>
-          <ListIcon />
-        </NavRailIndicator>
-        <DisappearingNavRailLabel selected={selectedItem === '2'}>
-          Orders
-        </DisappearingNavRailLabel>
-      </NavRailItem>
-    </Box>
-  );
-};
+import { rem } from 'polished';
+import { forwardRef, useState } from 'react';
+
+import { Box } from '../Box';
+import { NavRailItem, NavRailIndicator, NavRailLabel } from './';
+import type { NavRailLabelProps } from './';
+import { EASING_STANDARD } from '../motion';
+import { KitchenIcon, ListIcon, MenuIcon } from './icons/test-icons';
+// import './styles.css';
+
+export default {
+  title: 'components/NavRail',
+};
+
+export const Default = () => {
+  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"
+    >
+      <NavRailItem
+        selected={selectedItem === '0'}
+        onClick={() => setSelectedItem('0')}
+      >
+        <NavRailIndicator>
+          <MenuIcon />
+        </NavRailIndicator>
+        <NavRailLabel>Menu</NavRailLabel>
+      </NavRailItem>
+      <NavRailItem
+        selected={selectedItem === '1'}
+        onClick={() => setSelectedItem('1')}
+      >
+        <NavRailIndicator>
+          <KitchenIcon />
+        </NavRailIndicator>
+        <NavRailLabel>Kitchen</NavRailLabel>
+      </NavRailItem>
+      <NavRailItem
+        selected={selectedItem === '2'}
+        onClick={() => setSelectedItem('2')}
+      >
+        <NavRailIndicator>
+          <ListIcon />
+        </NavRailIndicator>
+        <NavRailLabel>Orders</NavRailLabel>
+      </NavRailItem>
+    </Box>
+  );
+};
+
+const DisappearingNavRailLabel = forwardRef<
+  HTMLDivElement,
+  NavRailLabelProps & { selected: boolean }
+>(function AnimatedNavRailLabel({ selected, height = '28px', ...props }, ref) {
+  const transitionDuration = '0.2s';
+  const transitionTimingFunction = EASING_STANDARD;
+  return (
+    <Box
+      ref={ref}
+      style={{
+        height: selected ? height : '0px',
+      }}
+      sx={{
+        transition: `height ${transitionDuration} ${transitionTimingFunction}`,
+      }}
+    >
+      <NavRailLabel
+        style={{
+          transform: selected
+            ? 'scale(1) translateY(0)'
+            : `scale(0.8, 0.64) translateY(calc(${height} * -0.5 * 0.64))`,
+          opacity: selected ? '1' : '0',
+        }}
+        sx={{
+          transformOrigin: 'center top',
+          transition:
+            `transform ${transitionDuration} ${transitionTimingFunction}, ` +
+            `opacity ${transitionDuration} ${transitionTimingFunction}`,
+        }}
+        {...props}
+      />
+    </Box>
+  );
+});
+
+export const WithHiddenLabels = () => {
+  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"
+    >
+      <NavRailItem
+        selected={selectedItem === '0'}
+        onClick={() => setSelectedItem('0')}
+      >
+        <NavRailIndicator>
+          <MenuIcon />
+        </NavRailIndicator>
+        <DisappearingNavRailLabel selected={selectedItem === '0'}>
+          Menu
+        </DisappearingNavRailLabel>
+      </NavRailItem>
+      <NavRailItem
+        selected={selectedItem === '1'}
+        onClick={() => setSelectedItem('1')}
+      >
+        <NavRailIndicator>
+          <KitchenIcon />
+        </NavRailIndicator>
+        <DisappearingNavRailLabel selected={selectedItem === '1'}>
+          Kitchen
+        </DisappearingNavRailLabel>
+      </NavRailItem>
+      <NavRailItem
+        selected={selectedItem === '2'}
+        onClick={() => setSelectedItem('2')}
+      >
+        <NavRailIndicator>
+          <ListIcon />
+        </NavRailIndicator>
+        <DisappearingNavRailLabel selected={selectedItem === '2'}>
+          Orders
+        </DisappearingNavRailLabel>
+      </NavRailItem>
+    </Box>
+  );
+};

package/src/NavRail/NavRailItem.tsx

@@ -1,175 +1,176 @@
-import type { ElementType, ReactNode } from 'react';
-import { 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 { useRippleSurface } from '../Ripple';
-import { EASING_STANDARD } from '../motion';
-
-export interface NavRailItemProps extends Omit<BoxProps, 'color'> {
-  as?: ElementType<any>;
-  children?: ReactNode;
-  disabled?: boolean;
-  selected?: boolean;
-  color?: string;
-}
-
-export type NavRailIndicatorProps = BoxProps;
-
-export const NavRailIndicator = forwardRef<
-  HTMLDivElement,
-  NavRailIndicatorProps
->(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={{
-        height: '100%',
-        width: [rem(64), rem(56)],
-        maxWidth: [rem(64), rem(56)],
-        maxHeight: [rem(64), rem(56)],
-        borderRadius: 'full',
-        bg: 'var(--indicator-background-color)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        minHeight: rem(32),
-        transition: `background-color .2s ${EASING_STANDARD}`,
-        pointerEvents: 'none',
-        ...__css,
-      }}
-    >
-      {children}
-    </Box>
-  );
-});
-
-export type NavRailLabelProps = TextProps;
-
-export const NavRailLabel = forwardRef<HTMLDivElement, NavRailLabelProps>(
-  function NavRailLabel(props, forwardedRef) {
-    const { as = 'div', children, __css, ...otherProps } = props;
-
-    return (
-      <Text
-        ref={forwardedRef}
-        as={as}
-        variant="label-small"
-        lineHeight={1}
-        {...otherProps}
-        __css={{
-          pt: rem(4),
-          pb: rem(12),
-          color: 'inherit',
-          pointerEvents: 'none',
-          ...__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: 'currentColor',
-      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) {
-        if (!key.startsWith('&')) {
-          ret['& [data-nav-rail-item-indicator]'] =
-            ret['& [data-nav-rail-item-indicator]'] || {};
-          ret['& [data-nav-rail-item-indicator]'][key] = ripple.__css[key];
-          continue;
-        }
-
-        const newKey = 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 }}
-        disabled={disabled}
-        __css={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          transition: `color .2s ${EASING_STANDARD}`,
-          color: selected ? `on.${color}` : 'on.surface-variant',
-          '--indicator-background-color': selected
-            ? get(theme, `colors.${color}`)
-            : 'transparent',
-          border: 'none',
-          ':focus': {
-            outline: 'none',
-          },
-          backgroundColor: 'transparent',
-          margin: 0,
-          padding: 0,
-          minHeight: rem(60),
-          height: rem(60),
-          cursor: 'pointer',
-          textDecoration: 'none',
-          WebkitTapHighlightColor: 'transparent',
-          ...rippleCss,
-          ...__css,
-        }}
-      >
-        {children}
-      </Box>
-    );
-  }
-);
+import type { ElementType, ReactNode } from 'react';
+import { 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 { useRippleSurface } from '../Ripple';
+import { EASING_STANDARD } from '../motion';
+
+export interface NavRailItemProps extends Omit<BoxProps, 'color'> {
+  as?: ElementType<any>;
+  children?: ReactNode;
+  disabled?: boolean;
+  selected?: boolean;
+  color?: string;
+}
+
+export type NavRailIndicatorProps = BoxProps;
+
+export const NavRailIndicator = forwardRef<
+  HTMLDivElement,
+  NavRailIndicatorProps
+>(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={{
+        height: '100%',
+        width: [rem(64), rem(56)],
+        maxWidth: [rem(64), rem(56)],
+        maxHeight: [rem(64), rem(56)],
+        borderRadius: 'full',
+        bg: 'var(--indicator-background-color)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: rem(32),
+        transition: `background-color .2s ${EASING_STANDARD}`,
+        pointerEvents: 'none',
+        ...__css,
+      }}
+    >
+      {children}
+    </Box>
+  );
+});
+
+export type NavRailLabelProps = TextProps;
+
+export const NavRailLabel = forwardRef<HTMLDivElement, NavRailLabelProps>(
+  function NavRailLabel(props, forwardedRef) {
+    const { as = 'div', children, __css, ...otherProps } = props;
+
+    return (
+      <Text
+        ref={forwardedRef}
+        as={as}
+        variant="label-small"
+        lineHeight={1}
+        {...otherProps}
+        __css={{
+          pt: rem(4),
+          pb: rem(12),
+          color: 'inherit',
+          pointerEvents: 'none',
+          ...__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: 'currentColor',
+      onKeyDown,
+      onPointerDown,
+      baseOpacity,
+      hoverOpacity,
+      focusOpacity,
+      pressedOpacity,
+    });
+
+    // Apply ripple from nav item to nav indicator
+    const rippleCss = useMemo(() => {
+      const ret: Record<string, any> = {};
+      const rippleCss = ripple.__css as Record<string, any>;
+      const keys = Object.keys(rippleCss);
+      for (const key of keys) {
+        if (!key.startsWith('&')) {
+          ret['& [data-nav-rail-item-indicator]'] =
+            ret['& [data-nav-rail-item-indicator]'] || {};
+          ret['& [data-nav-rail-item-indicator]'][key] = rippleCss[key];
+          continue;
+        }
+
+        const newKey = key.replace(
+          /(.+?)::(before|after)/g,
+          '$1 [data-nav-rail-item-indicator]::$2'
+        );
+        ret[newKey] = rippleCss[key];
+      }
+      return ret as SxStyleProp;
+    }, [ripple.__css]);
+
+    return (
+      <Box
+        ref={forwardedRef}
+        as={as}
+        {...otherProps}
+        onPointerDown={ripple.onPointerDown}
+        onKeyDown={ripple.onKeyDown}
+        aria-pressed={selected}
+        type="button"
+        style={{ ...ripple.style, ...style }}
+        disabled={disabled}
+        __css={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          transition: `color .2s ${EASING_STANDARD}`,
+          color: selected ? `on.${color}` : 'on.surface-variant',
+          '--indicator-background-color': selected
+            ? get(theme, `colors.${color}`)
+            : 'transparent',
+          border: 'none',
+          ':focus': {
+            outline: 'none',
+          },
+          backgroundColor: 'transparent',
+          margin: 0,
+          padding: 0,
+          minHeight: rem(60),
+          height: rem(60),
+          cursor: 'pointer',
+          textDecoration: 'none',
+          WebkitTapHighlightColor: 'transparent',
+          ...rippleCss,
+          ...__css,
+        }}
+      >
+        {children}
+      </Box>
+    );
+  }
+);