@basic-ui/material 0.1.15 → 1.0.0-alpha.1

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,19 @@
 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,
+  PADDING_LEFT_WITH_ICON,
+} from './consts';
 
 const makeSelector = (
   state:
@@ -33,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`),
         },
@@ -99,7 +106,8 @@ export const FilledContainer = forwardRef<HTMLDivElement, FilledContainerProps>(
       ...otherProps
     } = props;
 
-    const labelHeight = 18;
+    const finalLabelHeight = 16;
+    const labelHeight = finalLabelHeight / 0.75;
     const inputHeight = 56;
 
     const color = error ? 'error' : colorProp;
@@ -112,25 +120,39 @@ export const FilledContainer = forwardRef<HTMLDivElement, FilledContainerProps>(
         active={active || error}
         __css={{
           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}
       >
         {label && (
           <FloatingLabel
-            height={labelHeight}
-            top={(inputHeight - labelHeight) * 0.5}
-            offsetX={leadingIcon ? 48 : 16}
+            height={inputHeight}
+            offsetX={
+              leadingIcon
+                ? PADDING_LEFT_WITH_ICON +
+                  ICON_WIDTH +
+                  PADDING_LEFT_WITHOUT_ICON
+                : PADDING_LEFT_WITHOUT_ICON
+            }
             translateX={0}
-            translateY={-labelHeight * 0.75}
+            translateY={
+              // To debug, delete these lines one by one to see it doing its work
+              -(inputHeight * 0.5) + // Put it at the top, crossing middle label
+              labelHeight * 0.75 * 0.5 + // Put it at position 0
+              8 // Add a 8px padding to the top
+            }
             active={labelIsFloating}
             htmlFor={inputId}
             color={active || error ? color : undefined}

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,10 +1,12 @@
 import { rem } from 'polished';
-import { VFC } 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';
 
-export const IconContainer: VFC<{
+export const IconContainer: FC<{
   children?: React.ReactNode;
   position: 'start' | 'end';
 }> = ({ position, children }) => (
@@ -12,8 +14,8 @@ export const IconContainer: VFC<{
     position="absolute"
     __css={{
       top: 0,
-      [position === 'start' ? 'left' : 'right']: 3,
-      minWidth: rem(24),
+      [position === 'start' ? 'left' : 'right']: rem(PADDING_LEFT_WITH_ICON),
+      minWidth: rem(ICON_WIDTH),
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',

package/src/TextField/Input.tsx

@@ -1,7 +1,17 @@
 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,
+  PADDING_LEFT_WITHOUT_ICON,
+  PADDING_LEFT_WITH_ICON,
+  PADDING_RIGHT_WITHOUT_ICON,
+  PADDING_RIGHT_WITH_ICON,
+} from './consts';
 
 export interface InputProps
   extends BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>> {
@@ -36,7 +46,6 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
       {...otherProps}
       __css={{
         WebkitTapHighlightColor: 'transparent',
-        boxSizing: 'border-box',
         appearance: 'none',
         outline: 'none',
         width: '100%',
@@ -50,9 +59,19 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
         color: alpha('on.surface', 0.87),
         letterSpacing: rem(0.5),
         textAlign: 'left',
+        display: 'flex',
+        alignItems: 'center',
+        ...(!multiline && {
+          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': {
@@ -64,7 +83,7 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
         ':disabled': {
           cursor: 'default',
         },
-        'select&,button&': {
+        'select&,[role="button"]&': {
           cursor: 'pointer',
         },
         'select&': {
@@ -73,20 +92,26 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
             color: 'on.surface',
           },
         },
-        paddingLeft: leadingIcon ? rem(18 + 30) : rem(16),
-        paddingRight: trailingIcon ? rem(18 + 30) : rem(16),
+        paddingLeft: leadingIcon
+          ? rem(PADDING_LEFT_WITH_ICON + ICON_WIDTH + PADDING_LEFT_WITHOUT_ICON)
+          : rem(PADDING_LEFT_WITHOUT_ICON),
+        paddingRight: trailingIcon
+          ? rem(
+              PADDING_RIGHT_WITH_ICON + ICON_WIDTH + PADDING_RIGHT_WITHOUT_ICON
+            )
+          : rem(PADDING_RIGHT_WITHOUT_ICON),
         ...(variant === 'outlined' && {
-          paddingTop: hasLabel ? rem(12) : rem(12),
-          paddingBottom: hasLabel ? rem(14) : rem(12),
+          paddingTop: rem(16),
+          paddingBottom: rem(16),
         }),
         ...(variant === 'filled' && {
-          paddingTop: hasLabel ? rem(20) : rem(12),
-          paddingBottom: hasLabel ? rem(6) : rem(12),
+          paddingTop: hasLabel ? rem(24) : rem(16),
+          paddingBottom: hasLabel ? rem(8) : rem(16),
         }),
         ...(multiline && {
           resize: 'vertical',
           paddingTop: 0,
-          marginTop: variant === 'outlined' || !hasLabel ? rem(12) : rem(20),
+          marginTop: variant === 'outlined' || !hasLabel ? rem(18) : rem(26),
         }),
         ...__css,
       }}

package/src/TextField/OutlinedContainer.tsx

@@ -5,11 +5,18 @@ 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,
+  PADDING_LEFT_WITH_ICON,
+} from './consts';
 
 const useEnhancedEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;
@@ -61,9 +68,10 @@ export const OutlinedContainer = forwardRef<
   }, [label]);
 
   const color = error ? 'error' : colorProp;
+  const inputHeight = 56;
 
   return (
-    <Box position="relative" {...otherProps}>
+    <Box position="relative" lineHeight={0} {...otherProps}>
       <NotchedOutline
         ref={forwardedRef}
         borderRadius={4}
@@ -76,9 +84,17 @@ export const OutlinedContainer = forwardRef<
         label={
           label && (
             <FloatingLabel
-              height={56}
-              offsetX={leadingIcon ? 48 : 16}
-              translateX={leadingIcon ? -32 : 0}
+              height={inputHeight}
+              offsetX={
+                leadingIcon
+                  ? PADDING_LEFT_WITH_ICON +
+                    ICON_WIDTH +
+                    PADDING_LEFT_WITHOUT_ICON
+                  : PADDING_LEFT_WITHOUT_ICON
+              }
+              translateX={
+                leadingIcon ? -(PADDING_LEFT_WITH_ICON + ICON_WIDTH) : 0
+              }
               active={forceActive || labelIsFloating}
               ref={labelRef}
               htmlFor={inputId}

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 '../';
@@ -10,6 +11,19 @@ export default {
   title: 'components/TextField',
 };
 
+const SearchIcon = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={24}
+    width={24}
+    viewBox="0 0 48 48"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M39.8 41.95 26.65 28.8q-1.5 1.3-3.5 2.025-2 .725-4.25.725-5.4 0-9.15-3.75T6 18.75q0-5.3 3.75-9.05 3.75-3.75 9.1-3.75 5.3 0 9.025 3.75 3.725 3.75 3.725 9.05 0 2.15-.7 4.15-.7 2-2.1 3.75L42 39.75Zm-20.95-13.4q4.05 0 6.9-2.875Q28.6 22.8 28.6 18.75t-2.85-6.925Q22.9 8.95 18.85 8.95q-4.1 0-6.975 2.875T9 18.75q0 4.05 2.875 6.925t6.975 2.875Z" />
+  </svg>
+);
+
 const Example = ({ variant }) => {
   const [error, setError] = useState<boolean | string>(false);
   const [color, setColor] = useState<'primary' | 'secondary'>('primary');
@@ -159,7 +173,7 @@ const Example = ({ variant }) => {
             label="With icon"
             error={error}
             color={color}
-            leadingIcon={'O'}
+            leadingIcon={<SearchIcon />}
           />
         </Box>
         <Box m={2} width={230} display="inline-block">

package/src/TextField/TextField.tsx

@@ -1,12 +1,15 @@
 import { forwardRef, useState, useId } from 'react';
-import type * as React from 'react';
+import * 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 = {

package/src/TextField/consts.ts

@@ -0,0 +1,7 @@
+export const PADDING_LEFT_WITH_ICON = 14;
+export const PADDING_LEFT_WITHOUT_ICON = 16;
+
+export const ICON_WIDTH = 24;
+
+export const PADDING_RIGHT_WITH_ICON = 12;
+export const PADDING_RIGHT_WITHOUT_ICON = 16;

package/src/ThemeExplorer/ColorPicker.tsx

@@ -0,0 +1,104 @@
+import type {
+  Color,
+  ColorPickerProps as BaseColorPickerProps,
+  HueProps,
+  HueCursorProps,
+  SaturationProps,
+  SaturationCursorProps,
+} from '@basic-ui/color-picker';
+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) & {
+  color: Color;
+  onChange: (color: Color) => void;
+};
+
+const BaseColorPicker: FC<
+  Omit<BoxProps, 'color' | 'onChange'> & BaseColorPickerProps
+> = _BaseColorPicker 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: FC<ColorPickerProps> = ({
+  color,
+  onChange,
+  width = 450,
+  height = 225,
+  ...otherProps
+}) => {
+  return (
+    <BaseColorPicker
+      as={Box}
+      width={width}
+      height={height}
+      onChange={onChange}
+      color={color}
+      {...otherProps}
+    >
+      <Saturation
+        as={Box}
+        sx={{
+          position: 'relative',
+          touchAction: 'none',
+          userSelect: 'none',
+          width: '100%',
+          backgroundImage:
+            'linear-gradient(transparent, black), linear-gradient(to right, white, transparent)',
+        }}
+      >
+        <SaturationCursor
+          as={Box}
+          sx={{
+            position: 'absolute',
+            width: '20px',
+            height: '20px',
+            border: '2px solid #ffffff',
+            borderRadius: 'full',
+            boxShadow: '0 0 15px 0 rgba(0, 0, 0, 0.15)',
+            boxSizing: 'border-box',
+            transform: 'translate(-10px, -10px)',
+          }}
+        />
+      </Saturation>
+      <Hue
+        as={Box}
+        sx={{
+          position: 'relative',
+          touchAction: 'none',
+          userSelect: 'none',
+          width: '100%',
+          height: '12px',
+          backgroundImage: `linear-gradient(to right, rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 255), rgb(0, 0, 255), rgb(255, 0, 255), rgb(255, 0, 0))`,
+        }}
+      >
+        <HueCursor
+          as={Box}
+          sx={{
+            position: 'absolute',
+            width: '20px',
+            height: '20px',
+            border: '2px solid #ffffff',
+            borderRadius: 'full',
+            boxShadow: 'rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px',
+            boxSizing: 'border-box',
+            transform: 'translate(-10px, -4px)',
+          }}
+        />
+      </Hue>
+    </BaseColorPicker>
+  );
+};

package/src/ThemeExplorer/TextFieldColorPicker.tsx

@@ -0,0 +1,115 @@
+import type { Color } from '@basic-ui/color-picker';
+import { toColor } from '@basic-ui/color-picker';
+import { Popper, useControlledState, useOnClickOutside } from '@basic-ui/core';
+import { useRef, useState, memo, useCallback } from 'react';
+
+import type { TextFieldProps } from '../';
+import { alpha, Box, TextField, Button } from '../';
+import { ColorPicker } from './ColorPicker';
+
+export interface TextFieldColorPickerProps
+  extends Omit<TextFieldProps, 'value' | 'defaultValue' | 'onChange'> {
+  value?: Color;
+  defaultValue?: Color;
+  onChange?: (color: Color) => void;
+}
+
+export const TextFieldColorPicker = memo<TextFieldColorPickerProps>((props) => {
+  const {
+    value: valueProp,
+    defaultValue = toColor('hex', '#33ff33'),
+    onChange: onChangeProp,
+    disabled,
+    ...otherProps
+  } = props;
+
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const [text, setText] = useState(valueProp?.hex || defaultValue.hex);
+  const [value, _onChange] = useControlledState<Color, any, []>(
+    valueProp,
+    onChangeProp as any,
+    defaultValue,
+    (setState) => (v: any) => {
+      setState(v);
+      setText(v.hex);
+    }
+  );
+
+  const onChange = useCallback(
+    (color: Color) => {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      _onChange!(color);
+      setText(color.hex.replace('#', ''));
+    },
+    [_onChange]
+  );
+
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  useOnClickOutside(popoverRef, (e) => {
+    if (e.target === buttonRef?.current) {
+      return;
+    }
+    setPopoverOpen(false);
+  });
+
+  return (
+    <>
+      <TextField
+        disabled={disabled}
+        value={text.replace('#', '')}
+        leadingIcon={'#'}
+        trailingIcon={
+          <Button
+            style={{ backgroundColor: value.hex }}
+            color="on.surface"
+            ref={buttonRef}
+            onClick={() => setPopoverOpen((open) => !open)}
+            disabled={disabled}
+            sx={{
+              pointerEvents: 'all',
+              cursor: 'pointer',
+              width: 32,
+              height: 32,
+              borderRadius: 'extra-small',
+              borderWidth: '1px',
+              borderColor: alpha('on.surface', 0.38),
+              borderStyle: 'solid',
+              outlineColor: 'transparent',
+            }}
+          />
+        }
+        maxLength={6}
+        hideCharacterCounter
+        onChange={(e) => {
+          if (e.target.value.match(/^[a-fA-F0-9]{6}$/)) {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            onChange!(toColor('hex', '#' + e.target.value));
+            return;
+          }
+          setText(e.target.value);
+        }}
+        {...otherProps}
+      />
+      {popoverOpen && (
+        <Popper
+          anchorEl={buttonRef}
+          placement="bottom-end"
+          style={{ zIndex: 2 }}
+        >
+          <Box ref={popoverRef} py={2}>
+            <Box boxShadow={4}>
+              <ColorPicker
+                color={value}
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                onChange={onChange!}
+                width={220}
+                height={220}
+              />
+            </Box>
+          </Box>
+        </Popper>
+      )}
+    </>
+  );
+});