@basic-ui/material 1.0.0-alpha.4 → 1.0.0-alpha.41

package/src/SelectItem/SelectItem.tsx

@@ -1,60 +1,92 @@
+import type { ForwardedRef, ReactElement, Ref } from 'react';
 import { forwardRef } from 'react';
-import { wrapEvent } from '@basic-ui/core';
+import { wrapEvent, MenuItem as MenuItemCore } from '@basic-ui/core';
+import type { MenuItemProps as MenuItemPropsCore } from '@basic-ui/core';
 
-import type { MenuItemProps } from '../Menu';
-import { MenuItem } from '../Menu';
 import { useSelectContext } from '../Select/context';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
-export type SelectItemProps = MenuItemProps;
+type MenuItemProps = MenuItemPropsCore & BoxProps;
+
+const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
+  ({ as = 'li', ...props }, ref) => (
+    <MenuItemCore as={Box} innerAs={as} ref={ref} {...props} />
+  )
+);
+
+export interface SelectItemProps<ValueType extends string>
+  extends MenuItemProps {
+  value: ValueType;
+}
 
 const ZERO_WIDTH_SPACE = '\u200b';
-export const SelectItem = forwardRef<HTMLLIElement, MenuItemProps>(
-  function SelectItem(props, forwardedRef) {
-    const {
-      as: Comp = MenuItem,
-      onSelect: onSelectProp,
-      children,
-      value: valueProp,
-      disabled,
-      ...otherProps
-    } = props;
-    const { native, onSelect, value: selectedValue } = useSelectContext();
-    const value =
-      valueProp !== undefined && valueProp !== null
-        ? String(valueProp)
-        : (children as string);
-
-    if (native) {
-      return (
-        <option
-          ref={forwardedRef}
-          value={value}
-          disabled={disabled}
-          {...(otherProps as any)}
-        >
-          {children}
-        </option>
-      );
-    }
-
-    if (children === undefined && disabled) {
-      return null;
-    }
-
-    const selected = value === String(selectedValue);
+export const SelectItem = forwardRef(function SelectItem<
+  ValueType extends string
+>(
+  props: SelectItemProps<ValueType>,
+  forwardedRef: ForwardedRef<HTMLLIElement>
+) {
+  const {
+    as: Comp = MenuItem,
+    onSelect: onSelectProp,
+    children,
+    value: valueProp,
+    disabled,
+    onKeyDown,
+    ...otherProps
+  } = props;
+  const {
+    native,
+    onSelect,
+    value: selectedValue,
+    multiple,
+  } = useSelectContext();
+  const value =
+    valueProp !== undefined && valueProp !== null
+      ? String(valueProp)
+      : (children as string);
+
+  if (native) {
     return (
-      <Comp
-        as={MenuItem}
-        onSelect={wrapEvent(onSelectProp, onSelect as any)}
-        data-value={value}
-        disabled={disabled}
+      <option
         ref={forwardedRef}
-        role="option"
-        selected={selected}
-        {...otherProps}
+        value={value}
+        disabled={disabled}
+        {...(otherProps as any)}
       >
-        {children || ZERO_WIDTH_SPACE}
-      </Comp>
+        {children}
+      </option>
     );
   }
-);
+
+  if (children === undefined && disabled) {
+    return null;
+  }
+
+  let selected = false;
+  if (multiple && Array.isArray(selectedValue)) {
+    selected = Boolean(selectedValue.find((v) => v === value));
+  } else {
+    selected = value === String(selectedValue);
+  }
+  return (
+    <Comp
+      as={MenuItem}
+      onSelect={wrapEvent(onSelectProp, onSelect as any)}
+      data-value={value}
+      disabled={disabled}
+      ref={forwardedRef}
+      role="option"
+      aria-selected={selected ? 'true' : undefined}
+      selected={selected}
+      {...otherProps}
+    >
+      {children || ZERO_WIDTH_SPACE}
+    </Comp>
+  );
+}) as <ValueType extends string>(
+  p: SelectItemProps<ValueType> & {
+    ref?: Ref<HTMLLIElement>;
+  }
+) => ReactElement;

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<
@@ -29,6 +25,7 @@ export const SelectionControlLabel = forwardRef<
         position: 'relative',
         alignItems: 'center',
         WebkitTapHighlightColor: 'transparent',
+        gap: 1,
         ...__css,
       }}
       {...otherProps}

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,5 +1,5 @@
-import type { MutableRefObject, ReactElement, FC } from 'react';
 import {
+  useMemo,
   useLayoutEffect,
   createContext,
   useContext,
@@ -7,7 +7,7 @@ import {
   useRef,
   useState,
 } from 'react';
-import * as React from 'react';
+import type { MutableRefObject, ReactElement, FC, ReactNode } from 'react';
 
 export type StackPlacement =
   | 'top-right'
@@ -98,9 +98,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 +108,7 @@ function StackContent({
   }
 
   useEffect(() => {
-    onAddItemRef.current = (element: React.ReactElement) => {
+    onAddItemRef.current = (element: ReactElement) => {
       const itemId = String(++id.current);
 
       items.current.push({
@@ -200,7 +198,7 @@ interface StackItem {
 }
 
 export const StackProvider: FC<{
-  children?: React.ReactNode | React.ReactNode[];
+  children?: ReactNode | ReactNode[];
   gap?: number;
   placement?:
     | 'top-right'
@@ -211,13 +209,16 @@ 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) {
-    onAddItemRef.current?.(element);
-  }
+  const onAddItemRef = useRef<(element: ReactElement) => void>(null);
+  const value = useMemo(
+    () => ({
+      addItem: (element: ReactElement) => onAddItemRef.current?.(element),
+    }),
+    []
+  );
 
   return (
-    <StackContext.Provider value={{ addItem: onAddItem }}>
+    <StackContext.Provider value={value}>
       {children}
       <StackContent
         gap={gap}