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

package/src/Switch/styledComponents.tsx

@@ -1,33 +1,58 @@
 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 +62,44 @@ 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/Table/Table.tsx

@@ -4,7 +4,7 @@ import { Paper, PaperProps } 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

package/src/TextField/FilledContainer.tsx

@@ -7,6 +7,11 @@ import { LineRipple } from '../LineRipple';
 import { rem } from 'polished';
 import { alpha } from '../color';
 import { Box, BoxProps } from '../Box';
+import {
+  ICON_WIDTH,
+  PADDING_LEFT_WITHOUT_ICON,
+  PADDING_LEFT_WITH_ICON,
+} from './consts';
 
 const makeSelector = (
   state:
@@ -33,7 +38,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 +104,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 +118,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/IconContainer.tsx

@@ -1,10 +1,11 @@
 import { rem } from 'polished';
-import { VFC } from 'react';
+import { FC } from 'react';
 import type * 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 +13,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

@@ -2,6 +2,13 @@ import { rem } from 'polished';
 import { InputHTMLAttributes, forwardRef } from 'react';
 import { Box, BoxProps } 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 +43,6 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
       {...otherProps}
       __css={{
         WebkitTapHighlightColor: 'transparent',
-        boxSizing: 'border-box',
         appearance: 'none',
         outline: 'none',
         width: '100%',
@@ -50,9 +56,20 @@ 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 && {
+          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': {
@@ -64,7 +81,7 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
         ':disabled': {
           cursor: 'default',
         },
-        'select&,button&': {
+        'select&,[role="button"]&': {
           cursor: 'pointer',
         },
         'select&': {
@@ -73,20 +90,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

@@ -10,6 +10,11 @@ import { NotchedOutline } from '../NotchedOutline';
 import { Box, BoxProps } from '../Box';
 import { FloatingLabel } from '../FloatingLabel';
 import { 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 +66,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 +82,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

@@ -10,6 +10,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 +172,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/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,101 @@
+import {
+  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';
+
+export type ColorPickerProps = (Omit<BoxProps, 'color' | 'onChange'> &
+  BaseColorPickerProps) & {
+  color: Color;
+  onChange: (color: Color) => void;
+};
+
+const BaseColorPicker: VFC<
+  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;
+
+export const ColorPicker: VFC<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,112 @@
+import { Color, 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 { 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>
+      )}
+    </>
+  );
+});