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

package/src/Tooltip/Tooltip.tsx

@@ -1,67 +1,67 @@
-import type { PopperProps } from '@basic-ui/core';
-import { Tooltip as _BaseTooltip, Popper } from '@basic-ui/core';
-import type { ElementType, FC, ReactNode } from 'react';
-import { forwardRef } from 'react';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-import { alpha } from '../color';
-
-export interface TooltipProps
-  extends BoxProps,
-    Omit<PopperProps, 'color' | 'anchorEl'> {
-  label: ReactNode;
-  disabled?: boolean;
-}
-
-const BaseTooltip: FC<
-  BoxProps & {
-    innerAs?: ElementType<any>;
-    label: ReactNode;
-  } & Omit<PopperProps, 'color' | 'anchorEl'>
-> = _BaseTooltip as any;
-
-export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
-  function Tooltip(props, forwardedRef) {
-    const {
-      placement = 'bottom',
-      children,
-      label,
-      __css,
-      ...otherProps
-    } = props;
-    const cssStyle = {
-      variant: ['text.body-medium', 'text.body-small'],
-      bg: alpha('#616161', 0.9),
-      color: '#fff',
-      px: 2,
-      py: 1,
-      borderRadius: 'extra-small',
-      zIndex: 'tooltip',
-      ...__css,
-    };
-
-    if (!children) {
-      return (
-        <Box ref={forwardedRef} __css={cssStyle} {...otherProps}>
-          {label}
-        </Box>
-      );
-    }
-
-    return (
-      <BaseTooltip
-        as={Popper}
-        innerAs={Box}
-        ref={forwardedRef}
-        placement={placement}
-        distance={8}
-        label={label}
-        __css={cssStyle}
-        {...otherProps}
-      >
-        {children}
-      </BaseTooltip>
-    );
-  }
-);
+import type { PopperProps } from '@basic-ui/core';
+import { Tooltip as _BaseTooltip, Popper } from '@basic-ui/core';
+import type { ElementType, FC, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { alpha } from '../color';
+
+export interface TooltipProps
+  extends BoxProps,
+    Omit<PopperProps, 'color' | 'anchorEl'> {
+  label: ReactNode;
+  disabled?: boolean;
+}
+
+const BaseTooltip: FC<
+  BoxProps & {
+    innerAs?: ElementType<any>;
+    label: ReactNode;
+  } & Omit<PopperProps, 'color' | 'anchorEl'>
+> = _BaseTooltip as any;
+
+export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
+  function Tooltip(props, forwardedRef) {
+    const {
+      placement = 'bottom',
+      children,
+      label,
+      __css,
+      ...otherProps
+    } = props;
+    const cssStyle = {
+      variant: ['text.body-medium', 'text.body-small'],
+      bg: alpha('#616161', 0.9),
+      color: '#fff',
+      px: 2,
+      py: 1,
+      borderRadius: 'extra-small',
+      zIndex: 'tooltip',
+      ...__css,
+    };
+
+    if (!children) {
+      return (
+        <Box ref={forwardedRef} __css={cssStyle} {...otherProps}>
+          {label}
+        </Box>
+      );
+    }
+
+    return (
+      <BaseTooltip
+        as={Popper}
+        innerAs={Box}
+        ref={forwardedRef}
+        placement={placement}
+        distance={8}
+        label={label}
+        __css={cssStyle}
+        {...otherProps}
+      >
+        {children}
+      </BaseTooltip>
+    );
+  }
+);

package/src/Tooltip/index.ts

@@ -1 +1 @@
-export * from './Tooltip';
+export * from './Tooltip';

package/src/color.ts

@@ -1,84 +1,84 @@
-import type { SystemStyleObject } from '@styled-system/css';
-import { get } from '@styled-system/css';
-import { parseToRgb } from 'polished';
-import { DARK_SCHEME_CLASS } from '@basic-ui/dynamic-theme';
-
-import type { Theme } from './theme';
-
-export const alpha =
-  (colorString: string, alphaValue: number) => (theme: any) => {
-    const color = get(theme, 'colors.' + colorString, colorString);
-    if (color.startsWith('var')) {
-      const color = get(theme, 'colors.' + colorString + '_rgb', colorString);
-      return `rgba(${color},${alphaValue})`;
-    }
-    if (color.startsWith('rgba(')) {
-      return color;
-    }
-
-    const rgb = parseToRgb(color);
-    return `rgba(${rgb.red},${rgb.green},${rgb.blue},${alphaValue})`;
-  };
-
-export function mixColor(
-  baseColor: string,
-  overlayColor: string
-): (theme: any) => string;
-export function mixColor(
-  baseColor: string,
-  overlayColor: string,
-  overlayOpacity: number
-): (theme: any) => string;
-export function mixColor(
-  baseColor: string,
-  overlayColor: string,
-  overlayOpacity?: number
-): (theme: any) => string {
-  return (theme) => {
-    baseColor = get(theme, `colors.${baseColor}`, baseColor);
-    overlayColor = overlayOpacity
-      ? alpha(overlayColor, overlayOpacity)(theme)
-      : get(theme, `colors.${overlayColor}`, overlayColor);
-
-    return `linear-gradient(${overlayColor}, ${overlayColor}), ${baseColor}`;
-  };
-}
-
-export function getColorOverlay(
-  theme: Theme,
-  baseColor: string,
-  overlayColor: string,
-  overlayOpacity: number
-): SystemStyleObject {
-  return {
-    background: mixColor(baseColor, overlayColor, overlayOpacity)(theme),
-  };
-}
-
-export function getBackgroundOverlay(
-  theme: Theme,
-  backgroundOverlay: number | string,
-  overlayColor = 'on.surface'
-): SystemStyleObject {
-  if (Number(backgroundOverlay) <= 0) {
-    return {};
-  }
-  const overlay = get(theme, `paper.overlays.${backgroundOverlay}`) || 0;
-  return getColorOverlay(theme, 'surface', overlayColor, overlay);
-}
-
-export function getDarkThemeBackgroundOverlay(
-  theme: Theme,
-  backgroundOverlay: number | string,
-  overlayColor = 'on.surface'
-): SystemStyleObject {
-  if (Number(backgroundOverlay) <= 0) {
-    return {};
-  }
-
-  return {
-    [`.${DARK_SCHEME_CLASS} &, &.${DARK_SCHEME_CLASS}`]: {
-      ...getBackgroundOverlay(theme, backgroundOverlay, overlayColor),
-    },
-  };
-}
+import type { SystemStyleObject } from '@styled-system/css';
+import { get } from '@styled-system/css';
+import { parseToRgb } from 'polished';
+import { DARK_SCHEME_CLASS } from '@basic-ui/dynamic-theme';
+
+import type { Theme } from './theme';
+
+export const alpha =
+  (colorString: string, alphaValue: number) => (theme: any) => {
+    const color = get(theme, 'colors.' + colorString, colorString);
+    if (color.startsWith('var')) {
+      const color = get(theme, 'colors.' + colorString + '_rgb', colorString);
+      return `rgba(${color},${alphaValue})`;
+    }
+    if (color.startsWith('rgba(')) {
+      return color;
+    }
+
+    const rgb = parseToRgb(color);
+    return `rgba(${rgb.red},${rgb.green},${rgb.blue},${alphaValue})`;
+  };
+
+export function mixColor(
+  baseColor: string,
+  overlayColor: string
+): (theme: any) => string;
+export function mixColor(
+  baseColor: string,
+  overlayColor: string,
+  overlayOpacity: number
+): (theme: any) => string;
+export function mixColor(
+  baseColor: string,
+  overlayColor: string,
+  overlayOpacity?: number
+): (theme: any) => string {
+  return (theme) => {
+    baseColor = get(theme, `colors.${baseColor}`, baseColor);
+    overlayColor = overlayOpacity
+      ? alpha(overlayColor, overlayOpacity)(theme)
+      : get(theme, `colors.${overlayColor}`, overlayColor);
+
+    return `linear-gradient(${overlayColor}, ${overlayColor}), ${baseColor}`;
+  };
+}
+
+export function getColorOverlay(
+  theme: Theme,
+  baseColor: string,
+  overlayColor: string,
+  overlayOpacity: number
+): SystemStyleObject {
+  return {
+    background: mixColor(baseColor, overlayColor, overlayOpacity)(theme),
+  };
+}
+
+export function getBackgroundOverlay(
+  theme: Theme,
+  backgroundOverlay: number | string,
+  overlayColor = 'on.surface'
+): SystemStyleObject {
+  if (Number(backgroundOverlay) <= 0) {
+    return {};
+  }
+  const overlay = get(theme, `paper.overlays.${backgroundOverlay}`) || 0;
+  return getColorOverlay(theme, 'surface', overlayColor, overlay);
+}
+
+export function getDarkThemeBackgroundOverlay(
+  theme: Theme,
+  backgroundOverlay: number | string,
+  overlayColor = 'on.surface'
+): SystemStyleObject {
+  if (Number(backgroundOverlay) <= 0) {
+    return {};
+  }
+
+  return {
+    [`.${DARK_SCHEME_CLASS} &, &.${DARK_SCHEME_CLASS}`]: {
+      ...getBackgroundOverlay(theme, backgroundOverlay, overlayColor),
+    },
+  };
+}

package/src/css.ts

@@ -1,2 +1,2 @@
-// eslint-disable-next-line prettier/prettier
-export * from '@styled-system/css';
+// eslint-disable-next-line prettier/prettier
+export * from '@styled-system/css';

package/src/hooks/useAnimation.ts

@@ -1,111 +1,111 @@
-import type { CSSProperties } from 'react';
-import { useState, useEffect, useCallback } from 'react';
-
-export type AnimationStateStyles<TStyleProps extends CSSProperties> = {
-  closed: TStyleProps;
-  opening?: TStyleProps;
-  open: TStyleProps;
-  close?: TStyleProps;
-};
-
-export type AnimationStyles<TStyleProps extends CSSProperties> = Record<
-  string,
-  AnimationStateStyles<TStyleProps>
->;
-
-export function useAnimation<
-  TStyles extends AnimationStyles<TStyleProps>,
-  TStyleProps extends CSSProperties
->(opts: {
-  open: boolean;
-  styles: TStyles;
-  mode: keyof TStyles;
-  openTimeoutInMilliseconds?: number;
-  closeTimeoutInMilliseconds?: number;
-}) {
-  const {
-    styles,
-    mode,
-    open: openProp,
-    openTimeoutInMilliseconds = 225,
-    closeTimeoutInMilliseconds = 110,
-  } = opts;
-  const animationStyle = styles[mode];
-  const [{ timing, open, state, style }, setAnimation] = useState<{
-    state: keyof AnimationStateStyles<TStyleProps>;
-    timing: number;
-    open: boolean;
-    style: CSSProperties;
-  }>({
-    state: 'closed',
-    style: animationStyle.closed,
-    timing: closeTimeoutInMilliseconds,
-    open: openProp,
-  });
-
-  const handleClose = useCallback(() => {
-    setAnimation((animation) =>
-      animation.state === 'closed'
-        ? animation
-        : {
-            ...animation,
-            state: 'close',
-            style: animationStyle.close || animationStyle.closed,
-            timing: closeTimeoutInMilliseconds,
-          }
-    );
-  }, [animationStyle, closeTimeoutInMilliseconds]);
-
-  const handleOpen = useCallback(() => {
-    setAnimation((animation) =>
-      animation.state === 'open'
-        ? animation
-        : {
-            ...animation,
-            open: true,
-            state: 'opening',
-            style: animationStyle.opening || animationStyle.closed,
-          }
-    );
-  }, [animationStyle]);
-
-  useEffect(() => {
-    if (state === 'opening') {
-      setAnimation((animation) => ({
-        ...animation,
-        state: 'open',
-        style: animationStyle.open,
-        timing: openTimeoutInMilliseconds,
-      }));
-    }
-  }, [animationStyle.open, openTimeoutInMilliseconds, state]);
-
-  useEffect(() => {
-    if (state === 'close') {
-      const timeout = setTimeout(() => {
-        setAnimation({
-          state: 'closed',
-          style: animationStyle.closed,
-          open: false,
-          timing: closeTimeoutInMilliseconds,
-        });
-      }, closeTimeoutInMilliseconds);
-      return () => clearTimeout(timeout);
-    }
-  }, [animationStyle.closed, closeTimeoutInMilliseconds, state]);
-
-  useEffect(() => {
-    if (openProp) {
-      handleOpen();
-    } else {
-      handleClose();
-    }
-  }, [handleClose, handleOpen, openProp]);
-
-  return {
-    state,
-    style,
-    timing,
-    open,
-  };
-}
+import type { CSSProperties } from 'react';
+import { useState, useEffect, useCallback } from 'react';
+
+export type AnimationStateStyles<TStyleProps extends CSSProperties> = {
+  closed: TStyleProps;
+  opening?: TStyleProps;
+  open: TStyleProps;
+  close?: TStyleProps;
+};
+
+export type AnimationStyles<TStyleProps extends CSSProperties> = Record<
+  string,
+  AnimationStateStyles<TStyleProps>
+>;
+
+export function useAnimation<
+  TStyles extends AnimationStyles<TStyleProps>,
+  TStyleProps extends CSSProperties
+>(opts: {
+  open: boolean;
+  styles: TStyles;
+  mode: keyof TStyles;
+  openTimeoutInMilliseconds?: number;
+  closeTimeoutInMilliseconds?: number;
+}) {
+  const {
+    styles,
+    mode,
+    open: openProp,
+    openTimeoutInMilliseconds = 225,
+    closeTimeoutInMilliseconds = 110,
+  } = opts;
+  const animationStyle = styles[mode];
+  const [{ timing, open, state, style }, setAnimation] = useState<{
+    state: keyof AnimationStateStyles<TStyleProps>;
+    timing: number;
+    open: boolean;
+    style: CSSProperties;
+  }>({
+    state: 'closed',
+    style: animationStyle.closed,
+    timing: closeTimeoutInMilliseconds,
+    open: openProp,
+  });
+
+  const handleClose = useCallback(() => {
+    setAnimation((animation) =>
+      animation.state === 'closed'
+        ? animation
+        : {
+            ...animation,
+            state: 'close',
+            style: animationStyle.close || animationStyle.closed,
+            timing: closeTimeoutInMilliseconds,
+          }
+    );
+  }, [animationStyle, closeTimeoutInMilliseconds]);
+
+  const handleOpen = useCallback(() => {
+    setAnimation((animation) =>
+      animation.state === 'open'
+        ? animation
+        : {
+            ...animation,
+            open: true,
+            state: 'opening',
+            style: animationStyle.opening || animationStyle.closed,
+          }
+    );
+  }, [animationStyle]);
+
+  useEffect(() => {
+    if (state === 'opening') {
+      setAnimation((animation) => ({
+        ...animation,
+        state: 'open',
+        style: animationStyle.open,
+        timing: openTimeoutInMilliseconds,
+      }));
+    }
+  }, [animationStyle.open, openTimeoutInMilliseconds, state]);
+
+  useEffect(() => {
+    if (state === 'close') {
+      const timeout = setTimeout(() => {
+        setAnimation({
+          state: 'closed',
+          style: animationStyle.closed,
+          open: false,
+          timing: closeTimeoutInMilliseconds,
+        });
+      }, closeTimeoutInMilliseconds);
+      return () => clearTimeout(timeout);
+    }
+  }, [animationStyle.closed, closeTimeoutInMilliseconds, state]);
+
+  useEffect(() => {
+    if (openProp) {
+      handleOpen();
+    } else {
+      handleClose();
+    }
+  }, [handleClose, handleOpen, openProp]);
+
+  return {
+    state,
+    style,
+    timing,
+    open,
+  };
+}

package/src/index.ts

@@ -1,41 +1,41 @@
-export * from './AppBar';
-export * from './Alert';
-export * from './Badge';
-export * from './BaseLine';
-export * from './BottomSheet';
-export * from './Box';
-export * from './Button';
-export * from './Combobox';
-export * from './CheckBox';
-export * from './Chip';
-export * from './Divider';
-export * from './Dialog';
-export * from './FloatingLabel';
-export * from './LineRipple';
-export * from './Link';
-export * from './List';
-export * from './ListItem';
-export * from './Menu';
-export * from './NavRail';
-export * from './NotchedOutline';
-export * from './Paper';
-export * from './Popover';
-export * from './ProgressSpinner';
-export * from './RadioButton';
-export * from './Ripple';
-export * from './Select';
-export * from './SelectItem';
-export * from './Skeleton';
-export * from './Slider';
-export * from './Snackbar';
-export * from './Switch';
-export * from './Tab';
-export * from './TabIndicator';
-export * from './Table';
-export * from './Text';
-export * from './TextField';
-export * from './Tooltip';
-export * from './motion';
-export * from './theme';
-export * from './color';
-export * from './hooks/useAnimation';
+export * from './AppBar';
+export * from './Alert';
+export * from './Badge';
+export * from './BaseLine';
+export * from './BottomSheet';
+export * from './Box';
+export * from './Button';
+export * from './Combobox';
+export * from './CheckBox';
+export * from './Chip';
+export * from './Divider';
+export * from './Dialog';
+export * from './FloatingLabel';
+export * from './LineRipple';
+export * from './Link';
+export * from './List';
+export * from './ListItem';
+export * from './Menu';
+export * from './NavRail';
+export * from './NotchedOutline';
+export * from './Paper';
+export * from './Popover';
+export * from './ProgressSpinner';
+export * from './RadioButton';
+export * from './Ripple';
+export * from './Select';
+export * from './SelectItem';
+export * from './Skeleton';
+export * from './Slider';
+export * from './Snackbar';
+export * from './Switch';
+export * from './Tab';
+export * from './TabIndicator';
+export * from './Table';
+export * from './Text';
+export * from './TextField';
+export * from './Tooltip';
+export * from './motion';
+export * from './theme';
+export * from './color';
+export * from './hooks/useAnimation';

package/src/motion.ts

@@ -1,7 +1,7 @@
-export const EASING_EMPHASIZED = 'cubic-bezier(0.2, 0, 0, 1)';
-export const EASING_EMPHASIZED_ACCELERATE = 'cubic-bezier(0.3, 0, 0.8, 0.15)';
-export const EASING_EMPHASIZED_DECELERATE = 'cubic-bezier(0.05, 0.7, 0.1, 1)';
-export const EASING_LINEAR = 'cubic-bezier(0, 0, 1, 1)';
-export const EASING_STANDARD = 'cubic-bezier(0.2, 0, 0, 1)';
-export const EASING_STANDARD_ACCELERATE = 'cubic-bezier(0.3, 0, 1, 1)';
-export const EASING_STANDARD_DECELERATE = 'cubic-bezier(0, 0, 0, 1)';
+export const EASING_EMPHASIZED = 'cubic-bezier(0.2, 0, 0, 1)';
+export const EASING_EMPHASIZED_ACCELERATE = 'cubic-bezier(0.3, 0, 0.8, 0.15)';
+export const EASING_EMPHASIZED_DECELERATE = 'cubic-bezier(0.05, 0.7, 0.1, 1)';
+export const EASING_LINEAR = 'cubic-bezier(0, 0, 1, 1)';
+export const EASING_STANDARD = 'cubic-bezier(0.2, 0, 0, 1)';
+export const EASING_STANDARD_ACCELERATE = 'cubic-bezier(0.3, 0, 1, 1)';
+export const EASING_STANDARD_DECELERATE = 'cubic-bezier(0, 0, 0, 1)';