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

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.story.tsx

@@ -1,99 +1,99 @@
-import { useState } from 'react';
-
-import { Snackbar } from './';
-import { Box } from '../Box';
-import { Button } from '../Button';
-import { Select } from '../Select';
-import { SelectItem } from '../SelectItem';
-import { Link } from '../Link';
-import { StackProvider, useStack } from './Stack';
-// import './styles.css';
-
-export default {
-  title: 'components/Snackbar',
-};
-
-const Example = () => {
-  return (
-    <>
-      <Box m={4}>
-        <Snackbar>Marked as favorite.</Snackbar>
-      </Box>
-      <Box m={4}>
-        <Snackbar action={<Button>Action</Button>}>
-          This item already has the label{' '}
-          <Link href="https://booking.com" target="__blank">
-            &quot;travel&quot;
-          </Link>
-          . You can add a new label.
-        </Snackbar>
-      </Box>
-      <Box m={4}>
-        <Snackbar action={<Button>Add new label</Button>} flexWrap="wrap">
-          This item already has the label{' '}
-          <Link href="https://booking.com" target="__blank">
-            &quot;travel&quot;
-          </Link>
-          . You can add a new label.
-        </Snackbar>
-      </Box>
-    </>
-  );
-};
-
-const ControlledExample = () => {
-  const [placement, setPlacement] = useState<any>('top-right');
-
-  return (
-    <>
-      <Box width="240px" m={4}>
-        <Select value={placement} onChange={(e, val) => setPlacement(val)}>
-          <SelectItem value="top-right">Top Right</SelectItem>
-          <SelectItem value="top-center">Top Center</SelectItem>
-          <SelectItem value="top-left">Top Left</SelectItem>
-          <SelectItem value="bottom-right">Bottom Right</SelectItem>
-          <SelectItem value="bottom-center">Bottom Center</SelectItem>
-          <SelectItem value="bottom-left">Bottom Left</SelectItem>
-        </Select>
-      </Box>
-      <Box m={4}>
-        <StackProvider placement={placement}>
-          <SnackbarButton />
-        </StackProvider>
-      </Box>
-    </>
-  );
-};
-
-function SnackbarButton() {
-  const { addItem } = useStack();
-  return (
-    <Button
-      onClick={() =>
-        addItem(
-          <Snackbar action={<Button>Dismiss</Button>} dismissible>
-            This item already has the label{' '}
-            <Link href="https://booking.com" target="__blank">
-              &quot;travel&quot;
-            </Link>
-            . You can add a new label.
-          </Snackbar>
-        )
-      }
-    >
-      Add snackbar
-    </Button>
-  );
-}
-
-const SnackbarStackExample = () => {
-  return (
-    <StackProvider>
-      <SnackbarButton />
-    </StackProvider>
-  );
-};
-
-export const Default = () => <Example />;
-export const Controlled = () => <ControlledExample />;
-export const SnackbarStack = () => <SnackbarStackExample />;
+import { useState } from 'react';
+
+import { Snackbar } from './';
+import { Box } from '../Box';
+import { Button } from '../Button';
+import { Select } from '../Select';
+import { SelectItem } from '../SelectItem';
+import { Link } from '../Link';
+import { StackProvider, useStack } from './Stack';
+// import './styles.css';
+
+export default {
+  title: 'components/Snackbar',
+};
+
+const Example = () => {
+  return (
+    <>
+      <Box m={4}>
+        <Snackbar>Marked as favorite.</Snackbar>
+      </Box>
+      <Box m={4}>
+        <Snackbar action={<Button>Action</Button>}>
+          This item already has the label{' '}
+          <Link href="https://booking.com" target="__blank">
+            &quot;travel&quot;
+          </Link>
+          . You can add a new label.
+        </Snackbar>
+      </Box>
+      <Box m={4}>
+        <Snackbar action={<Button>Add new label</Button>} flexWrap="wrap">
+          This item already has the label{' '}
+          <Link href="https://booking.com" target="__blank">
+            &quot;travel&quot;
+          </Link>
+          . You can add a new label.
+        </Snackbar>
+      </Box>
+    </>
+  );
+};
+
+const ControlledExample = () => {
+  const [placement, setPlacement] = useState<any>('top-right');
+
+  return (
+    <>
+      <Box width="240px" m={4}>
+        <Select value={placement} onChange={(e, val) => setPlacement(val)}>
+          <SelectItem value="top-right">Top Right</SelectItem>
+          <SelectItem value="top-center">Top Center</SelectItem>
+          <SelectItem value="top-left">Top Left</SelectItem>
+          <SelectItem value="bottom-right">Bottom Right</SelectItem>
+          <SelectItem value="bottom-center">Bottom Center</SelectItem>
+          <SelectItem value="bottom-left">Bottom Left</SelectItem>
+        </Select>
+      </Box>
+      <Box m={4}>
+        <StackProvider placement={placement}>
+          <SnackbarButton />
+        </StackProvider>
+      </Box>
+    </>
+  );
+};
+
+function SnackbarButton() {
+  const { addItem } = useStack();
+  return (
+    <Button
+      onClick={() =>
+        addItem(
+          <Snackbar action={<Button>Dismiss</Button>} dismissible>
+            This item already has the label{' '}
+            <Link href="https://booking.com" target="__blank">
+              &quot;travel&quot;
+            </Link>
+            . You can add a new label.
+          </Snackbar>
+        )
+      }
+    >
+      Add snackbar
+    </Button>
+  );
+}
+
+const SnackbarStackExample = () => {
+  return (
+    <StackProvider>
+      <SnackbarButton />
+    </StackProvider>
+  );
+};
+
+export const Default = () => <Example />;
+export const Controlled = () => <ControlledExample />;
+export const SnackbarStack = () => <SnackbarStackExample />;

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}

package/src/Snackbar/index.ts

@@ -1,2 +1,3 @@
 export * from './Snackbar';
 export * from './Stack';
+export * from './useSnackbarAnimation';

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;
@@ -65,7 +66,7 @@ const slideFromLeft = {
 };
 
 type AnimationState = 'entering' | 'entered' | 'exiting';
-export const placements = {
+const placements = {
   'top-right': {
     style: { top: 3, right: 3 },
     animate: (state: AnimationState, translateY: number) =>
@@ -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;