@basic-ui/material 1.0.0-alpha.4 → 1.0.0-alpha.41

package/src/NavRail/icons/test-icons.tsx

@@ -0,0 +1,46 @@
+import type { SVGAttributes } from 'react';
+
+export const ListIcon = (props: SVGAttributes<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={16}
+    width={16}
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M8 17q.425 0 .713-.288Q9 16.425 9 16t-.287-.713Q8.425 15 8 15t-.713.287Q7 15.575 7 16t.287.712Q7.575 17 8 17Zm0-4q.425 0 .713-.288Q9 12.425 9 12t-.287-.713Q8.425 11 8 11t-.713.287Q7 11.575 7 12t.287.712Q7.575 13 8 13Zm0-4q.425 0 .713-.288Q9 8.425 9 8t-.287-.713Q8.425 7 8 7t-.713.287Q7 7.575 7 8t.287.712Q7.575 9 8 9Zm3 8h6v-2h-6Zm0-4h6v-2h-6Zm0-4h6V7h-6ZM5 21q-.825 0-1.413-.587Q3 19.825 3 19V5q0-.825.587-1.413Q4.175 3 5 3h14q.825 0 1.413.587Q21 4.175 21 5v14q0 .825-.587 1.413Q19.825 21 19 21Zm0-2h14V5H5v14ZM5 5v14V5Z"
+    />
+  </svg>
+);
+
+export const KitchenIcon = (props: SVGAttributes<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={16}
+    width={16}
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M8 8V5h2v3Zm0 9v-5h2v5Zm-2 5q-.825 0-1.412-.587Q4 20.825 4 20V4q0-.825.588-1.413Q5.175 2 6 2h12q.825 0 1.413.587Q20 3.175 20 4v16q0 .825-.587 1.413Q18.825 22 18 22Zm0-2h12v-9H6v9ZM6 9h12V4H6Z"
+    />
+  </svg>
+);
+
+export const MenuIcon = (props: SVGAttributes<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={16}
+    width={16}
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M17 22v-8h-3V7q0-2.075 1.463-3.537Q16.925 2 19 2v20ZM7 22v-9.15q-1.275-.35-2.137-1.4Q4 10.4 4 9V2h2v7h1V2h2v7h1V2h2v7q0 1.4-.863 2.45-.862 1.05-2.137 1.4V22Z"
+    />
+  </svg>
+);

package/src/NavRail/index.ts

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

package/src/NotchedOutline/NotchedOutline.tsx

@@ -1,13 +1,12 @@
+import type { HTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { rem } from 'polished';
 
 import { NotchedOutlineProvider } from './context';
 import { useTheme } from '../theme';
 import { NOTCH_PADDING, InnerContainer } from './styledComponents';
 
-export interface NotchedOutlineProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface NotchedOutlineProps extends HTMLAttributes<HTMLDivElement> {
   borderColor: string;
   borderStyle?: string;
   borderWidth: number;
@@ -16,8 +15,8 @@ export interface NotchedOutlineProps
   notchWidth: number;
   notchActive?: boolean;
   forceActive?: boolean;
-  label?: React.ReactNode;
-  children?: React.ReactNode;
+  label?: ReactNode;
+  children?: ReactNode;
 }
 
 export const NotchedOutline = forwardRef<HTMLDivElement, NotchedOutlineProps>(

package/src/NotchedOutline/styledComponents.ts

@@ -5,6 +5,7 @@ import { css } from '@styled-system/css';
 
 import { alpha } from '../color';
 import type { Theme } from '../theme';
+import { EASING_STANDARD } from '../motion';
 
 export const NOTCH_PADDING = 4;
 
@@ -105,7 +106,7 @@ export const InnerContainer = styled('div', {
       ['[data-notch-outline-item]']: {
         boxSizing: 'border-box',
         borderStyle,
-        transition: `border-color .15s cubic-bezier(.4,0,.2,1)`,
+        transition: `border-color .15s ${EASING_STANDARD}`,
         ...(forceActive ? focusStyle : inactiveStyle),
       },
       // notch items styles when input is hovered

package/src/Paper/Paper.story.tsx

@@ -27,12 +27,12 @@ const Example = ({}) => {
         mb="4"
         sx={{ borderRadius: 'large' }}
       >
-        <Text variant="h3">Hello</Text>
-        <Text variant="body1">This is looking cool</Text>
+        <Text variant="headline-medium">Hello</Text>
+        <Text variant="body-medium">This is looking cool</Text>
         Pretty cool.
       </Paper>
       <label>
-        <Text as="span" variant="body1">
+        <Text as="span" variant="body-medium">
           Elevation: {elevation}
         </Text>
         <input

package/src/Paper/Paper.tsx

@@ -1,23 +1,19 @@
+import type { ElementType, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { rem } from 'polished';
 
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
 import { useTheme } from '../theme';
-import {
-  alpha,
-  getBackgroundOverlay,
-  getDarkThemeBackgroundOverlay,
-} from '../color';
+import { getBackgroundOverlay, getDarkThemeBackgroundOverlay } from '../color';
 
 export interface PaperProps extends BoxProps {
-  as?: React.ElementType<any>;
+  as?: ElementType<any>;
   elevation?: number;
   outlined?: boolean;
   backgroundOverlay?: number | string;
   darkThemeBackgroundOverlay?: number | string;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 export const Paper = forwardRef<HTMLDivElement, PaperProps>(function Paper(
@@ -48,7 +44,7 @@ export const Paper = forwardRef<HTMLDivElement, PaperProps>(function Paper(
           ? {
               borderStyle: 'solid',
               borderWidth: rem(1),
-              borderColor: alpha('on.surface', 0.12),
+              borderColor: 'surface-variant',
             }
           : {}),
         ...(backgroundOverlay

package/src/Popover/Popover.story.tsx

@@ -0,0 +1,29 @@
+import { useRef, useState } from 'react';
+
+import { Button } from '../Button';
+import { Box } from '../Box';
+import { TextField } from '../TextField';
+import { Popover } from './Popover';
+
+export default {
+  title: 'components/Popover',
+};
+
+const Example = () => {
+  const [open, setOpen] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  return (
+    <Box bg="surface" display="flex" justifyContent="center">
+      <Button id="open-button" onClick={() => setOpen(true)} ref={buttonRef}>
+        Open dialog
+      </Button>
+      <Popover open={open} onClose={() => setOpen(false)} anchorEl={buttonRef}>
+        Hello hello
+        <TextField placeholder="Hello" />
+      </Popover>
+    </Box>
+  );
+};
+
+export const Simple = () => <Example />;

package/src/Popover/Popover.tsx

@@ -0,0 +1,96 @@
+import {
+  Popper,
+  type PopperProps,
+  assignMultipleRefs,
+  Portal,
+} from '@basic-ui/core';
+import { forwardRef, useEffect, useRef } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import type { DialogBackdropProps } from '../Dialog/DialogBackdrop';
+import { DialogBackdrop } from '../Dialog/DialogBackdrop';
+import { PopoverSurface } from './PopoverSurface';
+import type { PopoverContainerProps } from './PopoverContainer';
+import { PopoverContainer } from './PopoverContainer';
+
+export type PopoverProps = Omit<PopperProps & BoxProps, 'usePortal'> & {
+  open: boolean;
+  onClose: () => void;
+  disableBackdropClick?: boolean;
+  disableEscapeKeyDown?: boolean;
+  backdropProps?: DialogBackdropProps;
+  containerProps?: PopoverContainerProps;
+};
+
+export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
+  function Popover(
+    {
+      portalSelector,
+      open,
+      anchorEl,
+      placement = 'bottom',
+      strategy = 'fixed',
+      modifiers,
+      skidding,
+      distance = 0,
+      offsetFn,
+      arrowPadding,
+      onClose,
+      children,
+      backdropProps,
+      containerProps,
+      disableBackdropClick,
+      disableEscapeKeyDown,
+      ...otherProps
+    },
+    forwardedRef
+  ) {
+    const ref = useRef<HTMLDivElement>(null);
+    useEffect(() => {
+      if (!anchorEl || !anchorEl.current) {
+        console.warn(
+          '<Popover /> will not open because it does not have an anchor element defined'
+        );
+      }
+    }, [anchorEl]);
+
+    if (!open || !anchorEl || !anchorEl.current) {
+      return null;
+    }
+
+    return (
+      <Portal selector={portalSelector}>
+        <DialogBackdrop
+          onClose={onClose}
+          open={open}
+          disableCloseOnClick={disableBackdropClick}
+          disableEscapeKeyDown={disableEscapeKeyDown}
+          {...backdropProps}
+        >
+          <Popper
+            as={Box}
+            innerAs="div"
+            anchorEl={anchorEl}
+            placement={placement}
+            strategy={strategy}
+            modifiers={modifiers}
+            skidding={skidding}
+            distance={distance}
+            offsetFn={offsetFn}
+            arrowPadding={arrowPadding}
+          >
+            <PopoverContainer {...containerProps}>
+              <PopoverSurface
+                ref={assignMultipleRefs(forwardedRef, ref)}
+                {...otherProps}
+              >
+                {children}
+              </PopoverSurface>
+            </PopoverContainer>
+          </Popper>
+        </DialogBackdrop>
+      </Portal>
+    );
+  }
+);

package/src/Popover/PopoverContainer.tsx

@@ -0,0 +1,25 @@
+import { forwardRef } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+
+export type PopoverContainerProps = BoxProps;
+
+export const PopoverContainer = forwardRef<HTMLDivElement, BoxProps>(
+  function PopoverContainer(props, forwardedRef) {
+    const { __css, ...otherProps } = props;
+
+    return (
+      <Box
+        ref={forwardedRef}
+        __css={{
+          minWidth: ['100vw', 'auto'],
+          px: [3, 0],
+          pointerEvents: 'none',
+          ...__css,
+        }}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/Popover/PopoverSurface.tsx

@@ -0,0 +1,51 @@
+import type { FC, Ref } from 'react';
+import { forwardRef } from 'react';
+import type { ModalProps } from '@basic-ui/core';
+import { Modal as _Modal } from '@basic-ui/core';
+import { get } from 'styled-system';
+
+import type { PaperProps } from '../Paper';
+import { Paper } from '../Paper';
+import { useTheme } from '../theme';
+import { growAnimation } from '../Menu';
+import { EASING_STANDARD } from '../motion';
+
+const Modal = _Modal as FC<PopoverSurfaceProps & { ref?: Ref<HTMLDivElement> }>;
+
+export type PopoverSurfaceProps = ModalProps & PaperProps;
+
+export const PopoverSurface = forwardRef<HTMLDivElement, PopoverSurfaceProps>(
+  function PopoverSurface(props, forwardedRef) {
+    const { __css, ...otherProps } = props;
+    const theme = useTheme();
+
+    const overlayValue =
+      (get(theme, 'dialogs.backgroundColorOverlay') as number) || 0;
+
+    return (
+      <Modal
+        ref={forwardedRef}
+        as={Paper}
+        theme={theme}
+        elevation={3}
+        darkThemeBackgroundOverlay={overlayValue}
+        __css={{
+          position: 'relative',
+          borderRadius: 'extra-small',
+          overflow: 'auto',
+          pointerEvents: 'auto',
+          willChange: 'transform,opacity',
+          '[data-popper-placement="top"] &': {
+            transformOrigin: 'bottom center',
+          },
+          '[data-popper-placement="bottom"] &': {
+            transformOrigin: 'top center',
+          },
+          animation: `${growAnimation} .12s ${EASING_STANDARD}`,
+          ...__css,
+        }}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/Popover/index.ts

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

package/src/ProgressSpinner/ProgressSpinner.tsx

@@ -5,6 +5,7 @@ import { rem } from 'polished';
 
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
+import { EASING_STANDARD } from '../motion';
 
 export type ProgressSpinnerProps = BoxProps & {
   progress?: number;
@@ -14,10 +15,10 @@ export type ProgressSpinnerProps = BoxProps & {
 
 const innerDivRotate = keyframes({
   '0%': {
-    transformOrigin: '50% 50%',
+    transform: 'rotate(-90deg)',
   },
   '100%': {
-    transform: 'rotate(360deg)',
+    transform: 'rotate(270deg)',
   },
 });
 
@@ -69,9 +70,11 @@ export const ProgressSpinner = forwardRef<HTMLDivElement, ProgressSpinnerProps>(
             display: 'inline-block',
             width: '100%',
             height: '100%',
-            ...(indeterminate
-              ? { animation: `${innerDivRotate} 1.4s linear infinite` }
-              : { transform: 'rotate(-90deg)' }),
+            transformOrigin: '50% 50%',
+            transform: 'rotate(-90deg)',
+            ...(indeterminate && {
+              animation: `${innerDivRotate} 1.4s linear infinite`,
+            }),
           }}
         >
           <Box<BoxProps<SVGElement, SVGAttributes<SVGElement>>>
@@ -101,12 +104,9 @@ export const ProgressSpinner = forwardRef<HTMLDivElement, ProgressSpinnerProps>(
                 indeterminate
                   ? {
                       animation: `${circleIndeterminate} 1.4s ease-in-out infinite`,
-                      strokeDasharray: '80px, 200px',
-                      strokeDashoffset: '0px',
                     }
                   : {
-                      transition:
-                        'stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+                      transition: `stroke-dashoffset 300ms ${EASING_STANDARD} 0ms`,
                       strokeDasharray: circumference.toFixed(3),
                     }
               }

package/src/RadioButton/RadioButton.story.tsx

@@ -1,5 +1,5 @@
+import type { ChangeEvent } from 'react';
 import { useState } from 'react';
-import * as React from 'react';
 
 import { RadioButton, RadioGroup, Box } from '../';
 // import './styles.css';
@@ -35,7 +35,7 @@ const Example = (props) => {
 
 const StandaloneExample = (props) => {
   const [selectedValue, setSelectedValue] = useState('a');
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     setSelectedValue(e.target.value);
   };
 

package/src/RadioButton/RadioButton.tsx

@@ -21,7 +21,7 @@ export type RadioButtonProps = RadioButtonCoreProps;
 const RadioButtonInner = forwardRef<
   HTMLInputElement,
   RadioButtonProps &
-    BoxProps<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>
+    BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>
 >(function RadioButtonInner(props, forwardedRef) {
   const { innerAs: as, checked, disabled, __css, ...otherProps } = props;
   const color = 'primary';

package/src/RadioButton/RadioButtonIcon.tsx

@@ -1,11 +1,11 @@
+import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { rem } from 'polished';
 
 import { Box } from '../Box';
+import { EASING_STANDARD } from '../motion';
 
-export interface RadioButtonIconProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface RadioButtonIconProps extends HTMLAttributes<HTMLDivElement> {
   checked?: boolean;
   disabled?: boolean;
 }
@@ -34,8 +34,7 @@ export const RadioButtonIcon = forwardRef<HTMLDivElement, RadioButtonIconProps>(
             borderRadius: 'full',
             width: '100%',
             height: '100%',
-            transition:
-              'transform .12s cubic-bezier(0,0,.2,1) 0ms,background-color .12s cubic-bezier(0,0,.2,1) 0ms',
+            transition: `transform .12s ${EASING_STANDARD} 0ms,background-color .12s ${EASING_STANDARD} 0ms`,
             transform: checked ? 'scale(1)' : 'scale(0)',
           }}
         />

package/src/Ripple/Ripple.story.tsx

@@ -46,7 +46,7 @@ const Example = () => {
         }}
       >
         <Ripple animation={animation} style={rippleStyle} />
-        <Text variant="h3" style={{ zIndex: 1, color: textColor }}>
+        <Text variant="headline-medium" style={{ zIndex: 1, color: textColor }}>
           Hello
         </Text>
       </Box>

package/src/Ripple/RippleBox.tsx

@@ -1,6 +1,5 @@
 import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 import type { UseRippleSurfaceOptions } from './useRippleSurface';
 import { useRippleSurface } from './useRippleSurface';
@@ -9,7 +8,7 @@ import { Box } from '../Box';
 
 export type RippleBoxProps<
   H extends HTMLElement = HTMLDivElement,
-  Attr = React.HTMLAttributes<H>
+  Attr = HTMLAttributes<H>
 > = BoxProps<H, Attr> & UseRippleSurfaceOptions<H>;
 
 export const RippleBox: <

package/src/Ripple/useRippleHandlers.ts

@@ -1,5 +1,5 @@
+import type { KeyboardEvent as ReactKeyboardEvent, PointerEvent } from 'react';
 import { useRef } from 'react';
-import type * as React from 'react';
 
 import type { RippleOptions } from './useRipple';
 import { useRipple } from './useRipple';
@@ -18,7 +18,7 @@ export function useRippleHandlers<T extends HTMLElement>(opts: RippleOptions) {
     deactivate();
   };
 
-  const handlePointerDown = (e: React.PointerEvent<T>) => {
+  const handlePointerDown = (e: PointerEvent<T>) => {
     const rect = e.currentTarget.getBoundingClientRect();
     activate(rect, e.clientX, e.clientY, opts.center);
     window.addEventListener('pointerup', handlePointerUp);
@@ -36,7 +36,7 @@ export function useRippleHandlers<T extends HTMLElement>(opts: RippleOptions) {
     deactivate();
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent<T>) => {
+  const handleKeyDown = (e: ReactKeyboardEvent<T>) => {
     if (e.key !== ' ' || !keyReleased.current) {
       return;
     }