@basic-ui/material 0.1.16 → 1.0.0-alpha.10

package/src/Select/Select.tsx

@@ -1,12 +1,18 @@
+import type {
+  SelectHTMLAttributes,
+  ReactNode,
+  ChangeEvent,
+  ComponentType,
+} from 'react';
 import { forwardRef, useState, useRef, useEffect, useId } from 'react';
-
-import type * as React from 'react';
 import {
   wrapEvent,
   assignMultipleRefs,
   useControlledState,
 } from '@basic-ui/core';
-import { useTheme, Theme } from '../theme';
+
+import type { Theme } from '../theme';
+import { useTheme } from '../theme';
 import { Select as SelectComp, SelectButton } from './styledComponents';
 import { FilledContainer } from '../TextField/FilledContainer';
 import { HelperText } from '../TextField/HelperText';
@@ -15,7 +21,8 @@ import { SelectProvider } from './context';
 import { Menu, MenuPopover, MenuList } from '../Menu';
 import { SelectIcon } from './SelectIcon';
 import { makeDefaultRender } from './defaultRender';
-import { Box, BoxProps } from '../Box';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { IconContainer } from '../TextField/IconContainer';
 
 const componentMap = {
@@ -25,21 +32,21 @@ const componentMap = {
 
 export interface SelectProps
   extends Omit<
-    BoxProps<HTMLSelectElement, React.SelectHTMLAttributes<HTMLSelectElement>>,
+    BoxProps<HTMLSelectElement, SelectHTMLAttributes<HTMLSelectElement>>,
     'value' | 'defaultValue' | 'onChange'
   > {
   variant?: 'outlined' | 'filled';
   color?: 'primary' | 'secondary';
-  label?: React.ReactNode;
+  label?: ReactNode;
   helperText?: string;
   defaultValue?: string;
   value?: string;
   native?: boolean;
   theme?: Theme;
   error?: boolean | string;
-  onChange?: (e: React.ChangeEvent<HTMLSelectElement>, value: string) => void;
+  onChange?: (e: ChangeEvent<HTMLSelectElement>, value: string) => void;
   renderValue?: (value?: string) => string | undefined;
-  leadingIcon?: React.ReactNode;
+  leadingIcon?: ReactNode;
 }
 
 export const Select = forwardRef<
@@ -113,7 +120,7 @@ export const Select = forwardRef<
 
   const labelIsFloating = hasFocus || open || renderValue(value) !== undefined;
 
-  const Comp: React.ComponentType<any> = native
+  const Comp: ComponentType<any> = native
     ? (SelectComp as any)
     : (SelectButton as any);
 

package/src/Select/SelectIcon.tsx

@@ -1,13 +1,16 @@
-import { forwardRef, SVGAttributes } from 'react';
-import type * as React from 'react';
-import { Box, BoxProps } from '../Box';
+import type { SVGAttributes } from 'react';
+import { forwardRef } from 'react';
 import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { alpha } from '../color';
 import { PADDING_RIGHT_WITH_ICON } from '../TextField/consts';
+import { EASING_STANDARD } from '../motion';
 
 export type SelectIconProps = BoxProps<
   SVGElement,
-  React.SVGAttributes<SVGElement>
+  SVGAttributes<SVGElement>
 > & { open?: boolean };
 
 export const SelectIcon = forwardRef<SVGElement, SelectIconProps>(
@@ -29,8 +32,7 @@ export const SelectIcon = forwardRef<SVGElement, SelectIconProps>(
           color: open ? 'primary' : alpha('on.surface', 0.54),
           pointerEvents: 'none',
           transform: open ? 'rotate(180deg)' : undefined,
-          transition:
-            'transform .15s cubic-bezier(.4,0,.2,1), color .15s cubic-bezier(.4,0,.2,1)',
+          transition: `transform .15s ${EASING_STANDARD}, color .15s ${EASING_STANDARD}`,
         }}
         {...otherProps}
       >

package/src/Select/context.ts

@@ -1,3 +1,4 @@
+import type { MouseEvent, KeyboardEvent } from 'react';
 import { useContext, createContext } from 'react';
 
 // Select Component
@@ -5,7 +6,7 @@ export interface SelectContextProps {
   native: boolean;
   value?: string;
   onSelect: (
-    e: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>
+    e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>
   ) => void;
 }
 

package/src/Select/defaultRender.ts

@@ -1,18 +1,19 @@
+import type { ReactNode } from 'react';
 import { Children, isValidElement } from 'react';
 
-export const makeDefaultRender = (children?: React.ReactNode) => (
-  val?: string
-): string | undefined => {
-  if (children && val !== undefined) {
-    const allChildren = Children.toArray(children);
-    for (let i = 0; i < allChildren.length; i++) {
-      const child = allChildren[i];
-      if (isValidElement(child)) {
-        if (String(child.props.value) === val) {
-          return child.props.children;
+export const makeDefaultRender =
+  (children?: ReactNode) =>
+  (val?: string): string | undefined => {
+    if (children && val !== undefined) {
+      const allChildren = Children.toArray(children);
+      for (let i = 0; i < allChildren.length; i++) {
+        const child = allChildren[i];
+        if (isValidElement(child)) {
+          if (String(child.props.value) === val) {
+            return child.props.children;
+          }
         }
       }
     }
-  }
-  return val || undefined;
-};
+    return val || undefined;
+  };

package/src/Select/styledComponents.tsx

@@ -1,12 +1,18 @@
+import type {
+  ElementType,
+  FC,
+  RefAttributes,
+  SelectHTMLAttributes,
+} from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { MenuButton as BaseMenuButton, MenuButtonProps } from '@basic-ui/core';
-import { Theme } from '../theme';
+import type { MenuButtonProps } from '@basic-ui/core';
+import { MenuButton as BaseMenuButton } from '@basic-ui/core';
+
+import type { Theme } from '../theme';
 import { Input } from '../TextField/Input';
 
-export interface SelectProps
-  extends React.SelectHTMLAttributes<HTMLSelectElement> {
-  as?: React.ElementType<any>;
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  as?: ElementType<any>;
   variant?: 'filled' | 'outlined';
   hasLabel?: boolean;
   theme: Theme;
@@ -15,9 +21,8 @@ export interface SelectProps
 
 export const Select = forwardRef<HTMLSelectElement, SelectProps>(
   ({ as: asProp = 'select', ...props }, forwardedRef) => {
-    const InputSelect: React.FC<
-      SelectProps & React.RefAttributes<HTMLSelectElement>
-    > = Input as any;
+    const InputSelect: FC<SelectProps & RefAttributes<HTMLSelectElement>> =
+      Input as any;
 
     return <InputSelect as={asProp} ref={forwardedRef} {...props} />;
   }
@@ -25,11 +30,10 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
 
 const SelectButtonInner = forwardRef<
   HTMLButtonElement,
-  SelectProps & { innerAs?: React.ElementType<any> }
+  SelectProps & { innerAs?: ElementType<any> }
 >(({ innerAs = 'div', ...props }, forwardedRef) => {
-  const InputButton: React.FC<
-    SelectProps & React.RefAttributes<HTMLButtonElement>
-  > = Input as any;
+  const InputButton: FC<SelectProps & RefAttributes<HTMLButtonElement>> =
+    Input as any;
 
   return (
     <InputButton as={innerAs} ref={forwardedRef} tabIndex={0} {...props} />

package/src/SelectItem/SelectItem.tsx

@@ -1,8 +1,10 @@
 import { forwardRef } from 'react';
-import { MenuItem, MenuItemProps } from '../Menu';
-import { useSelectContext } from '../Select/context';
 import { wrapEvent } from '@basic-ui/core';
 
+import type { MenuItemProps } from '../Menu';
+import { MenuItem } from '../Menu';
+import { useSelectContext } from '../Select/context';
+
 export type SelectItemProps = MenuItemProps;
 
 const ZERO_WIDTH_SPACE = '\u200b';

package/src/SelectionControl/SelectionControlLabel.tsx

@@ -1,14 +1,13 @@
-import { forwardRef, LabelHTMLAttributes } from 'react';
-import type * as React from 'react';
-import { Box, BoxProps } from '../Box';
+import type { ElementType, LabelHTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export interface SelectionControlLabelProps
-  extends BoxProps<
-    HTMLLabelElement,
-    React.LabelHTMLAttributes<HTMLLabelElement>
-  > {
-  as?: React.ElementType<any>;
-  children?: React.ReactNode;
+  extends BoxProps<HTMLLabelElement, LabelHTMLAttributes<HTMLLabelElement>> {
+  as?: ElementType<any>;
+  children?: ReactNode;
 }
 
 export const SelectionControlLabel = forwardRef<

package/src/SelectionControl/SelectionControlText.tsx

@@ -1,11 +1,13 @@
+import type { ElementType, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Text, TextProps } from '../Text';
+
+import type { TextProps } from '../Text';
+import { Text } from '../Text';
 import { alpha } from '../color';
 
 export interface SelectionControlTextProps extends TextProps {
-  as?: React.ElementType<any>;
-  children?: React.ReactNode;
+  as?: ElementType<any>;
+  children?: ReactNode;
   disabled?: boolean;
 }
 

package/src/Skeleton/DelayAppearance.tsx

@@ -1,8 +1,10 @@
+import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { BoxProps, Box } from '../Box';
 import { keyframes } from '@emotion/react';
-import { Keyframes } from '@emotion/serialize';
+import type { Keyframes } from '@emotion/serialize';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export const appearAnimation: Keyframes = keyframes({
   to: {
@@ -12,7 +14,7 @@ export const appearAnimation: Keyframes = keyframes({
 
 export interface DelayAppearanceProps extends BoxProps {
   timeoutInMilliseconds?: number;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 /**

package/src/Skeleton/Skeleton.story.tsx

@@ -20,11 +20,11 @@ const Skeletons = ({
         animation={animation}
         width={60}
         height={60}
-        borderRadius="50%"
+        borderRadius="full"
         m={2}
       />
       <Skeleton animation={animation} m={2}>
-        <Box width={60} height={60} borderRadius="50%" />
+        <Box width={60} height={60} borderRadius="full" />
       </Skeleton>
     </Box>
   );
@@ -34,13 +34,13 @@ const Example = () => {
   return (
     <>
       <Box>
-        <Text variant="h4" px={2}>
+        <Text variant="title-large" px={2}>
           Pulse
         </Text>
         <Skeletons animation="pulse" />
       </Box>
       <Box>
-        <Text variant="h4" px={2}>
+        <Text variant="title-large" px={2}>
           Wave
         </Text>
         <Skeletons animation="wave" />

package/src/Skeleton/Skeleton.tsx

@@ -1,15 +1,17 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Box, BoxProps } from '../Box';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { alpha } from '../color';
 import { useTheme } from '../theme';
 import { pulseAnimationStyle, waveAnimationStyle } from './animation';
 
 export interface SkeletonProps
-  extends BoxProps<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+  extends BoxProps<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
   animation?: 'pulse' | 'wave';
 }
 
@@ -19,7 +21,7 @@ export const Skeleton = forwardRef<HTMLSpanElement, SkeletonProps>(
     const theme = useTheme();
 
     return (
-      <Box<BoxProps<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>>
+      <Box<BoxProps<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>>
         ref={forwardedRef}
         as={as}
         __css={{

package/src/Skeleton/animation.ts

@@ -1,6 +1,7 @@
 import { keyframes } from '@emotion/react';
-import { Keyframes } from '@emotion/serialize';
-import { SystemStyleObject } from '@styled-system/css';
+import type { Keyframes } from '@emotion/serialize';
+import type { SystemStyleObject } from '@styled-system/css';
+
 import { alpha } from '../color';
 
 export const pulseAnimation: Keyframes = keyframes({

package/src/Snackbar/Snackbar.story.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { Snackbar } from './';
 import { Box } from '../Box';
 import { Button } from '../Button';

package/src/Snackbar/Snackbar.tsx

@@ -1,19 +1,21 @@
 import { assignMultipleRefs } from '@basic-ui/core';
 import { rem } from 'polished';
+import type { ReactElement } from 'react';
 import { cloneElement, forwardRef, useRef } from 'react';
-import type * as React from 'react';
+
 import { Box } from '../Box';
 import {
   DARK_THEME_CLASS,
   DEFAULT_THEME_CLASS,
   useColorMode,
 } from '../ColorMode';
-import { Paper, PaperProps } from '../Paper';
+import type { PaperProps } from '../Paper';
+import { Paper } from '../Paper';
 import { Text } from '../Text';
 import { useSnackbarAnimation } from './useSnackbarAnimation';
 
 export interface SnackbarProps extends PaperProps {
-  action?: React.ReactElement;
+  action?: ReactElement;
   timeout?: number;
   dismissible?: boolean;
 }
@@ -39,21 +41,21 @@ export const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
 
     return (
       <Paper
-        elevation={6}
-        backgroundOverlay={6}
+        elevation={4}
+        darkThemeBackgroundOverlay={4}
         className={
           colorMode === 'default' ? DARK_THEME_CLASS : DEFAULT_THEME_CLASS
         }
         ref={assignMultipleRefs(forwardedRef, ref)}
         __css={{
-          boxShadow: 6,
+          boxShadow: 4,
           py: rem(6),
           pl: 3,
           pr: 3,
           display: 'inline-flex',
           minWidth: `min(100%, ${rem(344)})`,
           maxWidth: ['100%', 'unset'],
-          borderRadius: rem(4),
+          borderRadius: 'extra-small',
           color: 'on.surface',
           flexDirection: 'row',
           willChange: 'transform,opacity',
@@ -66,7 +68,7 @@ export const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
         }}
         {...otherProps}
       >
-        <Text variant="body2" as="span" py={2}>
+        <Text variant="body-medium" as="span" py={2}>
           {children}
         </Text>
         {action && (

package/src/Snackbar/Stack.tsx

@@ -1,8 +1,7 @@
-import { MutableRefObject, ReactElement, useLayoutEffect } from 'react';
-import type * as React from 'react';
+import type { MutableRefObject, ReactElement, FC, ReactNode } from 'react';
 import {
+  useLayoutEffect,
   createContext,
-  FC,
   useContext,
   useEffect,
   useRef,
@@ -98,9 +97,7 @@ function StackContent({
   gap: number;
   placement: StackPlacement;
   maxSize: number;
-  onAddItemRef: React.MutableRefObject<
-    ((element: React.ReactElement) => void) | null
-  >;
+  onAddItemRef: MutableRefObject<((element: ReactElement) => void) | null>;
 }) {
   const id = useRef(0);
   const items = useRef<StackItem[]>([]);
@@ -110,7 +107,7 @@ function StackContent({
   }
 
   useEffect(() => {
-    onAddItemRef.current = (element: React.ReactElement) => {
+    onAddItemRef.current = (element: ReactElement) => {
       const itemId = String(++id.current);
 
       items.current.push({
@@ -200,7 +197,7 @@ interface StackItem {
 }
 
 export const StackProvider: FC<{
-  children?: React.ReactNode | React.ReactNode[];
+  children?: ReactNode | ReactNode[];
   gap?: number;
   placement?:
     | 'top-right'
@@ -211,8 +208,8 @@ export const StackProvider: FC<{
     | 'bottom-left';
   maxSize?: number;
 }> = ({ children, gap = 8, placement = 'top-right', maxSize = 3 }) => {
-  const onAddItemRef = useRef<(element: React.ReactElement) => void>(null);
-  function onAddItem(element: React.ReactElement) {
+  const onAddItemRef = useRef<(element: ReactElement) => void>(null);
+  function onAddItem(element: ReactElement) {
     onAddItemRef.current?.(element);
   }
 

package/src/Snackbar/useSnackbarAnimation.ts

@@ -1,4 +1,7 @@
-import { CSSProperties, useEffect } from 'react';
+import type { CSSProperties, MutableRefObject } from 'react';
+import { useEffect } from 'react';
+
+import { EASING_STANDARD } from '../motion';
 import { useStackItem } from './Stack';
 
 const TRANSITION_TIME = 150;
@@ -98,7 +101,7 @@ export const placements = {
 const commonStyle = { position: 'fixed', zIndex: 'snackbar' };
 
 function getTransition(timems: number) {
-  return `opacity ${timems}ms cubic-bezier(.4,0,.2,1),transform ${timems}ms cubic-bezier(.4,0,.2,1)`;
+  return `opacity ${timems}ms ${EASING_STANDARD},transform ${timems}ms ${EASING_STANDARD}`;
 }
 
 const defaultAnimation = {
@@ -108,7 +111,7 @@ const defaultAnimation = {
 };
 
 export function useSnackbarAnimation(
-  ref: React.MutableRefObject<HTMLDivElement | null>,
+  ref: MutableRefObject<HTMLDivElement | null>,
   timeout: number
 ): {
   style: CSSProperties;

package/src/Switch/Switch.tsx

@@ -1,28 +1,27 @@
-import { forwardRef, InputHTMLAttributes } from 'react';
-import type * as React from 'react';
-import { RippleBox, RippleBoxProps } from '../Ripple';
-import { Box, BoxProps } from '../Box';
-import { useTheme } from '../theme';
-import { rem } from 'polished';
+import type { ElementType, FC, InputHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
 import { CheckBox as _CheckBoxCore } from '@basic-ui/core';
+
+import type { RippleBoxProps } from '../Ripple';
+import { RippleBox } from '../Ripple';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { useTheme } from '../theme';
 import {
   SelectionControlLabel,
   SelectionControlText,
 } from '../SelectionControl';
 import { SwitchTrail, SwitchThumb, SwitchCircle } from './styledComponents';
 
-const CheckBoxCore: React.FC<
+const CheckBoxCore: FC<
   SwitchProps & {
-    innerAs?: React.ElementType<any>;
+    innerAs?: ElementType<any>;
   }
 > = _CheckBoxCore as any;
 
-interface SwitchProps
-  extends BoxProps<
-    HTMLInputElement,
-    React.InputHTMLAttributes<HTMLInputElement>
-  > {
-  as?: React.ElementType<any>;
+export interface SwitchProps
+  extends BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>> {
+  as?: ElementType<any>;
   checked?: boolean;
   disabled?: boolean;
 }
@@ -42,8 +41,8 @@ const SwitchInner = forwardRef<HTMLInputElement, SwitchProps>(
 
     return (
       <Box p={2} display="inline-block" minWidth="auto">
-        <Box position="relative" opacity={disabled ? 0.38 : 1}>
-          <SwitchTrail checked={checked} />
+        <Box position="relative">
+          <SwitchTrail checked={checked} disabled={disabled} />
           <SwitchThumb checked={checked}>
             <RippleBox<
               RippleBoxProps<
@@ -52,6 +51,7 @@ const SwitchInner = forwardRef<HTMLInputElement, SwitchProps>(
               >
             >
               as={Comp}
+              role="switch"
               type="checkbox"
               checked={checked}
               onChange={onChange}
@@ -64,20 +64,21 @@ const SwitchInner = forwardRef<HTMLInputElement, SwitchProps>(
               focusOpacity={0.12}
               center={true}
               disabled={disabled}
+              data-switch-thumb=""
               {...otherProps}
               __css={{
                 top: '50%',
                 left: '50%',
                 backgroundColor: 'transparent',
                 transform: 'translate(-50%, -50%)',
-                width: rem(48),
-                height: rem(48),
+                width: '100%',
+                height: '100%',
                 appearance: 'none',
                 ':focus': {
                   outline: 'none',
                 },
                 border: 'none',
-                borderRadius: '50%',
+                borderRadius: 'full',
                 zIndex: 1,
                 position: 'absolute',
                 ...__css,