@basic-ui/material 1.0.0-alpha.0 → 1.0.0-alpha.11

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,8 +1,13 @@
+import type { ElementType } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Box, BoxProps } from '../Box';
 
-export type TextVariants =
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+
+/**
+ * @deprecated
+ */
+export type LegacyTextVariants =
   | 'h1'
   | 'h2'
   | 'h3'
@@ -17,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',
@@ -41,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,12 +1,14 @@
+import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
-import type * 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,
@@ -76,10 +78,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;

package/src/TextField/HelperText.tsx

@@ -1,14 +1,15 @@
+import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
-import type * 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;
-  leftSide?: React.ReactNode;
-  rightSide?: React.ReactNode;
+  children?: ReactNode;
+  leftSide?: ReactNode;
+  rightSide?: ReactNode;
   error?: boolean;
   disabled?: boolean;
 }
@@ -45,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,12 +1,12 @@
 import { rem } from 'polished';
-import { FC } from 'react';
-import type * 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,7 +1,11 @@
 import { rem } from 'polished';
-import { InputHTMLAttributes, forwardRef } from 'react';
-import { Box, BoxProps } from '../Box';
+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,
@@ -16,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(
@@ -59,7 +63,6 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
         display: 'flex',
         alignItems: 'center',
         ...(!multiline && {
-          lineHeight: 1,
           overflow: 'hidden',
           whiteSpace: 'nowrap',
           textOverflow: 'ellipsis',
@@ -70,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),

package/src/TextField/OutlinedContainer.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import {
   forwardRef,
   useEffect,
@@ -5,11 +6,12 @@ import {
   useState,
   useRef,
 } from 'react';
-import type * 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,
@@ -20,8 +22,8 @@ const useEnhancedEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
 export interface OutlinedContainerProps extends BoxProps {
-  children?: React.ReactNode;
-  label?: React.ReactNode;
+  children?: ReactNode;
+  label?: ReactNode;
   color?: string;
   error?: boolean;
   theme: Theme;

package/src/TextField/TextField.story.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { Box } from '../Box';
 import { CheckBox } from '../CheckBox';
 import { Select, SelectItem } from '../';

package/src/TextField/TextField.tsx

@@ -1,12 +1,15 @@
+import type { ReactNode } from 'react';
 import { forwardRef, useState, useId } from 'react';
-import type * as React from 'react';
 import { wrapEvent, useControlledState } from '@basic-ui/core';
-import { Input, InputProps } from './Input';
+
+import type { InputProps } from './Input';
+import { Input } from './Input';
 import { useTheme } from '../theme';
 import { FilledContainer } from './FilledContainer';
 import { OutlinedContainer } from './OutlinedContainer';
 import { HelperText } from './HelperText';
-import { Box, BoxProps } from '../Box';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { IconContainer } from './IconContainer';
 
 const componentMap = {
@@ -29,7 +32,7 @@ export type TextFieldProps = Omit<InputProps, 'value' | 'defaultValue'> & {
   variant?: 'outlined' | 'filled';
   containerProps?: Omit<BoxProps, 'color'>;
   color?: 'primary' | 'secondary';
-  label?: React.ReactNode;
+  label?: ReactNode;
   helperText?: string;
   maxLength?: number;
   hideCharacterCounter?: boolean;
@@ -37,8 +40,8 @@ export type TextFieldProps = Omit<InputProps, 'value' | 'defaultValue'> & {
   value?: string;
   multiline?: boolean;
   error?: boolean | string;
-  leadingIcon?: React.ReactNode;
-  trailingIcon?: React.ReactNode;
+  leadingIcon?: ReactNode;
+  trailingIcon?: ReactNode;
 };
 
 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(

package/src/ThemeExplorer/ColorPicker.tsx

@@ -1,18 +1,22 @@
-import {
+import type {
   Color,
-  ColorPicker as _BaseColorPicker,
-  Hue as _Hue,
-  HueCursor as _HueCursor,
-  Saturation as _Saturation,
-  SaturationCursor as _SaturationCursor,
   ColorPickerProps as BaseColorPickerProps,
   HueProps,
   HueCursorProps,
   SaturationProps,
   SaturationCursorProps,
 } from '@basic-ui/color-picker';
-import { Box, BoxProps } from '../Box';
-import { VFC } from 'react';
+import {
+  ColorPicker as _BaseColorPicker,
+  Hue as _Hue,
+  HueCursor as _HueCursor,
+  Saturation as _Saturation,
+  SaturationCursor as _SaturationCursor,
+} from '@basic-ui/color-picker';
+import type { FC } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export type ColorPickerProps = (Omit<BoxProps, 'color' | 'onChange'> &
   BaseColorPickerProps) & {
@@ -20,17 +24,16 @@ export type ColorPickerProps = (Omit<BoxProps, 'color' | 'onChange'> &
   onChange: (color: Color) => void;
 };
 
-const BaseColorPicker: VFC<
+const BaseColorPicker: FC<
   Omit<BoxProps, 'color' | 'onChange'> & BaseColorPickerProps
 > = _BaseColorPicker as any;
-const Hue: VFC<BoxProps & HueProps> = _Hue as any;
-const HueCursor: VFC<BoxProps & HueCursorProps> = _HueCursor as any;
-const Saturation: VFC<BoxProps & SaturationProps> = _Saturation as any;
-const SaturationCursor: VFC<
-  BoxProps & SaturationCursorProps
-> = _SaturationCursor as any;
+const Hue: FC<BoxProps & HueProps> = _Hue as any;
+const HueCursor: FC<BoxProps & HueCursorProps> = _HueCursor as any;
+const Saturation: FC<BoxProps & SaturationProps> = _Saturation as any;
+const SaturationCursor: FC<BoxProps & SaturationCursorProps> =
+  _SaturationCursor as any;
 
-export const ColorPicker: VFC<ColorPickerProps> = ({
+export const ColorPicker: FC<ColorPickerProps> = ({
   color,
   onChange,
   width = 450,

package/src/ThemeExplorer/TextFieldColorPicker.tsx

@@ -1,7 +1,10 @@
-import { Color, toColor } from '@basic-ui/color-picker';
+import type { Color } from '@basic-ui/color-picker';
+import { toColor } from '@basic-ui/color-picker';
 import { Popper, useControlledState, useOnClickOutside } from '@basic-ui/core';
-import { alpha, Box, TextField, Button, TextFieldProps } from '../';
 import { useRef, useState, memo, useCallback } from 'react';
+
+import type { TextFieldProps } from '../';
+import { alpha, Box, TextField, Button } from '../';
 import { ColorPicker } from './ColorPicker';
 
 export interface TextFieldColorPickerProps

package/src/ThemeExplorer/ThemeBuilder.story.tsx

@@ -1,169 +1,7 @@
-import React, { useMemo, useDeferredValue, useEffect } from 'react';
-import { Box } from '..';
-import {
-  CorePalette,
-  argbFromHex,
-  hexFromArgb,
-} from '@material/material-color-utilities';
-import { toColor, Color } from '@basic-ui/color-picker';
-import { TonalColors } from './components';
-import { TextFieldColorPicker } from './TextFieldColorPicker';
-import { ThemeColors } from './ThemeColors';
-import { makeColorScheme } from './makeColorScheme';
-import { theme } from '../theme';
-import { Text } from '../Text';
-import { Button } from '../Button';
-import { useLocalStorageCachedState } from './useLocalStorageCachedState';
-import { useDeferredColor } from './useDeferredColor';
+import { ThemeBuilder } from './ThemeBuilder';
 
 export default {
   title: 'components/ThemeExplorer',
 };
 
-const ThemeBuilder = () => {
-  const [primaryColor, setPrimaryColor] = useLocalStorageCachedState<Color>(
-    'primary',
-    toColor('hex', theme.colors.primary)
-  );
-  const deferredPrimaryColor = useDeferredValue(primaryColor);
-
-  const { a1, a2, a3, error, n1, n2 } = useMemo(
-    () => CorePalette.of(argbFromHex(deferredPrimaryColor.hex)),
-    [deferredPrimaryColor.hex]
-  );
-
-  const [
-    secondaryColor,
-    secondaryColorTonal,
-    setSecondaryColor,
-  ] = useDeferredColor('secondary', a2);
-  const [
-    tertiaryColor,
-    tertiaryColorTonal,
-    setTertiaryColor,
-  ] = useDeferredColor('tertiary', a3);
-  const [neutralColor, neutralColorTonal, setNeutralColor] = useDeferredColor(
-    'neutral',
-    n1
-  );
-
-  const scheme = useMemo(
-    () =>
-      makeColorScheme({
-        primary: a1,
-        secondary: secondaryColorTonal,
-        tertiary: tertiaryColorTonal,
-        error: error,
-        neutral: neutralColorTonal,
-        neutralVariant: n2,
-      }),
-    [a1, secondaryColorTonal, tertiaryColorTonal, error, neutralColorTonal, n2]
-  );
-
-  useEffect(() => {
-    localStorage.setItem('theme-builder.themeOverride', JSON.stringify(scheme));
-  }, [scheme]);
-
-  return (
-    <Box display="flex">
-      <Box
-        display="flex"
-        my={3}
-        sx={{ gap: 3 }}
-        flexDirection="column"
-        width="300px"
-      >
-        <Box display="flex">
-          <TextFieldColorPicker
-            label="Primary color"
-            value={primaryColor}
-            onChange={(c) => setPrimaryColor(c)}
-          />
-          <Button variant="text" disabled={true}>
-            Reset
-          </Button>
-        </Box>
-        <Box display="flex">
-          <TextFieldColorPicker
-            label="Secondary color"
-            value={
-              secondaryColor ||
-              toColor('hex', hexFromArgb(secondaryColorTonal.tone(40)))
-            }
-            onChange={(c) => setSecondaryColor(c)}
-          />
-          <Button
-            variant="text"
-            onClick={() => setSecondaryColor(null)}
-            disabled={secondaryColor === null}
-          >
-            Reset
-          </Button>
-        </Box>
-        <Box display="flex">
-          <TextFieldColorPicker
-            label="Tertiary color"
-            value={
-              tertiaryColor ||
-              toColor('hex', hexFromArgb(tertiaryColorTonal.tone(40)))
-            }
-            onChange={(c) => setTertiaryColor(c)}
-          />
-          <Button
-            variant="text"
-            onClick={() => setTertiaryColor(null)}
-            disabled={tertiaryColor === null}
-          >
-            Reset
-          </Button>
-        </Box>
-        <Box display="flex">
-          <TextFieldColorPicker
-            label="Neutral color"
-            value={
-              neutralColor ||
-              toColor('hex', hexFromArgb(neutralColorTonal.tone(40)))
-            }
-            onChange={(c) => setNeutralColor(c)}
-          />
-          <Button
-            variant="text"
-            onClick={() => setNeutralColor(null)}
-            disabled={neutralColor === null}
-          >
-            Reset
-          </Button>
-        </Box>
-      </Box>
-      <Box width="600px" mx="auto">
-        <Box display="flex" flexDirection="column" sx={{ gap: 4 }}>
-          <Box flex="1">
-            <Text variant="h5" as="h1" pb={'0.3em'}>
-              Light theme
-            </Text>
-            <ThemeColors scheme={scheme} />
-          </Box>
-          <Box flex="1">
-            <Text variant="h5" as="h1" pb={'0.3em'}>
-              Dark theme
-            </Text>
-            <ThemeColors scheme={scheme.modes.dark} />
-          </Box>
-        </Box>
-        <Box my={4} display="flex" sx={{ gap: 3 }} flexDirection="column">
-          <TonalColors palette={a1} />
-          <TonalColors palette={secondaryColorTonal} />
-          <TonalColors palette={tertiaryColorTonal} />
-          <TonalColors palette={error} />
-          <TonalColors palette={neutralColorTonal} />
-          <TonalColors palette={n2} />
-        </Box>
-        <Box as="pre" fontFamily="monospace" fontSize="12px">
-          {JSON.stringify({ colors: scheme }, null, 2)}
-        </Box>
-      </Box>
-    </Box>
-  );
-};
-
 export const Builder = () => <ThemeBuilder />;