@basic-ui/material 1.0.0-alpha.42 → 1.0.0-alpha.43

package/src/TextField/FilledContainer.tsx

@@ -1,173 +1,173 @@
-import type { ReactNode } from 'react';
-import { forwardRef } 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 { alpha } from '../color';
-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:
-    | 'hover:not([disabled]):not(:focus)'
-    | 'focus:not([disabled])'
-    | 'disabled'
-) =>
-  `input:${state} ~ &,` +
-  `select:${state} ~ &,` +
-  `button:${state} ~ &,` +
-  `textarea:${state} ~ &,` +
-  `[role="button"]:${state} ~ &`;
-
-export const FilledContainerOverlay = (props: { forceActive?: boolean }) => {
-  const { forceActive } = props;
-  const theme = useTheme();
-
-  return (
-    <Box
-      __css={{
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        backgroundColor: 'on.surface',
-        pointerEvents: 'none',
-        opacity: 0,
-        [makeSelector('hover:not([disabled]):not(:focus)')]: !forceActive && {
-          opacity: get(theme, `buttons.overlays.filled.hover.opacity`),
-        },
-        [makeSelector('focus:not([disabled])')]: {
-          opacity: get(theme, `buttons.overlays.transparent.focus.opacity`),
-        },
-        [makeSelector('disabled')]: {
-          cursor: 'default',
-          color: alpha('on.surface', 0.6),
-          opacity: 0.02,
-        },
-        ...(forceActive && {
-          opacity: get(theme, `buttons.overlays.transparent.focus.opacity`),
-        }),
-      }}
-    />
-  );
-};
-
-const FilledContainerBorderBottom = () => (
-  <Box
-    __css={{
-      position: 'absolute',
-      bottom: 0,
-      left: 0,
-      width: '100%',
-      height: rem(1),
-      backgroundColor: alpha('on.surface', 0.6),
-      pointerEvents: 'none',
-      [makeSelector('disabled')]: {
-        backgroundColor: 'transparent',
-      },
-    }}
-  />
-);
-
-export interface FilledContainerProps extends Omit<BoxProps, 'color'> {
-  children?: ReactNode;
-  color?: string;
-  hasFocus?: boolean;
-  label?: ReactNode;
-  labelIsFloating: boolean;
-  inputId: string;
-  error?: boolean;
-  disabled?: boolean;
-  forceActive?: boolean;
-  leadingIcon?: boolean;
-}
-
-export const FilledContainer = forwardRef<HTMLDivElement, FilledContainerProps>(
-  function FilledContainer(props, forwardedRef) {
-    const {
-      label,
-      labelIsFloating,
-      inputId,
-      hasFocus,
-      color: colorProp,
-      children,
-      error = false,
-      disabled = false,
-      forceActive = false,
-      leadingIcon,
-      ...otherProps
-    } = props;
-
-    const finalLabelHeight = 16;
-    const labelHeight = finalLabelHeight / 0.75;
-    const inputHeight = 56;
-
-    const color = error ? 'error' : colorProp;
-    const active = hasFocus || forceActive;
-
-    return (
-      <Box
-        ref={forwardedRef}
-        disabled={disabled}
-        active={active || error}
-        __css={{
-          position: 'relative',
-          lineHeight: 0,
-          width: '100%',
-          backgroundColor: 'surface-variant',
-          overflow: 'hidden',
-          boxSizing: 'border-box',
-          borderTopRightRadius: rem(4),
-          borderTopLeftRadius: rem(4),
-          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={inputHeight}
-            offsetX={
-              leadingIcon
-                ? PADDING_LEFT_WITH_ICON +
-                  ICON_WIDTH +
-                  PADDING_LEFT_WITHOUT_ICON
-                : PADDING_LEFT_WITHOUT_ICON
-            }
-            translateX={0}
-            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}
-          >
-            {label}
-          </FloatingLabel>
-        )}
-
-        {children}
-
-        <FilledContainerOverlay forceActive={active} />
-        <FilledContainerBorderBottom />
-        <LineRipple active={active || error} color={color} />
-      </Box>
-    );
-  }
-);
+import type { ReactNode } from 'react';
+import { forwardRef } 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 { alpha } from '../color';
+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:
+    | 'hover:not([disabled]):not(:focus)'
+    | 'focus:not([disabled])'
+    | 'disabled'
+) =>
+  `input:${state} ~ &,` +
+  `select:${state} ~ &,` +
+  `button:${state} ~ &,` +
+  `textarea:${state} ~ &,` +
+  `[role="button"]:${state} ~ &`;
+
+export const FilledContainerOverlay = (props: { forceActive?: boolean }) => {
+  const { forceActive } = props;
+  const theme = useTheme();
+
+  return (
+    <Box
+      __css={{
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        backgroundColor: 'on.surface',
+        pointerEvents: 'none',
+        opacity: 0,
+        [makeSelector('hover:not([disabled]):not(:focus)')]: !forceActive && {
+          opacity: get(theme, `buttons.overlays.filled.hover.opacity`),
+        },
+        [makeSelector('focus:not([disabled])')]: {
+          opacity: get(theme, `buttons.overlays.transparent.focus.opacity`),
+        },
+        [makeSelector('disabled')]: {
+          cursor: 'default',
+          color: alpha('on.surface', 0.6),
+          opacity: 0.02,
+        },
+        ...(forceActive && {
+          opacity: get(theme, `buttons.overlays.transparent.focus.opacity`),
+        }),
+      }}
+    />
+  );
+};
+
+const FilledContainerBorderBottom = () => (
+  <Box
+    __css={{
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      width: '100%',
+      height: rem(1),
+      backgroundColor: alpha('on.surface', 0.6),
+      pointerEvents: 'none',
+      [makeSelector('disabled')]: {
+        backgroundColor: 'transparent',
+      },
+    }}
+  />
+);
+
+export interface FilledContainerProps extends Omit<BoxProps, 'color'> {
+  children?: ReactNode;
+  color?: string;
+  hasFocus?: boolean;
+  label?: ReactNode;
+  labelIsFloating: boolean;
+  inputId: string;
+  error?: boolean;
+  disabled?: boolean;
+  forceActive?: boolean;
+  leadingIcon?: boolean;
+}
+
+export const FilledContainer = forwardRef<HTMLDivElement, FilledContainerProps>(
+  function FilledContainer(props, forwardedRef) {
+    const {
+      label,
+      labelIsFloating,
+      inputId,
+      hasFocus,
+      color: colorProp,
+      children,
+      error = false,
+      disabled = false,
+      forceActive = false,
+      leadingIcon,
+      ...otherProps
+    } = props;
+
+    const finalLabelHeight = 16;
+    const labelHeight = finalLabelHeight / 0.75;
+    const inputHeight = 56;
+
+    const color = error ? 'error' : colorProp;
+    const active = hasFocus || forceActive;
+
+    return (
+      <Box
+        ref={forwardedRef}
+        disabled={disabled}
+        active={active || error}
+        __css={{
+          position: 'relative',
+          lineHeight: 0,
+          width: '100%',
+          backgroundColor: 'surface-variant',
+          overflow: 'hidden',
+          boxSizing: 'border-box',
+          borderTopRightRadius: rem(4),
+          borderTopLeftRadius: rem(4),
+          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={inputHeight}
+            offsetX={
+              leadingIcon
+                ? PADDING_LEFT_WITH_ICON +
+                  ICON_WIDTH +
+                  PADDING_LEFT_WITHOUT_ICON
+                : PADDING_LEFT_WITHOUT_ICON
+            }
+            translateX={0}
+            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}
+          >
+            {label}
+          </FloatingLabel>
+        )}
+
+        {children}
+
+        <FilledContainerOverlay forceActive={active} />
+        <FilledContainerBorderBottom />
+        <LineRipple active={active || error} color={color} />
+      </Box>
+    );
+  }
+);

package/src/TextField/HelperText.tsx

@@ -1,63 +1,63 @@
-import type { ReactNode } from 'react';
-import { forwardRef } from 'react';
-
-import { Box } from '../Box';
-import { Text } from '../Text';
-import { alpha } from '../color';
-import type { TextProps } from '../Text/Text';
-
-export interface HelperTextProps extends TextProps {
-  children?: ReactNode;
-  leftSide?: ReactNode;
-  rightSide?: ReactNode;
-  error?: boolean;
-  disabled?: boolean;
-}
-
-export const HelperText = forwardRef<HTMLDivElement, HelperTextProps>(
-  function HelperText(props, forwardedRef) {
-    const {
-      leftSide,
-      rightSide,
-      color: colorProp,
-      error = false,
-      disabled = false,
-      __css,
-      ...otherProps
-    } = props;
-
-    if (!leftSide && !rightSide) {
-      return null;
-    }
-
-    let color: any = colorProp;
-    if (disabled) {
-      color = alpha('on.surface', 0.38);
-    } else if (error) {
-      color = 'error';
-    } else if (color === undefined) {
-      color = alpha('on.surface', 0.6);
-    }
-
-    return (
-      <Text
-        as="div"
-        px={16}
-        display="flex"
-        pt={1}
-        color={color}
-        variant="label-small"
-        ref={forwardedRef}
-        lineHeight="normal"
-        __css={{
-          color,
-          ...__css,
-        }}
-        {...otherProps}
-      >
-        {leftSide}
-        {rightSide && <Box ml="auto">{rightSide}</Box>}
-      </Text>
-    );
-  }
-);
+import type { ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+import { Box } from '../Box';
+import { Text } from '../Text';
+import { alpha } from '../color';
+import type { TextProps } from '../Text/Text';
+
+export interface HelperTextProps extends TextProps {
+  children?: ReactNode;
+  leftSide?: ReactNode;
+  rightSide?: ReactNode;
+  error?: boolean;
+  disabled?: boolean;
+}
+
+export const HelperText = forwardRef<HTMLDivElement, HelperTextProps>(
+  function HelperText(props, forwardedRef) {
+    const {
+      leftSide,
+      rightSide,
+      color: colorProp,
+      error = false,
+      disabled = false,
+      __css,
+      ...otherProps
+    } = props;
+
+    if (!leftSide && !rightSide) {
+      return null;
+    }
+
+    let color: any = colorProp;
+    if (disabled) {
+      color = alpha('on.surface', 0.38);
+    } else if (error) {
+      color = 'error';
+    } else if (color === undefined) {
+      color = alpha('on.surface', 0.6);
+    }
+
+    return (
+      <Text
+        as="div"
+        px={16}
+        display="flex"
+        pt={1}
+        color={color}
+        variant="label-small"
+        ref={forwardedRef}
+        lineHeight="normal"
+        __css={{
+          color,
+          ...__css,
+        }}
+        {...otherProps}
+      >
+        {leftSide}
+        {rightSide && <Box ml="auto">{rightSide}</Box>}
+      </Text>
+    );
+  }
+);

package/src/TextField/IconContainer.tsx

@@ -1,33 +1,33 @@
-import { rem } from 'polished';
-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?: ReactNode;
-  position: 'start' | 'end';
-}> = ({ position, children }) => (
-  <Box
-    position="absolute"
-    __css={{
-      top: 0,
-      [position === 'start' ? 'left' : 'right']: rem(PADDING_LEFT_WITH_ICON),
-      minWidth: rem(ICON_WIDTH),
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      height: '100%',
-      pointerEvents: 'none',
-      color: alpha('on.surface', 0.54),
-      zIndex: 1,
-      fontFamily: 'body',
-      lineHeight: 'body',
-      fontWeight: 'regular',
-      fontSize: 3,
-    }}
-  >
-    {children}
-  </Box>
-);
+import { rem } from 'polished';
+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?: ReactNode;
+  position: 'start' | 'end';
+}> = ({ position, children }) => (
+  <Box
+    position="absolute"
+    __css={{
+      top: 0,
+      [position === 'start' ? 'left' : 'right']: rem(PADDING_LEFT_WITH_ICON),
+      minWidth: rem(ICON_WIDTH),
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: '100%',
+      pointerEvents: 'none',
+      color: alpha('on.surface', 0.54),
+      zIndex: 1,
+      fontFamily: 'body',
+      lineHeight: 'body',
+      fontWeight: 'regular',
+      fontSize: 3,
+    }}
+  >
+    {children}
+  </Box>
+);

package/src/TextField/Input.tsx

@@ -68,7 +68,7 @@ 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)