@basic-ui/material 1.0.0-alpha.51 → 1.0.0-alpha.54

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/OutlinedContainer.tsx

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

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