@basic-ui/material 0.1.16 → 1.0.0-alpha.2

package/src/SelectItem/SelectItem.tsx

@@ -1,8 +1,10 @@
 import { forwardRef } from 'react';
-import { MenuItem, MenuItemProps } from '../Menu';
-import { useSelectContext } from '../Select/context';
 import { wrapEvent } from '@basic-ui/core';
 
+import type { MenuItemProps } from '../Menu';
+import { MenuItem } from '../Menu';
+import { useSelectContext } from '../Select/context';
+
 export type SelectItemProps = MenuItemProps;
 
 const ZERO_WIDTH_SPACE = '\u200b';

package/src/SelectionControl/SelectionControlLabel.tsx

@@ -1,6 +1,9 @@
-import { forwardRef, LabelHTMLAttributes } from 'react';
-import type * as React from 'react';
-import { Box, BoxProps } from '../Box';
+import type { LabelHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+import * as React from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export interface SelectionControlLabelProps
   extends BoxProps<

package/src/SelectionControl/SelectionControlText.tsx

@@ -1,6 +1,8 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Text, TextProps } from '../Text';
+import * as React from 'react';
+
+import type { TextProps } from '../Text';
+import { Text } from '../Text';
 import { alpha } from '../color';
 
 export interface SelectionControlTextProps extends TextProps {

package/src/Skeleton/DelayAppearance.tsx

@@ -1,8 +1,10 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { BoxProps, Box } from '../Box';
+import * as React from 'react';
 import { keyframes } from '@emotion/react';
-import { Keyframes } from '@emotion/serialize';
+import type { Keyframes } from '@emotion/serialize';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export const appearAnimation: Keyframes = keyframes({
   to: {

package/src/Skeleton/Skeleton.story.tsx

@@ -20,11 +20,11 @@ const Skeletons = ({
         animation={animation}
         width={60}
         height={60}
-        borderRadius="50%"
+        borderRadius="full"
         m={2}
       />
       <Skeleton animation={animation} m={2}>
-        <Box width={60} height={60} borderRadius="50%" />
+        <Box width={60} height={60} borderRadius="full" />
       </Skeleton>
     </Box>
   );

package/src/Skeleton/Skeleton.tsx

@@ -1,6 +1,8 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Box, BoxProps } from '../Box';
+import * as React from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { alpha } from '../color';
 import { useTheme } from '../theme';
 import { pulseAnimationStyle, waveAnimationStyle } from './animation';

package/src/Skeleton/animation.ts

@@ -1,6 +1,7 @@
 import { keyframes } from '@emotion/react';
-import { Keyframes } from '@emotion/serialize';
-import { SystemStyleObject } from '@styled-system/css';
+import type { Keyframes } from '@emotion/serialize';
+import type { SystemStyleObject } from '@styled-system/css';
+
 import { alpha } from '../color';
 
 export const pulseAnimation: Keyframes = keyframes({

package/src/Snackbar/Snackbar.story.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { Snackbar } from './';
 import { Box } from '../Box';
 import { Button } from '../Button';

package/src/Snackbar/Snackbar.tsx

@@ -1,14 +1,16 @@
 import { assignMultipleRefs } from '@basic-ui/core';
 import { rem } from 'polished';
 import { cloneElement, forwardRef, useRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { Box } from '../Box';
 import {
   DARK_THEME_CLASS,
   DEFAULT_THEME_CLASS,
   useColorMode,
 } from '../ColorMode';
-import { Paper, PaperProps } from '../Paper';
+import type { PaperProps } from '../Paper';
+import { Paper } from '../Paper';
 import { Text } from '../Text';
 import { useSnackbarAnimation } from './useSnackbarAnimation';
 
@@ -39,21 +41,21 @@ export const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
 
     return (
       <Paper
-        elevation={6}
-        backgroundOverlay={6}
+        elevation={4}
+        darkThemeBackgroundOverlay={4}
         className={
           colorMode === 'default' ? DARK_THEME_CLASS : DEFAULT_THEME_CLASS
         }
         ref={assignMultipleRefs(forwardedRef, ref)}
         __css={{
-          boxShadow: 6,
+          boxShadow: 4,
           py: rem(6),
           pl: 3,
           pr: 3,
           display: 'inline-flex',
           minWidth: `min(100%, ${rem(344)})`,
           maxWidth: ['100%', 'unset'],
-          borderRadius: rem(4),
+          borderRadius: 'extra-small',
           color: 'on.surface',
           flexDirection: 'row',
           willChange: 'transform,opacity',

package/src/Snackbar/Stack.tsx

@@ -1,13 +1,13 @@
-import { MutableRefObject, ReactElement, useLayoutEffect } from 'react';
-import type * as React from 'react';
+import type { MutableRefObject, ReactElement, FC } from 'react';
 import {
+  useLayoutEffect,
   createContext,
-  FC,
   useContext,
   useEffect,
   useRef,
   useState,
 } from 'react';
+import * as React from 'react';
 
 export type StackPlacement =
   | 'top-right'

package/src/Snackbar/useSnackbarAnimation.ts

@@ -1,4 +1,6 @@
-import { CSSProperties, useEffect } from 'react';
+import type { CSSProperties } from 'react';
+import { useEffect } from 'react';
+
 import { useStackItem } from './Stack';
 
 const TRANSITION_TIME = 150;

package/src/Switch/Switch.tsx

@@ -1,10 +1,13 @@
-import { forwardRef, InputHTMLAttributes } from 'react';
-import type * as React from 'react';
-import { RippleBox, RippleBoxProps } from '../Ripple';
-import { Box, BoxProps } from '../Box';
-import { useTheme } from '../theme';
-import { rem } from 'polished';
+import type { InputHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+import * as React from 'react';
 import { CheckBox as _CheckBoxCore } from '@basic-ui/core';
+
+import type { RippleBoxProps } from '../Ripple';
+import { RippleBox } from '../Ripple';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { useTheme } from '../theme';
 import {
   SelectionControlLabel,
   SelectionControlText,
@@ -42,8 +45,8 @@ const SwitchInner = forwardRef<HTMLInputElement, SwitchProps>(
 
     return (
       <Box p={2} display="inline-block" minWidth="auto">
-        <Box position="relative" opacity={disabled ? 0.38 : 1}>
-          <SwitchTrail checked={checked} />
+        <Box position="relative">
+          <SwitchTrail checked={checked} disabled={disabled} />
           <SwitchThumb checked={checked}>
             <RippleBox<
               RippleBoxProps<
@@ -52,6 +55,7 @@ const SwitchInner = forwardRef<HTMLInputElement, SwitchProps>(
               >
             >
               as={Comp}
+              role="switch"
               type="checkbox"
               checked={checked}
               onChange={onChange}
@@ -64,20 +68,21 @@ const SwitchInner = forwardRef<HTMLInputElement, SwitchProps>(
               focusOpacity={0.12}
               center={true}
               disabled={disabled}
+              data-switch-thumb=""
               {...otherProps}
               __css={{
                 top: '50%',
                 left: '50%',
                 backgroundColor: 'transparent',
                 transform: 'translate(-50%, -50%)',
-                width: rem(48),
-                height: rem(48),
+                width: '100%',
+                height: '100%',
                 appearance: 'none',
                 ':focus': {
                   outline: 'none',
                 },
                 border: 'none',
-                borderRadius: '50%',
+                borderRadius: 'full',
                 zIndex: 1,
                 position: 'absolute',
                 ...__css,

package/src/Switch/styledComponents.tsx

@@ -1,33 +1,59 @@
 import { rem } from 'polished';
+
 import { Box } from '../Box';
 
-export const SwitchTrail = ({ checked = false, ...otherProps }) => (
+const BORDER_WIDTH = 2;
+const TRAIL_WIDTH = 52;
+const TRAIL_HEIGHT = 32;
+const CIRCLE_SIZE_INACTIVE_CHECKED = 24;
+const CIRCLE_SIZE_ACTIVE_CHECKED = 28;
+const CIRCLE_SIZE_INACTIVE_UNCHECKED = 16;
+const CIRCLE_SIZE_ACTIVE_UNCHECKED = 28;
+
+export const SwitchTrail = ({
+  checked = false,
+  disabled = false,
+  ...otherProps
+}) => (
   <Box
     __css={{
-      width: rem(32),
-      height: rem(14),
-      borderRadius: rem(7),
-      backgroundColor: checked ? 'primary' : 'on.surface',
-      opacity: checked ? 0.54 : 0.38,
+      width: rem(TRAIL_WIDTH),
+      height: rem(TRAIL_HEIGHT),
+      borderRadius: rem(TRAIL_HEIGHT / 2),
+      borderWidth: rem(BORDER_WIDTH),
+      borderStyle: 'solid',
+      backgroundColor: checked ? 'primary' : 'surface-variant',
+      borderColor: checked ? 'primary' : 'outline',
+      ...(disabled && {
+        opacity: 0.12,
+        backgroundColor: checked ? 'on.surface' : 'surface-variant',
+        borderColor: 'on.surface',
+      }),
     }}
     {...otherProps}
   />
 );
 
+const THUMB_SIZE = 40;
 export const SwitchThumb = ({ checked = false, ...otherProps }) => (
   <Box
     position="absolute"
-    width={rem(54)}
-    height={rem(48)}
-    borderRadius={rem(24)}
-    left={rem(-21)}
-    top={rem(-17)}
+    width={rem(THUMB_SIZE)}
+    height={rem(THUMB_SIZE)}
+    borderRadius="full"
+    left={'50%'}
+    top={'50%'}
     __css={{
-      cursor: 'pointer',
-      transform: checked ? `translate(${rem(20)})` : 'none',
+      transform: `translateX(calc(-50% ${checked ? '+' : '-'} ${rem(
+        (TRAIL_WIDTH - CIRCLE_SIZE_INACTIVE_CHECKED - BORDER_WIDTH * 4) / 2
+      )})) translateY(-50%)`,
       WebkitTapHighlightColor: 'transparent',
       transition:
-        'background-color 90ms cubic-bezier(.4,0,.2,1),border-color 90ms cubic-bezier(.4,0,.2,1),transform 90ms cubic-bezier(.4,0,.2,1)',
+        'background-color 90ms cubic-bezier(.4,0,.2,1),border-color 90ms cubic-bezier(.4,0,.2,1),transform 90ms cubic-bezier(.4,0,.2,1),height 90ms cubic-bezier(.4,0,.2,1),width 90ms cubic-bezier(.4,0,.2,1)',
+      '& > input': {
+        width: THUMB_SIZE,
+        height: THUMB_SIZE,
+      },
     }}
     {...otherProps}
   />
@@ -37,22 +63,46 @@ export const SwitchCircle = ({ checked = false, ...otherProps }) => (
   <Box
     __css={{
       position: 'absolute',
-      width: rem(20),
-      height: rem(20),
-      boxShadow: 2,
+      width: checked
+        ? rem(CIRCLE_SIZE_INACTIVE_CHECKED)
+        : rem(CIRCLE_SIZE_INACTIVE_UNCHECKED),
+      height: checked
+        ? rem(CIRCLE_SIZE_INACTIVE_CHECKED)
+        : rem(CIRCLE_SIZE_INACTIVE_UNCHECKED),
       boxSizing: 'border-box',
-      borderWidth: rem(10),
-      borderStyle: 'solid',
-      borderRadius: '50%',
+      borderRadius: 'full',
       pointerEvents: 'none',
       zIndex: 1,
-      backgroundColor: checked ? 'primary' : '#fff',
-      borderColor: checked ? 'primary' : '#fff',
+      backgroundColor: checked ? 'on.primary' : 'outline',
       top: '50%',
       left: '50%',
       transform: 'translate(-50%, -50%)',
       transition: 'inherit',
+      '[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &, [data-switch-thumb=""]:hover ~ &':
+        {
+          backgroundColor: checked ? 'primary-container' : 'on.surface-variant',
+        },
+      '[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &':
+        {
+          height: checked
+            ? CIRCLE_SIZE_ACTIVE_CHECKED
+            : CIRCLE_SIZE_ACTIVE_UNCHECKED,
+          width: checked
+            ? CIRCLE_SIZE_ACTIVE_CHECKED
+            : CIRCLE_SIZE_ACTIVE_UNCHECKED,
+        },
+      '[data-switch-thumb=""]:disabled ~ &': {
+        opacity: checked ? 1 : 0.38,
+        backgroundColor: checked ? 'surface' : 'on.surface',
+        height: checked
+          ? CIRCLE_SIZE_INACTIVE_CHECKED
+          : CIRCLE_SIZE_INACTIVE_UNCHECKED,
+        width: checked
+          ? CIRCLE_SIZE_INACTIVE_CHECKED
+          : CIRCLE_SIZE_INACTIVE_UNCHECKED,
+      },
     }}
+    data-switch-circle=""
     role="presentation"
     aria-hidden="true"
     {...otherProps}

package/src/Tab/Tab.tsx

@@ -1,8 +1,12 @@
-import { ButtonHTMLAttributes, forwardRef } from 'react';
-import type * as React from 'react';
-import { Tab as TabCore, TabProps as TabPropsCore } from '@basic-ui/core';
-import { RippleBox, RippleBoxProps } from '../Ripple';
+import type { ButtonHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+import * as React from 'react';
+import type { TabProps as TabPropsCore } from '@basic-ui/core';
+import { Tab as TabCore } from '@basic-ui/core';
 import { rem } from 'polished';
+
+import type { RippleBoxProps } from '../Ripple';
+import { RippleBox } from '../Ripple';
 import { alpha } from '../color';
 import { Text } from '../Text';
 import { Box } from '../Box';

package/src/Tab/TabList.tsx

@@ -1,10 +1,10 @@
 import { forwardRef, useRef } from 'react';
-import {
-  TabList as TabListCore,
-  TabListProps as TabListPropsCore,
-} from '@basic-ui/core';
-import { Box, BoxProps } from '../Box';
+import type { TabListProps as TabListPropsCore } from '@basic-ui/core';
+import { TabList as TabListCore } from '@basic-ui/core';
 import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { TabIndicatorProvider } from '../TabIndicator';
 import { TabListProvider } from './context';
 

package/src/Tab/TabPanel.tsx

@@ -1,9 +1,9 @@
 import { forwardRef } from 'react';
-import {
-  TabPanel as TabPanelCore,
-  TabPanelProps as TabPanelPropsCore,
-} from '@basic-ui/core';
-import { Box, BoxProps } from '../Box';
+import type { TabPanelProps as TabPanelPropsCore } from '@basic-ui/core';
+import { TabPanel as TabPanelCore } from '@basic-ui/core';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export type TabPanelProps = TabPanelPropsCore & BoxProps;
 

package/src/TabIndicator/TabIndicator.tsx

@@ -1,9 +1,11 @@
 import { forwardRef, useEffect, useRef, useLayoutEffect } from 'react';
-import { Box, BoxProps } from '../Box';
 import { rem } from 'polished';
-import { useTabIndicatorContext } from './context';
 import { assignMultipleRefs } from '@basic-ui/core';
 
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { useTabIndicatorContext } from './context';
+
 export interface TabIndicatorProps extends BoxProps {
   selected?: boolean;
   color?: string;
@@ -22,7 +24,8 @@ export const TabIndicator = forwardRef<HTMLDivElement, TabIndicatorProps>(
       if (selected && ref.current) {
         if (currentIndicator.current !== null) {
           // We are switching indicator, let's slide!
-          const previousClientRect = currentIndicator.current.getBoundingClientRect();
+          const previousClientRect =
+            currentIndicator.current.getBoundingClientRect();
           const currentClientRect = ref.current.getBoundingClientRect();
           const widthDelta = previousClientRect.width / currentClientRect.width;
           const xPosition = previousClientRect.left - currentClientRect.left;

package/src/Table/Table.tsx

@@ -1,10 +1,12 @@
 import { forwardRef } from 'react';
-import { Paper, PaperProps } from '../Paper';
+
+import type { PaperProps } from '../Paper';
+import { Paper } from '../Paper';
 
 export type TableProps = PaperProps;
 
 export const Table = forwardRef<HTMLDivElement, TableProps>((props, ref) => {
-  const { children, elevation = 4, ...rest } = props;
+  const { children, elevation = 1, ...rest } = props;
 
   return (
     <Paper
@@ -14,6 +16,7 @@ export const Table = forwardRef<HTMLDivElement, TableProps>((props, ref) => {
       width="100%"
       flexDirection="column"
       elevation={elevation}
+      darkThemeBackgroundOverlay={elevation}
       {...rest}
     >
       {children}

package/src/Table/TableBody.tsx

@@ -1,5 +1,7 @@
 import { forwardRef } from 'react';
-import { Box, BoxProps } from '../Box';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export type TableBodyProps = BoxProps;
 

package/src/Table/TableCell.tsx

@@ -1,5 +1,7 @@
 import { forwardRef } from 'react';
-import { Box, BoxProps } from '../Box';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { useTableHeadContext } from './context';
 
 export type TableCellProps = BoxProps;

package/src/Table/TableHead.tsx

@@ -1,8 +1,10 @@
 import { forwardRef } from 'react';
+import { rem } from 'polished';
+
 import { TableHeadProvider } from './context';
-import { TableBody, TableBodyProps } from './TableBody';
+import type { TableBodyProps } from './TableBody';
+import { TableBody } from './TableBody';
 import { alpha } from '../color';
-import { rem } from 'polished';
 
 export type TableHeadProps = TableBodyProps;
 

package/src/Table/TableRow.tsx

@@ -1,8 +1,10 @@
 import { forwardRef } from 'react';
-import { Text, TextProps } from '../Text';
-import { alpha } from '../color';
 import { rem } from 'polished';
 
+import type { TextProps } from '../Text';
+import { Text } from '../Text';
+import { alpha } from '../color';
+
 export type TableRowProps = TextProps;
 
 export const TableRow = forwardRef<HTMLDivElement, TableRowProps>(

package/src/Text/LoremIpsum.tsx

@@ -1,4 +1,5 @@
-import { FC } from 'react';
+import type { FC } from 'react';
+
 import { Text } from '.';
 
 const phrase =

package/src/Text/Text.tsx

@@ -1,6 +1,8 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Box, BoxProps } from '../Box';
+import * as React from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export type TextVariants =
   | 'h1'

package/src/TextField/FilledContainer.tsx

@@ -1,12 +1,14 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
 import { get } from '@styled-system/css';
+import { rem } from 'polished';
+
 import { useTheme } from '../theme';
 import { FloatingLabel } from '../FloatingLabel';
 import { LineRipple } from '../LineRipple';
-import { rem } from 'polished';
 import { alpha } from '../color';
-import { Box, BoxProps } from '../Box';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import {
   ICON_WIDTH,
   PADDING_LEFT_WITHOUT_ICON,
@@ -38,7 +40,7 @@ const Overlay = (props: { forceActive?: boolean }) => {
         right: 0,
         backgroundColor: 'on.surface',
         pointerEvents: 'none',
-        opacity: 0.04,
+        opacity: 0,
         [makeSelector('hover:not([disabled]):not(:focus)')]: !forceActive && {
           opacity: get(theme, `buttons.overlays.filled.hover.opacity`),
         },
@@ -120,14 +122,17 @@ export const FilledContainer = forwardRef<HTMLDivElement, FilledContainerProps>(
           position: 'relative',
           lineHeight: 0,
           width: '100%',
-          backgroundColor: 'surface',
+          backgroundColor: 'surface-variant',
           overflow: 'hidden',
           boxSizing: 'border-box',
           borderTopRightRadius: rem(4),
           borderTopLeftRadius: rem(4),
-          color: alpha('on.surface', 0.54),
-          ...(disabled && { color: alpha('on.surface', 0.38) }),
-          ...(active && { color: alpha('primary', 0.87) }),
+          color: alpha('on.surface-variant', 0.87),
+          ...(disabled && {
+            backgroundColor: alpha('on.surface-variant', 0.08),
+            color: alpha('on.surface-variant', 0.38),
+          }),
+          ...(active && { color: 'primary' }),
         }}
         {...otherProps}
       >

package/src/TextField/HelperText.tsx

@@ -1,9 +1,10 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { Box } from '../Box';
 import { Text } from '../Text';
 import { alpha } from '../color';
-import { TextProps } from '../Text/Text';
+import type { TextProps } from '../Text/Text';
 
 export interface HelperTextProps extends TextProps {
   children?: React.ReactNode;

package/src/TextField/IconContainer.tsx

@@ -1,6 +1,7 @@
 import { rem } from 'polished';
-import { FC } from 'react';
-import type * as React from 'react';
+import type { FC } from 'react';
+import * as React from 'react';
+
 import { Box } from '../Box';
 import { alpha } from '../color';
 import { ICON_WIDTH, PADDING_LEFT_WITH_ICON } from './consts';

package/src/TextField/Input.tsx

@@ -1,6 +1,9 @@
 import { rem } from 'polished';
-import { InputHTMLAttributes, forwardRef } from 'react';
-import { Box, BoxProps } from '../Box';
+import type { InputHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { alpha } from '../color';
 import {
   ICON_WIDTH,
@@ -59,14 +62,16 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
         display: 'flex',
         alignItems: 'center',
         ...(!multiline && {
-          lineHeight: 1,
           overflow: 'hidden',
           whiteSpace: 'nowrap',
           textOverflow: 'ellipsis',
         }),
         '::placeholder': {
           opacity: 0,
-          color: alpha('on.surface', 0.54),
+          color:
+            variant === 'filled'
+              ? alpha('on.surface-variant', 0.87)
+              : alpha('on.surface-variant', 0.6),
           transition: `opacity .18s cubic-bezier(.4,0,.2,1)`,
         },
         ':disabled::placeholder': {

package/src/TextField/OutlinedContainer.tsx

@@ -5,11 +5,13 @@ import {
   useState,
   useRef,
 } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { NotchedOutline } from '../NotchedOutline';
-import { Box, BoxProps } from '../Box';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { FloatingLabel } from '../FloatingLabel';
-import { Theme } from '../theme';
+import type { Theme } from '../theme';
 import {
   ICON_WIDTH,
   PADDING_LEFT_WITHOUT_ICON,