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

package/src/Tab/Tab.tsx

@@ -1,6 +1,5 @@
 import type { ButtonHTMLAttributes } from 'react';
-import { forwardRef } from 'react';
-import * as React from 'react';
+import { useState, useEffect, useRef, forwardRef } from 'react';
 import type { TabProps as TabPropsCore } from '@basic-ui/core';
 import { Tab as TabCore } from '@basic-ui/core';
 import { rem } from 'polished';
@@ -14,20 +13,30 @@ import { TabIndicator } from '../TabIndicator';
 import { useTabListContext } from './context';
 
 export type TabProps = TabPropsCore &
-  RippleBoxProps<
-    HTMLButtonElement,
-    React.ButtonHTMLAttributes<HTMLButtonElement>
-  >;
+  RippleBoxProps<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>;
 
 const TabInner = forwardRef<
   HTMLButtonElement,
   TabProps & { selected?: boolean }
 >(function Tab(props, forwardedRef) {
   const { innerAs, selected, children, disabled, ...otherProps } = props;
-  const { textColor, indicatorColor, selectedTextColor } = useTabListContext();
+  const { textColor, indicatorColor, selectedTextColor, variant } =
+    useTabListContext();
+  const labelRef = useRef<HTMLParagraphElement>(null);
+
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   return (
-    <Box position="relative" display="flex" flex={1} flexDirection="column">
+    <Box
+      position="relative"
+      display="flex"
+      flex={1}
+      flexDirection="column"
+      height="100%"
+    >
       <RippleBox<
         RippleBoxProps<
           HTMLButtonElement,
@@ -40,11 +49,12 @@ const TabInner = forwardRef<
         disabled={disabled}
         __css={{
           px: 3,
-          position: 'relative',
+          py: 0,
           color: selected
             ? selectedTextColor || indicatorColor
             : alpha(textColor, disabled ? 0.37 : 0.7),
-          height: rem(48),
+          minHeight: rem(48),
+          height: '100%',
           backgroundColor: 'transparent',
           border: 'none',
           ':focus': {
@@ -57,15 +67,43 @@ const TabInner = forwardRef<
       >
         <Text
           as="span"
-          variant="button"
-          color="inherit"
-          height="100%"
-          textAlign="center"
+          variant="title-small"
+          ref={labelRef}
+          __css={{
+            display: 'inline-flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            color: 'inherit',
+            height: '100%',
+            textAlign: 'center',
+            position: 'relative',
+            flexDirection: 'column',
+            ...(variant === 'primary' &&
+              selected &&
+              !mounted && {
+                '&::before': {
+                  content: '""',
+                  bg: indicatorColor,
+                  position: 'absolute',
+                  bottom: 0,
+                  zIndex: 1,
+                  width: '100%',
+                  height: rem(3),
+                  borderTopLeftRadius: rem(3),
+                  borderTopRightRadius: rem(3),
+                },
+              }),
+          }}
         >
           {children}
         </Text>
       </RippleBox>
-      <TabIndicator selected={selected} color={indicatorColor} />
+      <TabIndicator
+        selected={selected}
+        color={indicatorColor}
+        variant={variant}
+        labelRef={labelRef}
+      />
     </Box>
   );
 });

package/src/Tab/TabList.tsx

@@ -13,6 +13,7 @@ export type TabListProps = TabListPropsCore &
     indicatorColor?: string;
     textColor?: string;
     selectedTextColor?: string;
+    variant?: 'primary' | 'secondary';
   };
 
 const TabListInner = forwardRef<HTMLDivElement, TabListProps>(
@@ -37,12 +38,15 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
       indicatorColor = 'primary',
       textColor = 'on.surface',
       selectedTextColor,
+      variant = 'secondary',
       ...otherProps
     } = props;
     const currentIndicator = useRef<HTMLSpanElement>(null);
 
     return (
-      <TabListProvider value={{ indicatorColor, textColor, selectedTextColor }}>
+      <TabListProvider
+        value={{ indicatorColor, textColor, selectedTextColor, variant }}
+      >
         <TabIndicatorProvider value={{ currentIndicator }}>
           <TabListCore
             as={TabListInner}

package/src/Tab/context.ts

@@ -5,11 +5,13 @@ export interface TabListContextProps {
   indicatorColor: string;
   textColor: string;
   selectedTextColor?: string;
+  variant: 'primary' | 'secondary';
 }
 
 const TabListContext = createContext<TabListContextProps>({
   indicatorColor: 'primary',
   textColor: 'on.surface',
+  variant: 'secondary',
 });
 export const { Provider: TabListProvider } = TabListContext;
 export const useTabListContext = () => useContext(TabListContext);

package/src/TabIndicator/TabIndicator.tsx

@@ -1,3 +1,4 @@
+import type { RefObject } from 'react';
 import { forwardRef, useEffect, useRef, useLayoutEffect } from 'react';
 import { rem } from 'polished';
 import { assignMultipleRefs } from '@basic-ui/core';
@@ -5,20 +6,34 @@ import { assignMultipleRefs } from '@basic-ui/core';
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
 import { useTabIndicatorContext } from './context';
+import { EASING_STANDARD } from '../motion';
 
 export interface TabIndicatorProps extends BoxProps {
   selected?: boolean;
   color?: string;
+  variant: 'primary' | 'secondary';
+  labelRef: RefObject<HTMLParagraphElement | null>;
 }
 
+const WIDTH_PROPERTY_NAME = '--indicator-width';
+const SCALE_PROPERTY_NAME = '--indicator-scale';
+
 const useEnhancedEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
 export const TabIndicator = forwardRef<HTMLDivElement, TabIndicatorProps>(
   function TabIndicator(props, forwardedRef) {
-    const { as = 'span', selected, color = 'primary', ...otherProps } = props;
+    const {
+      as = 'span',
+      selected,
+      color = 'primary',
+      variant,
+      labelRef,
+      ...otherProps
+    } = props;
     const ref = useRef<HTMLSpanElement>(null);
     const { currentIndicator } = useTabIndicatorContext();
+    const resizeObserverRef = useRef<ResizeObserver>();
 
     useEnhancedEffect(() => {
       if (selected && ref.current) {
@@ -27,13 +42,28 @@ export const TabIndicator = forwardRef<HTMLDivElement, TabIndicatorProps>(
           const previousClientRect =
             currentIndicator.current.getBoundingClientRect();
           const currentClientRect = ref.current.getBoundingClientRect();
-          const widthDelta = previousClientRect.width / currentClientRect.width;
           const xPosition = previousClientRect.left - currentClientRect.left;
 
           const prevTransition = ref.current.style.transition;
           const prevTransform = ref.current.style.transform;
           ref.current.style.transition = 'none';
-          ref.current.style.transform = `translateX(${xPosition}px) scaleX(${widthDelta})`;
+          if (variant === 'primary') {
+            const prevWidth =
+              currentIndicator.current.style.getPropertyValue(
+                WIDTH_PROPERTY_NAME
+              );
+            const currentWidth =
+              ref.current.style.getPropertyValue(WIDTH_PROPERTY_NAME);
+            const widthDelta = String(
+              parseFloat(prevWidth) / parseFloat(currentWidth)
+            );
+            ref.current.style.setProperty(SCALE_PROPERTY_NAME, widthDelta);
+            ref.current.style.transform = `translateX(${xPosition}px)`;
+          } else {
+            const widthDelta =
+              previousClientRect.width / currentClientRect.width;
+            ref.current.style.transform = `translateX(${xPosition}px) scaleX(${widthDelta})`;
+          }
 
           // Force repaint before updating classes and transform to ensure the transform properly takes effect
           ref.current.getBoundingClientRect();
@@ -41,26 +71,73 @@ export const TabIndicator = forwardRef<HTMLDivElement, TabIndicatorProps>(
           // Restore and let transition do it's magic
           ref.current.style.transition = prevTransition;
           ref.current.style.transform = prevTransform;
+          if (variant === 'primary') {
+            ref.current.style.setProperty(SCALE_PROPERTY_NAME, '1');
+          }
         }
         currentIndicator.current = ref.current;
       }
-    }, [selected]);
+    }, [selected, variant]);
+
+    useEnhancedEffect(() => {
+      if (variant === 'secondary') {
+        return;
+      }
+
+      if (labelRef.current && ref.current) {
+        const width = labelRef.current.getBoundingClientRect().width;
+        ref.current.style.setProperty(WIDTH_PROPERTY_NAME, `${width}px`);
+
+        if (typeof ResizeObserver === 'function') {
+          resizeObserverRef.current ??= new ResizeObserver(([entry]) => {
+            if (ref.current) {
+              ref.current.style.setProperty(
+                WIDTH_PROPERTY_NAME,
+                `${entry.contentRect.width}px`
+              );
+            }
+          });
+
+          resizeObserverRef.current?.observe(labelRef.current);
+          return () => resizeObserverRef.current?.disconnect();
+        }
+      }
+    }, [labelRef, variant]);
 
     return (
       <Box
         as={as}
         ref={assignMultipleRefs(ref, forwardedRef)}
-        width="100%"
-        height={rem(2)}
         __css={{
           bg: color,
           position: 'absolute',
           bottom: 0,
           transform: `scale(1)`,
           opacity: selected ? 1 : 0,
-          transformOrigin: 'left',
-          transition: 'transform .25s cubic-bezier(.4,0,.2,1)',
+          transition: `transform .25s ${EASING_STANDARD}`,
           zIndex: 1,
+          ...(variant === 'secondary'
+            ? {
+                width: '100%',
+                height: rem(2),
+              }
+            : {
+                width: '100%',
+                '&::before': {
+                  content: '""',
+                  width: `var(${WIDTH_PROPERTY_NAME}, 0px)`,
+                  height: rem(3),
+                  borderTopLeftRadius: rem(3),
+                  borderTopRightRadius: rem(3),
+                  bg: color,
+                  position: 'absolute',
+                  transformOrigin: 'center',
+                  bottom: 0,
+                  left: '50%',
+                  transition: `inherit`,
+                  transform: `translateX(-50%) scaleX(var(${SCALE_PROPERTY_NAME}, 1))}`,
+                },
+              }),
         }}
         {...otherProps}
       />

package/src/TabIndicator/context.ts

@@ -1,8 +1,9 @@
+import type { MutableRefObject } from 'react';
 import { createContext, useContext } from 'react';
 
 // TabIndicator Component
 export interface TabIndicatorContextProps {
-  currentIndicator: React.MutableRefObject<HTMLSpanElement | null>;
+  currentIndicator: MutableRefObject<HTMLSpanElement | null>;
 }
 
 const TabIndicatorContext = createContext<TabIndicatorContextProps>({

package/src/Table/Table.tsx

@@ -1,3 +1,4 @@
+import { rem } from 'polished';
 import { forwardRef } from 'react';
 
 import type { PaperProps } from '../Paper';
@@ -6,7 +7,7 @@ import { Paper } from '../Paper';
 export type TableProps = PaperProps;
 
 export const Table = forwardRef<HTMLDivElement, TableProps>((props, ref) => {
-  const { children, elevation = 1, ...rest } = props;
+  const { children, elevation = 0, __css, ...rest } = props;
 
   return (
     <Paper
@@ -17,6 +18,14 @@ export const Table = forwardRef<HTMLDivElement, TableProps>((props, ref) => {
       flexDirection="column"
       elevation={elevation}
       darkThemeBackgroundOverlay={elevation}
+      borderRadius="extra-large"
+      __css={{
+        borderColor: 'surface-variant',
+        borderWidth: rem(2),
+        borderStyle: 'solid',
+        overflowX: 'auto',
+        ...__css,
+      }}
       {...rest}
     >
       {children}

package/src/Table/TableHead.tsx

@@ -4,7 +4,7 @@ import { rem } from 'polished';
 import { TableHeadProvider } from './context';
 import type { TableBodyProps } from './TableBody';
 import { TableBody } from './TableBody';
-import { alpha } from '../color';
+import { mixColor } from '../color';
 
 export type TableHeadProps = TableBodyProps;
 
@@ -18,7 +18,8 @@ export const TableHead = forwardRef<HTMLDivElement, TableHeadProps>(
         __css={{
           borderBottomStyle: 'solid',
           borderBottomWidth: rem(1),
-          borderBottomColor: alpha('on.surface', 0.12),
+          borderBottomColor: 'surface-variant',
+          background: mixColor('surface', 'primary', 0.05),
           ...__css,
         }}
         {...rest}

package/src/Table/TableRow.tsx

@@ -3,7 +3,6 @@ import { rem } from 'polished';
 
 import type { TextProps } from '../Text';
 import { Text } from '../Text';
-import { alpha } from '../color';
 
 export type TableRowProps = TextProps;
 
@@ -19,12 +18,12 @@ export const TableRow = forwardRef<HTMLDivElement, TableRowProps>(
         display="flex"
         flexDirection="row"
         width="100%"
-        variant="body1"
+        variant="body-medium"
         px={2}
         __css={{
           borderBottomStyle: 'solid',
           borderBottomWidth: rem(1),
-          borderBottomColor: alpha('on.surface', 0.12),
+          borderBottomColor: 'surface-variant',
           '&:last-of-type': {
             borderBottom: 'none',
           },

package/src/Text/LoremIpsum.tsx

@@ -9,7 +9,7 @@ export const LoremIpsum: FC<{ count: number }> = ({ count = 50 }) => {
   const phrases = [];
   for (let i = 0; i < count; i++) {
     phrases.push(
-      <Text variant="body1" key={`p-${i}`} m={'1.2em'}>
+      <Text variant="body-medium" key={`p-${i}`} m={'1.2em'}>
         {phrase}
       </Text>
     );

package/src/Text/Text.story.tsx

@@ -6,7 +6,46 @@ export default {
   title: 'components/Text',
 };
 
+const loremIpsum =
+  'Lorem ipsum dolor sit amet consectetur adipisicing elit.' +
+  'Cupiditate aliquid ad quas sunt voluptatum officia dolorum cumque,' +
+  'possimus nihil molestias sapiente necessitatibus dolor saepe inventore,' +
+  'soluta id accusantium voluptas beatae.';
+
 const Example = () => {
+  const variantMapping = {
+    'display-large': 'Display large',
+    'display-medium': 'Display medium',
+    'display-small': 'Display small',
+    'headline-large': 'Headline large',
+    'headline-medium': 'Headline medium',
+    'headline-small': 'Headline small',
+    'title-large': 'Title large',
+    'title-medium': 'Title medium',
+    'title-small': 'Title small',
+    'label-large': 'Label large',
+    'label-medium': 'Label medium',
+    'label-small': 'Label small',
+    'body-large': `Body large. ${loremIpsum}`,
+    'body-medium': `Body medium. ${loremIpsum}`,
+    'body-small': `Body small. ${loremIpsum}`,
+  };
+  const variants = Object.keys(variantMapping).map((v) => (
+    <Text key={v} variant={v as keyof typeof variantMapping} mb={2}>
+      {variantMapping[v]}
+    </Text>
+  ));
+
+  return (
+    <Box bg="surface" p="2">
+      {variants}
+    </Box>
+  );
+};
+
+export const AllVariants = () => <Example />;
+
+export const LegacyVariants = () => {
   const variantMapping = {
     h1: 'Heading 1',
     h2: 'Heading 2',
@@ -16,16 +55,14 @@ const Example = () => {
     h6: 'Heading 6',
     subtitle1: 'Subtitle 1',
     subtitle2: 'Subtitle 2',
-    body1:
-      'Body 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.',
-    body2:
-      'Body 2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate aliquid ad quas sunt voluptatum officia dolorum cumque, possimus nihil molestias sapiente necessitatibus dolor saepe inventore, soluta id accusantium voluptas beatae.',
+    body1: `Body 1. ${loremIpsum}`,
+    body2: `Body 2. ${loremIpsum}`,
     button: 'Button text',
     caption: 'Caption text',
     overline: 'Overline text',
   };
   const variants = Object.keys(variantMapping).map((v) => (
-    <Text key={v} variant={v} mb={2}>
+    <Text key={v} variant={v as keyof typeof variantMapping} mb={2}>
       {variantMapping[v]}
     </Text>
   ));
@@ -36,5 +73,3 @@ const Example = () => {
     </Box>
   );
 };
-
-export const AllVariants = () => <Example />;

package/src/Text/Text.tsx

@@ -1,10 +1,13 @@
+import type { ElementType } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
 
-export type TextVariants =
+/**
+ * @deprecated
+ */
+export type LegacyTextVariants =
   | 'h1'
   | 'h2'
   | 'h3'
@@ -19,11 +22,28 @@ export type TextVariants =
   | 'overline'
   | 'button';
 
+export type TextVariants =
+  | 'display-large'
+  | 'display-medium'
+  | 'display-small'
+  | 'headline-large'
+  | 'headline-medium'
+  | 'headline-small'
+  | 'title-large'
+  | 'title-medium'
+  | 'title-small'
+  | 'label-large'
+  | 'label-medium'
+  | 'label-small'
+  | 'body-large'
+  | 'body-medium'
+  | 'body-small';
+
 export interface TextProps extends BoxProps {
-  variant?: TextVariants;
+  variant?: LegacyTextVariants | TextVariants;
 }
 
-const mappings: { [key: string]: React.ElementType<any> } = {
+const mappings: { [key: string]: ElementType<any> } = {
   h1: 'h1',
   h2: 'h2',
   h3: 'h3',
@@ -43,7 +63,7 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>(function Text(
   props,
   forwardedRef
 ) {
-  const { as, variant = 'body1', ...otherProps } = props;
+  const { as, variant = 'body-medium', ...otherProps } = props;
   let Comp = as;
   if (!Comp) {
     Comp = mappings[variant] || 'p';

package/src/TextField/FilledContainer.tsx

@@ -1,5 +1,5 @@
+import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { get } from '@styled-system/css';
 import { rem } from 'polished';
 
@@ -24,9 +24,10 @@ const makeSelector = (
   `input:${state} ~ &,` +
   `select:${state} ~ &,` +
   `button:${state} ~ &,` +
-  `textarea:${state} ~ &`;
+  `textarea:${state} ~ &,` +
+  `[role="button"]:${state} ~ &`;
 
-const Overlay = (props: { forceActive?: boolean }) => {
+export const FilledContainerOverlay = (props: { forceActive?: boolean }) => {
   const { forceActive } = props;
   const theme = useTheme();
 
@@ -60,7 +61,7 @@ const Overlay = (props: { forceActive?: boolean }) => {
   );
 };
 
-const BorderBottom = () => (
+const FilledContainerBorderBottom = () => (
   <Box
     __css={{
       position: 'absolute',
@@ -78,10 +79,10 @@ const BorderBottom = () => (
 );
 
 export interface FilledContainerProps extends Omit<BoxProps, 'color'> {
-  children?: React.ReactNode;
+  children?: ReactNode;
   color?: string;
   hasFocus?: boolean;
-  label?: React.ReactNode;
+  label?: ReactNode;
   labelIsFloating: boolean;
   inputId: string;
   error?: boolean;
@@ -163,8 +164,8 @@ export const FilledContainer = forwardRef<HTMLDivElement, FilledContainerProps>(
 
         {children}
 
-        <Overlay forceActive={active} />
-        <BorderBottom />
+        <FilledContainerOverlay forceActive={active} />
+        <FilledContainerBorderBottom />
         <LineRipple active={active || error} color={color} />
       </Box>
     );

package/src/TextField/HelperText.tsx

@@ -1,5 +1,5 @@
+import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 import { Box } from '../Box';
 import { Text } from '../Text';
@@ -7,9 +7,9 @@ import { alpha } from '../color';
 import type { TextProps } from '../Text/Text';
 
 export interface HelperTextProps extends TextProps {
-  children?: React.ReactNode;
-  leftSide?: React.ReactNode;
-  rightSide?: React.ReactNode;
+  children?: ReactNode;
+  leftSide?: ReactNode;
+  rightSide?: ReactNode;
   error?: boolean;
   disabled?: boolean;
 }
@@ -46,7 +46,7 @@ export const HelperText = forwardRef<HTMLDivElement, HelperTextProps>(
         display="flex"
         pt={1}
         color={color}
-        variant="caption"
+        variant="label-small"
         ref={forwardedRef}
         lineHeight="normal"
         __css={{

package/src/TextField/IconContainer.tsx

@@ -1,13 +1,12 @@
 import { rem } from 'polished';
-import type { FC } from 'react';
-import * as React from 'react';
+import type { FC, ReactNode } from 'react';
 
 import { Box } from '../Box';
 import { alpha } from '../color';
 import { ICON_WIDTH, PADDING_LEFT_WITH_ICON } from './consts';
 
 export const IconContainer: FC<{
-  children?: React.ReactNode;
+  children?: ReactNode;
   position: 'start' | 'end';
 }> = ({ position, children }) => (
   <Box

package/src/TextField/Input.tsx

@@ -1,10 +1,11 @@
 import { rem } from 'polished';
-import type { InputHTMLAttributes } from 'react';
+import type { InputHTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
 
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
 import { alpha } from '../color';
+import { EASING_STANDARD } from '../motion';
 import {
   ICON_WIDTH,
   PADDING_LEFT_WITHOUT_ICON,
@@ -19,8 +20,8 @@ export interface InputProps
   multiline?: boolean;
   variant?: 'filled' | 'outlined';
   hasLabel?: boolean;
-  leadingIcon?: React.ReactNode;
-  trailingIcon?: React.ReactNode;
+  leadingIcon?: ReactNode;
+  trailingIcon?: ReactNode;
 }
 
 export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
@@ -72,7 +73,7 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
             variant === 'filled'
               ? alpha('on.surface-variant', 0.87)
               : alpha('on.surface-variant', 0.6),
-          transition: `opacity .18s cubic-bezier(.4,0,.2,1)`,
+          transition: `opacity .18s ${EASING_STANDARD}`,
         },
         ':disabled::placeholder': {
           color: alpha('on.surface', 0.38),