@basic-ui/material 1.0.0-alpha.5 → 1.0.0-alpha.50

package/src/Tab/Tabs.tsx

@@ -1,5 +1,5 @@
-import { Tabs } from '@basic-ui/core';
-import type { TabsProps } from '@basic-ui/core';
-
-export { Tabs };
-export type { TabsProps };
+import { Tabs } from '@basic-ui/core';
+import type { TabsProps } from '@basic-ui/core';
+
+export { Tabs };
+export type { TabsProps };

package/src/Tab/context.ts

@@ -1,15 +1,17 @@
-import { createContext, useContext } from 'react';
-
-// TabList Component
-export interface TabListContextProps {
-  indicatorColor: string;
-  textColor: string;
-  selectedTextColor?: string;
-}
-
-const TabListContext = createContext<TabListContextProps>({
-  indicatorColor: 'primary',
-  textColor: 'on.surface',
-});
-export const { Provider: TabListProvider } = TabListContext;
-export const useTabListContext = () => useContext(TabListContext);
+import { createContext, useContext } from 'react';
+
+// TabList Component
+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/Tab/index.ts

@@ -1,5 +1,5 @@
-export * from './Tabs';
-export * from './TabList';
-export * from './Tab';
-export * from './TabPanels';
-export * from './TabPanel';
+export * from './Tabs';
+export * from './TabList';
+export * from './Tab';
+export * from './TabPanels';
+export * from './TabPanel';

package/src/TabIndicator/TabIndicator.tsx

@@ -1,69 +1,146 @@
-import { forwardRef, useEffect, useRef, useLayoutEffect } from 'react';
-import { rem } from 'polished';
-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;
-}
-
-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 ref = useRef<HTMLSpanElement>(null);
-    const { currentIndicator } = useTabIndicatorContext();
-
-    useEnhancedEffect(() => {
-      if (selected && ref.current) {
-        if (currentIndicator.current !== null) {
-          // We are switching indicator, let's slide!
-          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})`;
-
-          // Force repaint before updating classes and transform to ensure the transform properly takes effect
-          ref.current.getBoundingClientRect();
-
-          // Restore and let transition do it's magic
-          ref.current.style.transition = prevTransition;
-          ref.current.style.transform = prevTransform;
-        }
-        currentIndicator.current = ref.current;
-      }
-    }, [selected]);
-
-    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)',
-          zIndex: 1,
-        }}
-        {...otherProps}
-      />
-    );
-  }
-);
+import type { RefObject } from 'react';
+import { forwardRef, useEffect, useRef, useLayoutEffect } from 'react';
+import { rem } from 'polished';
+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',
+      variant,
+      labelRef,
+      ...otherProps
+    } = props;
+    const ref = useRef<HTMLSpanElement>(null);
+    const { currentIndicator } = useTabIndicatorContext();
+    const resizeObserverRef = useRef<ResizeObserver>();
+
+    useEnhancedEffect(() => {
+      if (selected && ref.current) {
+        if (currentIndicator.current !== null) {
+          // We are switching indicator, let's slide!
+          const previousClientRect =
+            currentIndicator.current.getBoundingClientRect();
+          const currentClientRect = ref.current.getBoundingClientRect();
+          const xPosition = previousClientRect.left - currentClientRect.left;
+
+          const prevTransition = ref.current.style.transition;
+          const prevTransform = ref.current.style.transform;
+          ref.current.style.transition = 'none';
+          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();
+
+          // 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, 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)}
+        __css={{
+          bg: color,
+          position: 'absolute',
+          bottom: 0,
+          transform: `scale(1)`,
+          opacity: selected ? 1 : 0,
+          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,12 +1,13 @@
-import { createContext, useContext } from 'react';
-
-// TabIndicator Component
-export interface TabIndicatorContextProps {
-  currentIndicator: React.MutableRefObject<HTMLSpanElement | null>;
-}
-
-const TabIndicatorContext = createContext<TabIndicatorContextProps>({
-  currentIndicator: { current: null },
-});
-export const { Provider: TabIndicatorProvider } = TabIndicatorContext;
-export const useTabIndicatorContext = () => useContext(TabIndicatorContext);
+import type { MutableRefObject } from 'react';
+import { createContext, useContext } from 'react';
+
+// TabIndicator Component
+export interface TabIndicatorContextProps {
+  currentIndicator: MutableRefObject<HTMLSpanElement | null>;
+}
+
+const TabIndicatorContext = createContext<TabIndicatorContextProps>({
+  currentIndicator: { current: null },
+});
+export const { Provider: TabIndicatorProvider } = TabIndicatorContext;
+export const useTabIndicatorContext = () => useContext(TabIndicatorContext);

package/src/TabIndicator/index.ts

@@ -1,2 +1,2 @@
-export * from './TabIndicator';
-export * from './context';
+export * from './TabIndicator';
+export * from './context';

package/src/Table/Table.tsx

@@ -1,25 +1,28 @@
 import { forwardRef } from 'react';
 
 import type { PaperProps } from '../Paper';
-import { Paper } from '../Paper';
+import { Box } from '../Box';
 
 export type TableProps = PaperProps;
 
 export const Table = forwardRef<HTMLDivElement, TableProps>((props, ref) => {
-  const { children, elevation = 1, ...rest } = props;
+  const { children, __css, ...rest } = props;
 
   return (
-    <Paper
+    <Box
       ref={ref}
       role="table"
-      display="flex"
-      width="100%"
-      flexDirection="column"
-      elevation={elevation}
-      darkThemeBackgroundOverlay={elevation}
+      __css={{
+        display: 'flex',
+        width: '100%',
+        flexDirection: 'column',
+        borderRadius: 'small',
+        overflowX: 'auto',
+        ...__css,
+      }}
       {...rest}
     >
       {children}
-    </Paper>
+    </Box>
   );
 });

package/src/Table/TableCell.tsx

@@ -1,4 +1,5 @@
 import { forwardRef } from 'react';
+import { rem } from 'polished';
 
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
@@ -14,15 +15,17 @@ export const TableCell = forwardRef<HTMLDivElement, TableCellProps>(
     return (
       <Box
         ref={ref}
-        px={1}
-        py={3}
         role={isHeadCell ? 'columnheader' : 'cell'}
         __css={{
+          px: 1,
+          height: rem(36),
           whiteSpace: 'nowrap',
           overflow: 'hidden',
           textOverflow: 'ellipsis',
           fontWeight: isHeadCell ? 'medium' : undefined,
           color: 'on.surface',
+          display: 'flex',
+          alignItems: 'center',
           ...__css,
         }}
         {...rest}

package/src/Table/TableHead.tsx

@@ -4,7 +4,6 @@ import { rem } from 'polished';
 import { TableHeadProvider } from './context';
 import type { TableBodyProps } from './TableBody';
 import { TableBody } from './TableBody';
-import { alpha } from '../color';
 
 export type TableHeadProps = TableBodyProps;
 
@@ -18,7 +17,7 @@ export const TableHead = forwardRef<HTMLDivElement, TableHeadProps>(
         __css={{
           borderBottomStyle: 'solid',
           borderBottomWidth: rem(1),
-          borderBottomColor: alpha('on.surface', 0.12),
+          borderBottomColor: 'surface-variant',
           ...__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;
 
@@ -16,15 +15,15 @@ export const TableRow = forwardRef<HTMLDivElement, TableRowProps>(
         ref={ref}
         as="div"
         role="row"
-        display="flex"
-        flexDirection="row"
-        width="100%"
-        variant="body1"
+        variant="body-medium"
         px={2}
         __css={{
+          display: 'flex',
+          flexDirection: 'row',
+          width: '100%',
           borderBottomStyle: 'solid',
           borderBottomWidth: rem(1),
-          borderBottomColor: alpha('on.surface', 0.12),
+          borderBottomColor: 'surface-variant',
           '&:last-of-type': {
             borderBottom: 'none',
           },

package/src/Table/context.ts

@@ -1,6 +1,6 @@
-import { createContext, useContext } from 'react';
-
-// TableHead Component
-const TableHeadContext = createContext<boolean>(false);
-export const { Provider: TableHeadProvider } = TableHeadContext;
-export const useTableHeadContext = () => useContext(TableHeadContext);
+import { createContext, useContext } from 'react';
+
+// TableHead Component
+const TableHeadContext = createContext<boolean>(false);
+export const { Provider: TableHeadProvider } = TableHeadContext;
+export const useTableHeadContext = () => useContext(TableHeadContext);

package/src/Text/LoremIpsum.tsx

@@ -1,18 +1,18 @@
-import type { FC } from 'react';
-
-import { Text } from '.';
-
-const phrase =
-  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt sem ut tincidunt eleifend. Cras eget sem nisi. Mauris at orci pretium, auctor ex non, vestibulum mauris. Etiam at nisi eu enim volutpat semper. Phasellus interdum tincidunt eleifend. Suspendisse potenti. Nulla dapibus felis in purus tristique pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
-
-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'}>
-        {phrase}
-      </Text>
-    );
-  }
-  return <>{phrases}</>;
-};
+import type { FC } from 'react';
+
+import { Text } from '.';
+
+const phrase =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt sem ut tincidunt eleifend. Cras eget sem nisi. Mauris at orci pretium, auctor ex non, vestibulum mauris. Etiam at nisi eu enim volutpat semper. Phasellus interdum tincidunt eleifend. Suspendisse potenti. Nulla dapibus felis in purus tristique pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+
+export const LoremIpsum: FC<{ count: number }> = ({ count = 50 }) => {
+  const phrases = [];
+  for (let i = 0; i < count; i++) {
+    phrases.push(
+      <Text variant="body-medium" key={`p-${i}`} m={'1.2em'}>
+        {phrase}
+      </Text>
+    );
+  }
+  return <>{phrases}</>;
+};

package/src/Text/Text.story.tsx

@@ -1,40 +1,75 @@
-import { Text } from './';
-import { Box } from '../Box';
-// import './styles.css';
-
-export default {
-  title: 'components/Text',
-};
-
-const Example = () => {
-  const variantMapping = {
-    h1: 'Heading 1',
-    h2: 'Heading 2',
-    h3: 'Heading 3',
-    h4: 'Heading 4',
-    h5: 'Heading 5',
-    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.',
-    button: 'Button text',
-    caption: 'Caption text',
-    overline: 'Overline text',
-  };
-  const variants = Object.keys(variantMapping).map((v) => (
-    <Text key={v} variant={v} mb={2}>
-      {variantMapping[v]}
-    </Text>
-  ));
-
-  return (
-    <Box bg="surface" p="2">
-      {variants}
-    </Box>
-  );
-};
-
-export const AllVariants = () => <Example />;
+import { Text } from './';
+import { Box } from '../Box';
+// import './styles.css';
+
+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',
+    h3: 'Heading 3',
+    h4: 'Heading 4',
+    h5: 'Heading 5',
+    h6: 'Heading 6',
+    subtitle1: 'Subtitle 1',
+    subtitle2: 'Subtitle 2',
+    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 as keyof typeof variantMapping} mb={2}>
+      {variantMapping[v]}
+    </Text>
+  ));
+
+  return (
+    <Box bg="surface" p="2">
+      {variants}
+    </Box>
+  );
+};