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

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(
@@ -67,12 +68,12 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
           textOverflow: 'ellipsis',
         }),
         '::placeholder': {
-          opacity: 0,
+          opacity: hasLabel ? 0 : 1,
           color:
             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,111 +1,116 @@
-import {
-  forwardRef,
-  useEffect,
-  useLayoutEffect,
-  useState,
-  useRef,
-} from 'react';
-import * as React from 'react';
-
-import { NotchedOutline } from '../NotchedOutline';
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-import { FloatingLabel } from '../FloatingLabel';
-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;
-
-export interface OutlinedContainerProps extends BoxProps {
-  children?: React.ReactNode;
-  label?: React.ReactNode;
-  color?: string;
-  error?: boolean;
-  theme: Theme;
-  labelIsFloating: boolean;
-  hasFocus: boolean;
-  inputId: string;
-  disabled?: boolean;
-  forceActive?: boolean;
-  leadingIcon?: boolean;
-}
-
-export const OutlinedContainer = forwardRef<
-  HTMLDivElement,
-  OutlinedContainerProps
->(function OutlinedContainer(props, forwardedRef) {
-  const {
-    label,
-    labelIsFloating,
-    inputId,
-    forceActive = false,
-    children,
-    error,
-    color: colorProp = 'primary',
-    leadingIcon,
-    ...otherProps
-  } = props;
-  const [labelWidth, setLabelWidth] = useState(0);
-  const labelRef = useRef<HTMLLabelElement>(null);
-
-  useEnhancedEffect(() => {
-    const element = labelRef.current;
-
-    if (element) {
-      setLabelWidth(element.offsetWidth);
-      (document as any)?.fonts?.ready?.then(() => {
-        // set the label width again once the fonts have been loaded
-        requestAnimationFrame(() => {
-          setLabelWidth(element.offsetWidth);
-        });
-      });
-    }
-  }, [label]);
-
-  const color = error ? 'error' : colorProp;
-  const inputHeight = 56;
-
-  return (
-    <Box position="relative" lineHeight={0} {...otherProps}>
-      <NotchedOutline
-        ref={forwardedRef}
-        borderRadius={4}
-        borderColor={color}
-        borderWidth={1}
-        notchActive={forceActive || labelIsFloating}
-        notchWidth={labelWidth * 0.75}
-        notchStart={16}
-        forceActive={forceActive || error}
-        label={
-          label && (
-            <FloatingLabel
-              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}
-            >
-              {label}
-            </FloatingLabel>
-          )
-        }
-      >
-        {children}
-      </NotchedOutline>
-    </Box>
-  );
-});
+import type { ReactNode } from 'react';
+import {
+  forwardRef,
+  useEffect,
+  useLayoutEffect,
+  useState,
+  useRef,
+} from 'react';
+
+import { NotchedOutline } from '../NotchedOutline';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { FloatingLabel } from '../FloatingLabel';
+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;
+
+export interface OutlinedContainerProps extends BoxProps {
+  children?: ReactNode;
+  label?: ReactNode;
+  color?: string;
+  error?: boolean;
+  theme: Theme;
+  labelIsFloating: boolean;
+  hasFocus: boolean;
+  inputId: string;
+  disabled?: boolean;
+  forceActive?: boolean;
+  leadingIcon?: boolean;
+}
+
+export const OutlinedContainer = forwardRef<
+  HTMLDivElement,
+  OutlinedContainerProps
+>(function OutlinedContainer(props, forwardedRef) {
+  const {
+    label,
+    labelIsFloating,
+    inputId,
+    forceActive = false,
+    children,
+    error,
+    color: colorProp = 'primary',
+    leadingIcon,
+    ...otherProps
+  } = props;
+  const [labelWidth, setLabelWidth] = useState(0);
+  const labelRef = useRef<HTMLLabelElement>(null);
+
+  useEnhancedEffect(() => {
+    const element = labelRef.current;
+
+    if (element) {
+      setLabelWidth(element.offsetWidth);
+      function handleFontsLoaded() {
+        // set the label width again once the fonts have been loaded
+        requestAnimationFrame(() => {
+          if (element) setLabelWidth(element.offsetWidth);
+        });
+      }
+      document.fonts?.addEventListener?.('loadingdone', handleFontsLoaded);
+      document.fonts?.ready?.then(handleFontsLoaded);
+
+      return () =>
+        document.fonts?.removeEventListener?.('loadingdone', handleFontsLoaded);
+    }
+  }, [label]);
+
+  const color = error ? 'error' : colorProp;
+  const inputHeight = 56;
+
+  return (
+    <Box position="relative" lineHeight={0} {...otherProps}>
+      <NotchedOutline
+        ref={forwardedRef}
+        borderRadius={4}
+        borderColor={color}
+        borderWidth={1}
+        notchActive={forceActive || labelIsFloating}
+        notchWidth={labelWidth * 0.75}
+        notchStart={16}
+        forceActive={forceActive || error}
+        label={
+          label && (
+            <FloatingLabel
+              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}
+            >
+              {label}
+            </FloatingLabel>
+          )
+        }
+      >
+        {children}
+      </NotchedOutline>
+    </Box>
+  );
+});

package/src/TextField/TextField.story.tsx

@@ -11,20 +11,19 @@ export default {
   title: 'components/TextField',
 };
 
-const SearchIcon = (props) => (
+const SearchIcon = () => (
   <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 Example = ({ variant }: { variant: 'filled' | 'outlined' }) => {
   const [error, setError] = useState<boolean | string>(false);
   const [color, setColor] = useState<'primary' | 'secondary'>('primary');
 

package/src/TextField/TextField.tsx

@@ -1,5 +1,5 @@
+import type { ReactNode } from 'react';
 import { forwardRef, useState, useId } from 'react';
-import * as React from 'react';
 import { wrapEvent, useControlledState } from '@basic-ui/core';
 
 import type { InputProps } from './Input';
@@ -32,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;
@@ -40,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/TextField/consts.ts

@@ -1,7 +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;
+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/TextField/index.ts

@@ -1,4 +1,4 @@
-export * from './TextField';
-export * from './FilledContainer';
-export * from './OutlinedContainer';
-export * from './HelperText';
+export * from './TextField';
+export * from './FilledContainer';
+export * from './OutlinedContainer';
+export * from './HelperText';

package/src/ThemeExplorer/BorderSlider.tsx

@@ -0,0 +1,73 @@
+import type { ButtonHTMLAttributes, FC } from 'react';
+import { startTransition, useEffect, useRef, useState } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { Link as BaseLink } from '../Link';
+import { Slider, SliderMarker } from '../Slider';
+import { Text } from '../Text';
+
+const Link: FC<
+  BoxProps<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>
+> = BaseLink as any;
+
+export function BorderSlider(props: {
+  label: string;
+  defaultValue: number;
+  onChange: (value: number) => void;
+  onReset: () => void;
+  resetDisabled: boolean;
+}) {
+  const [value, setValue] = useState(props.defaultValue);
+
+  const resetting = useRef(false);
+  useEffect(() => {
+    if (resetting.current) {
+      setValue(props.defaultValue);
+      resetting.current = false;
+    }
+  }, [props.defaultValue]);
+
+  return (
+    <Box width="100%" display="flex" flexDirection="column">
+      <Text display="flex" justifyContent="space-between" width="100%" pb={2}>
+        <span>
+          {props.label}{' '}
+          <Link
+            as="button"
+            disabled={props.resetDisabled ? true : undefined}
+            onClick={() => {
+              resetting.current = true;
+              props.onReset();
+            }}
+          >
+            Reset
+          </Link>
+        </span>
+        <span>{value}px</span>
+      </Text>
+      <Slider
+        value={value}
+        onChange={(e, v) => {
+          setValue(v);
+          startTransition(() => {
+            props.onChange(v);
+          });
+        }}
+        min={0}
+        max={64}
+        step={2}
+      >
+        <SliderMarker value={2} />
+        <SliderMarker value={4} />
+        <SliderMarker value={8} />
+        <SliderMarker value={12} />
+        <SliderMarker value={16} />
+        <SliderMarker value={24} />
+        <SliderMarker value={32} />
+        <SliderMarker value={40} />
+        <SliderMarker value={48} />
+      </Slider>
+    </Box>
+  );
+}

package/src/ThemeExplorer/ColorPicker.tsx

@@ -1,104 +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>
-  );
-};
+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>
+  );
+};