@basic-ui/material 1.0.0-alpha.2 → 1.0.0-alpha.21

package/src/SelectionControl/SelectionControlLabel.tsx

@@ -1,17 +1,13 @@
-import type { LabelHTMLAttributes } from 'react';
+import type { ElementType, LabelHTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React 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,13 +1,13 @@
+import type { ElementType, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 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,5 +1,5 @@
+import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { keyframes } from '@emotion/react';
 import type { Keyframes } from '@emotion/serialize';
 
@@ -14,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

@@ -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,5 +1,5 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
@@ -8,10 +8,10 @@ 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';
 }
 
@@ -21,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/Slider/Slider.story.tsx

@@ -0,0 +1,36 @@
+import { Slider, SliderMarker } from './';
+// import './styles.css';
+
+export default { title: 'components/Slider' };
+
+export const Uncontrolled = () => <Slider />;
+
+export const UncontrolledWithSteps = () => <Slider step={10} />;
+
+export const UncontrolledWithMarks = () => (
+  <Slider>
+    <SliderMarker value={10} />
+    <SliderMarker value={20} />
+    <SliderMarker value={30} />
+    <SliderMarker value={40} />
+    <SliderMarker value={50} />
+    <SliderMarker value={60} />
+    <SliderMarker value={70} />
+    <SliderMarker value={80} />
+    <SliderMarker value={90} />
+  </Slider>
+);
+
+export const UncontrolledWithMarksAndSteps = () => (
+  <Slider step={10}>
+    <SliderMarker value={10} />
+    <SliderMarker value={20} />
+    <SliderMarker value={30} />
+    <SliderMarker value={40} />
+    <SliderMarker value={50} />
+    <SliderMarker value={60} />
+    <SliderMarker value={70} />
+    <SliderMarker value={80} />
+    <SliderMarker value={90} />
+  </Slider>
+);

package/src/Slider/Slider.tsx

@@ -0,0 +1,275 @@
+import {
+  SliderHandle as SliderHandleCore,
+  SliderInput as SliderInputCore,
+  SliderMarker as SliderMarkerCore,
+  SliderTrack as SliderTrackCore,
+  SliderRange as SliderRangeCore,
+} from '@basic-ui/core';
+import type {
+  SliderProps as SliderPropsCore,
+  SliderHandleProps as SliderHandlePropsCore,
+  SliderInputProps as SliderInputPropsCore,
+  SliderMarkerProps as SliderMarkerPropsCore,
+  SliderTrackProps as SliderTrackPropsCore,
+  SliderRangeProps as SliderRangePropsCore,
+} from '@basic-ui/core';
+export type { SliderHandleAlignment } from '@basic-ui/core';
+import type { HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import type { RippleBoxProps } from '../Ripple';
+import { RippleBox } from '../Ripple';
+
+/////////////////////////////////////////////////////
+// SliderInput
+
+export type SliderInputProps = Omit<
+  BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>,
+  | 'onChange'
+  | 'onMouseDown'
+  | 'onMouseMove'
+  | 'onMouseUp'
+  | 'onPointerDown'
+  | 'onPointerUp'
+  | 'onTouchEnd'
+  | 'onTouchMove'
+  | 'onTouchStart'
+> &
+  SliderInputPropsCore;
+
+export const SliderInput = forwardRef<HTMLDivElement, SliderInputProps>(
+  ({ as = 'div', __css, ...props }, ref) => (
+    <SliderInputCore
+      as={Box}
+      innerAs={as as any}
+      ref={ref}
+      {...props}
+      __css={{
+        maxWidth: '100%',
+        cursor: 'pointer',
+        '&[data-orientation="horizontal"]': { height: rem(4) },
+        '&[data-orientation="vertical"]': {
+          width: rem(4),
+          height: '250px',
+          maxHeight: '100%',
+        },
+        '&[data-disabled]': { opacity: 0.5, pointerEvents: 'none' },
+        ...__css,
+      }}
+    />
+  )
+);
+
+/////////////////////////////////////////////////////
+// SliderHandle
+
+export type SliderHandleProps = SliderHandlePropsCore &
+  RippleBoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>;
+
+export const SliderHandle = forwardRef<HTMLDivElement, SliderHandleProps>(
+  ({ as = 'div', __css, children, ...props }, ref) => (
+    <SliderHandleCore
+      as={RippleBox}
+      innerAs={as as any}
+      ref={ref}
+      rippleColor="currentColor"
+      hoverOpacity={0.12}
+      focusOpacity={0.24}
+      pressedOpacity={0.24}
+      mouseFocus
+      center
+      __css={{
+        position: 'relative',
+        width: rem(40),
+        height: rem(40),
+        color: 'primary',
+        borderRadius: 'full',
+        zIndex: 1,
+        transformOrigin: 'center',
+        userSelect: 'none',
+        '&[aria-orientation="horizontal"]': {
+          top: '50%',
+          transform: 'translateY(-50%)',
+        },
+        '&[aria-orientation="horizontal"]:focus': {
+          transform: 'translateY(-50%)',
+        },
+        '&[aria-orientation="vertical"]': {
+          left: '50%',
+          transform: 'translateX(-50%)',
+        },
+        ':focus': {
+          outline: 'none',
+        },
+        ...__css,
+      }}
+      {...props}
+    >
+      <Box
+        __css={{
+          bg: 'currentColor',
+          width: '50%',
+          height: '50%',
+          borderRadius: 'full',
+          pointerEvents: 'none',
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          boxShadow: 1,
+        }}
+      />
+      {children}
+    </SliderHandleCore>
+  )
+);
+
+/////////////////////////////////////////////////////
+// SliderMarker
+
+export type SliderMarkerProps = SliderMarkerPropsCore &
+  BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>;
+
+export const SliderMarker = forwardRef<HTMLDivElement, SliderMarkerProps>(
+  ({ as = 'div', __css, ...props }, ref) => (
+    <SliderMarkerCore
+      as={Box}
+      innerAs={as as any}
+      ref={ref}
+      {...props}
+      __css={{
+        transformOrigin: 'center',
+        borderRadius: 'full',
+        width: '2px',
+        height: '2px',
+        '&[data-orientation="horizontal"]': {
+          top: '50%',
+          transform: 'translate(-50%, -50%)',
+        },
+        '&[data-orientation="vertical"]': {
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+        },
+        opacity: 0.38,
+        bg: 'on.surface-variant',
+        '&[data-state="at-value"],&[data-state="under-value"]': {
+          bg: 'on.primary',
+        },
+        ...__css,
+      }}
+    />
+  )
+);
+
+/////////////////////////////////////////////////////
+// SliderTrack
+
+export type SliderTrackProps = SliderTrackPropsCore &
+  BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>;
+
+export const SliderTrack = forwardRef<HTMLDivElement, SliderTrackProps>(
+  ({ as = 'div', __css, ...props }, ref) => (
+    <SliderTrackCore
+      as={Box}
+      innerAs={as as any}
+      ref={ref}
+      {...props}
+      __css={{
+        position: 'relative',
+        borderRadius: 'full',
+        bg: 'surface-variant',
+        '&[data-orientation="horizontal"]': {
+          width: '100%',
+          height: 'inherit',
+        },
+        '&[data-orientation="vertical"]': {
+          width: 'inherit',
+          height: '100%',
+        },
+        '&::before': {
+          content: '""',
+          position: 'absolute',
+        },
+        '&[data-orientation="horizontal"]::before': {
+          width: '100%',
+          height: '1.5rem',
+          top: 'calc(-0.5rem - 1px)',
+          left: '0',
+        },
+        '&[data-orientation="vertical"]::before': {
+          width: '1.5rem',
+          height: '100%',
+          top: '0',
+          left: 'calc(-0.5rem - 1px)',
+        },
+        ...__css,
+      }}
+    />
+  )
+);
+
+/////////////////////////////////////////////////////
+// SliderRange
+
+export type SliderRangeProps = SliderRangePropsCore &
+  BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>;
+
+export const SliderRange = forwardRef<HTMLDivElement, SliderRangeProps>(
+  ({ as = 'div', __css, ...props }, ref) => (
+    <SliderRangeCore
+      as={Box}
+      innerAs={as as any}
+      ref={ref}
+      __css={{
+        borderRadius: 'inherit',
+        bg: 'primary',
+        left: '0',
+        bottom: '0',
+        top: '50%',
+        '&[data-orientation="horizontal"]': {
+          height: '100%',
+        },
+        '&[data-orientation="vertical"]': {
+          width: '100%',
+        },
+        transform: 'translateY(-50%)',
+        ...__css,
+      }}
+      {...props}
+    />
+  )
+);
+
+export type SliderProps = SliderPropsCore &
+  Omit<
+    BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>,
+    | 'onChange'
+    | 'onMouseDown'
+    | 'onMouseMove'
+    | 'onMouseUp'
+    | 'onPointerDown'
+    | 'onPointerUp'
+    | 'onTouchEnd'
+    | 'onTouchMove'
+    | 'onTouchStart'
+  >;
+
+export const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(
+  props,
+  forwardedRef
+) {
+  const { children, ...otherProps } = props;
+
+  return (
+    <SliderInput {...otherProps} ref={forwardedRef} data-reach-slider="">
+      <SliderTrack>
+        <SliderRange />
+        <SliderHandle />
+        {children}
+      </SliderTrack>
+    </SliderInput>
+  );
+});

package/src/Slider/index.ts

@@ -0,0 +1 @@
+export * from './Slider';

package/src/Snackbar/Snackbar.tsx

@@ -1,28 +1,28 @@
 import { assignMultipleRefs } from '@basic-ui/core';
 import { rem } from 'polished';
+import type { ReactElement } from 'react';
 import { cloneElement, forwardRef, useRef } from 'react';
-import * as React from 'react';
+import {
+  DARK_SCHEME_CLASS,
+  LIGHT_SCHEME_CLASS,
+  useColorScheme,
+} from '@basic-ui/dynamic-theme';
 
 import { Box } from '../Box';
-import {
-  DARK_THEME_CLASS,
-  DEFAULT_THEME_CLASS,
-  useColorMode,
-} from '../ColorMode';
 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;
 }
 
 export const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
   function Snackbar(props, forwardedRef) {
-    const { colorMode } = useColorMode();
+    const { colorScheme } = useColorScheme();
     const ref = useRef<HTMLDivElement | null>(null);
     const {
       __css,
@@ -44,7 +44,7 @@ export const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
         elevation={4}
         darkThemeBackgroundOverlay={4}
         className={
-          colorMode === 'default' ? DARK_THEME_CLASS : DEFAULT_THEME_CLASS
+          colorScheme === 'light' ? DARK_SCHEME_CLASS : LIGHT_SCHEME_CLASS
         }
         ref={assignMultipleRefs(forwardedRef, ref)}
         __css={{
@@ -68,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,4 +1,4 @@
-import type { MutableRefObject, ReactElement, FC } from 'react';
+import type { MutableRefObject, ReactElement, FC, ReactNode } from 'react';
 import {
   useLayoutEffect,
   createContext,
@@ -7,7 +7,6 @@ import {
   useRef,
   useState,
 } from 'react';
-import * as React from 'react';
 
 export type StackPlacement =
   | 'top-right'
@@ -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,6 +1,7 @@
-import type { CSSProperties } 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;
@@ -100,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 = {
@@ -110,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,6 +1,5 @@
-import type { InputHTMLAttributes } from 'react';
+import type { ElementType, FC, InputHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { CheckBox as _CheckBoxCore } from '@basic-ui/core';
 
 import type { RippleBoxProps } from '../Ripple';
@@ -14,18 +13,15 @@ import {
 } 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;
 }

package/src/Switch/styledComponents.tsx

@@ -1,6 +1,7 @@
 import { rem } from 'polished';
 
 import { Box } from '../Box';
+import { EASING_STANDARD } from '../motion';
 
 const BORDER_WIDTH = 2;
 const TRAIL_WIDTH = 52;
@@ -48,8 +49,7 @@ export const SwitchThumb = ({ checked = false, ...otherProps }) => (
         (TRAIL_WIDTH - CIRCLE_SIZE_INACTIVE_CHECKED - BORDER_WIDTH * 4) / 2
       )})) translateY(-50%)`,
       WebkitTapHighlightColor: 'transparent',
-      transition:
-        'background-color 90ms cubic-bezier(.4,0,.2,1),border-color 90ms cubic-bezier(.4,0,.2,1),transform 90ms cubic-bezier(.4,0,.2,1),height 90ms cubic-bezier(.4,0,.2,1),width 90ms cubic-bezier(.4,0,.2,1)',
+      transition: `background-color 90ms ${EASING_STANDARD},border-color 90ms ${EASING_STANDARD},transform 90ms ${EASING_STANDARD},height 90ms ${EASING_STANDARD},width 90ms ${EASING_STANDARD}`,
       '& > input': {
         width: THUMB_SIZE,
         height: THUMB_SIZE,

package/src/Tab/Tab.tsx

@@ -1,6 +1,5 @@
 import type { ButtonHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import type { TabProps as TabPropsCore } from '@basic-ui/core';
 import { Tab as TabCore } from '@basic-ui/core';
 import { rem } from 'polished';
@@ -14,10 +13,7 @@ import { TabIndicator } from '../TabIndicator';
 import { useTabListContext } from './context';
 
 export type TabProps = TabPropsCore &
-  RippleBoxProps<
-    HTMLButtonElement,
-    React.ButtonHTMLAttributes<HTMLButtonElement>
-  >;
+  RippleBoxProps<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>;
 
 const TabInner = forwardRef<
   HTMLButtonElement,
@@ -27,7 +23,7 @@ const TabInner = forwardRef<
   const { textColor, indicatorColor, selectedTextColor } = useTabListContext();
 
   return (
-    <Box position="relative" display="flex" flexGrow={1} flexDirection="column">
+    <Box position="relative" display="flex" flex={1} flexDirection="column">
       <RippleBox<
         RippleBoxProps<
           HTMLButtonElement,
@@ -57,7 +53,7 @@ const TabInner = forwardRef<
       >
         <Text
           as="span"
-          variant="button"
+          variant="label-large"
           color="inherit"
           height="100%"
           textAlign="center"

package/src/TabIndicator/TabIndicator.tsx

@@ -5,6 +5,7 @@ import { assignMultipleRefs } from '@basic-ui/core';
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
 import { useTabIndicatorContext } from './context';
+import { EASING_STANDARD } from '../motion';
 
 export interface TabIndicatorProps extends BoxProps {
   selected?: boolean;
@@ -59,7 +60,7 @@ export const TabIndicator = forwardRef<HTMLDivElement, TabIndicatorProps>(
           transform: `scale(1)`,
           opacity: selected ? 1 : 0,
           transformOrigin: 'left',
-          transition: 'transform .25s cubic-bezier(.4,0,.2,1)',
+          transition: `transform .25s ${EASING_STANDARD}`,
           zIndex: 1,
         }}
         {...otherProps}

package/src/TabIndicator/context.ts

@@ -1,8 +1,9 @@
+import type { MutableRefObject } from 'react';
 import { createContext, useContext } from 'react';
 
 // TabIndicator Component
 export interface TabIndicatorContextProps {
-  currentIndicator: React.MutableRefObject<HTMLSpanElement | null>;
+  currentIndicator: MutableRefObject<HTMLSpanElement | null>;
 }
 
 const TabIndicatorContext = createContext<TabIndicatorContextProps>({

package/src/Table/TableRow.tsx

@@ -19,7 +19,7 @@ export const TableRow = forwardRef<HTMLDivElement, TableRowProps>(
         display="flex"
         flexDirection="row"
         width="100%"
-        variant="body1"
+        variant="body-medium"
         px={2}
         __css={{
           borderBottomStyle: 'solid',