@basic-ui/material 1.0.0-alpha.16 → 1.0.0-alpha.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/material",
-  "version": "1.0.0-alpha.16",
+  "version": "1.0.0-alpha.17",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -27,8 +27,8 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@basic-ui/core": "^0.0.44",
-    "@basic-ui/dynamic-theme": "^0.0.6",
+    "@basic-ui/core": "^0.0.45",
+    "@basic-ui/dynamic-theme": "^0.0.7",
     "@styled-system/should-forward-prop": "5.1.5",
     "@types/styled-system": "^5.1.10",
     "@types/styled-system__css": "^5.0.14",
@@ -36,11 +36,11 @@
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
-    "@basic-ui/color-picker": "^0.0.10",
+    "@basic-ui/color-picker": "^0.0.11",
     "@emotion/react": "11.9.0",
     "@emotion/styled": "11.8.1",
     "@material/material-color-utilities": "0.1.1",
-    "polished": "^4.1.1"
+    "polished": "^4.2.2"
   },
   "peerDependencies": {
     "@babel/runtime": "^7.0.0",
@@ -52,5 +52,5 @@
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },
-  "gitHead": "b30b54db7352570fd1077c7c5360e8264a799792"
+  "gitHead": "02f6a7c4ec2599cec8a87e0d0dd4680a5dea81c2"
 }

package/src/Combobox/Combobox.tsx

@@ -30,7 +30,7 @@ import { TextField } from '../TextField';
 import type { ListProps } from '../List';
 import { List } from '../List';
 import type { ListItemProps } from '../ListItem';
-import { ListItem } from '../ListItem';
+import { listItemStyle } from '../ListItem';
 import type { TextProps } from '../Text';
 import { Text } from '../Text';
 import type { ButtonProps } from '../Button';
@@ -120,6 +120,9 @@ export const ComboboxList = forwardRef<HTMLUListElement, ComboboxListProps>(
           '[data-popper-placement="bottom"] &': {
             transformOrigin: 'top center',
           },
+          '& [data-reach-combobox-option=""]': {
+            ...listItemStyle('primary'),
+          },
           ...__css,
         }}
         {...otherProps}
@@ -189,7 +192,7 @@ export const ComboboxOption = forwardRef<HTMLLIElement, ComboboxOptionProps>(
     const { as = 'li', ...otherProps } = props;
     return (
       <ComboboxOptionCore
-        as={ListItem}
+        as={Box}
         ref={forwardedRef}
         innerAs={as}
         {...otherProps}

package/src/Link/Link.tsx

@@ -33,6 +33,12 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
         letterSpacing: 'inherit',
         color,
         textDecoration: 'underline',
+        background: 'none',
+        border: 'none',
+        borderRadius: 'extra-small',
+        'button&': {
+          cursor: 'pointer',
+        },
         '&:hover,&:focus': {
           textDecoration: 'none',
         },
@@ -44,6 +50,12 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
         '&:active': {
           bg: alpha(color, 0.16),
         },
+        '&[aria-disabled="true"],&:disabled': {
+          color: 'on.surface',
+          opacity: 0.38,
+          cursor: 'default',
+          pointerEvents: 'none',
+        },
         WebkitTapHighlightColor: 'transparent',
         ...__css,
       }}

package/src/ListItem/ListItem.tsx

@@ -1,6 +1,7 @@
 import type { ElementType, ReactNode } from 'react';
 import { forwardRef } from 'react';
 import { rem } from 'polished';
+import type { SystemStyleObject } from '@styled-system/css';
 
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
@@ -17,6 +18,52 @@ export interface ListItemProps extends BoxProps {
   rippleColor?: string;
 }
 
+export const listItemStyle = (
+  color: string,
+  hoverOpacity = 0.16,
+  focusOpacity = 0.24
+): SystemStyleObject => ({
+  variant: 'text.label-large',
+  px: 3,
+  py: rem(12),
+  transition: 'background-color 75ms linear',
+  backgroundColor: 'transparent',
+  color: alpha('on.surface', 0.87),
+  cursor: 'pointer',
+  display: 'flex',
+  alignItems: 'center',
+  textDecoration: 'none',
+  ':hover': {
+    backgroundColor: alpha('on.surface', hoverOpacity),
+  },
+  ':focus': {
+    outline: 'none',
+    backgroundColor: alpha('on.surface', focusOpacity),
+  },
+  ':active': {
+    backgroundColor: alpha('on.surface', focusOpacity),
+  },
+  '&[aria-selected="true"]': {
+    backgroundColor: alpha(color, 0.08),
+    color,
+    ':hover': {
+      backgroundColor: alpha(color, hoverOpacity),
+    },
+    ':focus': {
+      outline: 'none',
+      backgroundColor: alpha(color, focusOpacity),
+    },
+    ':active': {
+      backgroundColor: alpha(color, focusOpacity),
+    },
+  },
+  '&[data-disabled]': {
+    color: alpha('on.surface', 0.6),
+    backgroundColor: 'transparent',
+    cursor: 'default',
+  },
+});
+
 export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
   function ListItem(props, forwardedRef) {
     const {
@@ -35,9 +82,6 @@ export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
     const color = rippleColor || colorProp || 'primary';
     const theme = useTheme();
 
-    const hoverOpacity = 0.16;
-    const focusOpacity = 0.24;
-
     return (
       <Box
         ref={forwardedRef}
@@ -49,44 +93,7 @@ export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
         disabled={disabled}
         {...otherProps}
         __css={{
-          variant: 'text.label-large',
-          px: 3,
-          py: rem(12),
-          transition: 'background-color 75ms linear',
-          backgroundColor: 'transparent',
-          color: alpha('on.surface', 0.87),
-          cursor: 'pointer',
-          ':hover': {
-            backgroundColor: alpha('on.surface', hoverOpacity),
-          },
-          ':focus': {
-            outline: 'none',
-            backgroundColor: alpha('on.surface', focusOpacity),
-          },
-          ':active': {
-            backgroundColor: alpha('on.surface', focusOpacity),
-          },
-          '&[aria-selected="true"]': {
-            backgroundColor: alpha(color, 0.08),
-            color,
-            ':hover': {
-              backgroundColor: alpha(color, hoverOpacity),
-            },
-            ':focus': {
-              outline: 'none',
-              backgroundColor: alpha(color, focusOpacity),
-            },
-            ':active': {
-              backgroundColor: alpha(color, focusOpacity),
-            },
-          },
-          '&[data-disabled]': {
-            color: alpha('on.surface', 0.6),
-            backgroundColor: 'transparent',
-            cursor: 'default',
-          },
-          textDecoration: 'none',
-          WebkitTapHighlightColor: 'transparent',
+          ...listItemStyle(color),
           ...__css,
         }}
       >

package/src/Ripple/useRippleSurface.ts

@@ -20,6 +20,7 @@ export interface UseRippleSurfaceOptions<T extends HTMLElement> {
   rippleColor?: string;
   rippleEnabled?: boolean;
   center?: boolean;
+  mouseFocus?: boolean;
   disabled?: boolean;
   style?: CSSProperties;
   onPointerDown?: PointerEventHandler<T>;
@@ -36,6 +37,8 @@ export function useRippleSurface<T extends HTMLElement>(
     focusOpacity = 0.12,
     pressedOpacity = 0.12,
     rippleColor = 'on.surface',
+    // eslint-disable-next-line prefer-const
+    mouseFocus = false,
   } = opts;
   const {
     onKeyDown,
@@ -67,6 +70,8 @@ export function useRippleSurface<T extends HTMLElement>(
     ...rippleProps,
   });
 
+  const focusPseudoClass = mouseFocus ? 'focus' : 'focus-visible';
+
   const css: SxStyleProp = useMemo(
     () => ({
       overflow: 'hidden',
@@ -93,7 +98,7 @@ export function useRippleSurface<T extends HTMLElement>(
       '&:hover::before': {
         opacity: hoverOpacity,
       },
-      '&:focus-visible::before': {
+      [`&:${focusPseudoClass}::before`]: {
         opacity: focusOpacity,
       },
       ...(!rippleEnabled && {
@@ -107,7 +112,7 @@ export function useRippleSurface<T extends HTMLElement>(
       '&[aria-pressed="true"]:hover::before': {
         opacity: pressedOpacity + hoverOpacity,
       },
-      '&[aria-pressed="true"]:focus-visible::before': {
+      [`&[aria-pressed="true"]:${focusPseudoClass}::before`]: {
         opacity: pressedOpacity + focusOpacity,
       },
       ...(!rippleEnabled && {
@@ -133,6 +138,7 @@ export function useRippleSurface<T extends HTMLElement>(
       animation,
       baseOpacity,
       focusOpacity,
+      focusPseudoClass,
       hoverOpacity,
       pressedOpacity,
       rippleColor,

package/src/Select/PaymentMethodSelect.story.tsx

@@ -1,8 +1,9 @@
 import { forwardRef, useState } from 'react';
 import type { ReactElement, ComponentType } from 'react';
+import styled from '@emotion/styled';
 
 import type { SelectProps } from '../';
-import { Box, Select, SelectItem } from '../';
+import { Select, SelectItem } from '../';
 
 export default {
   title: 'components/Select/Complex',
@@ -176,25 +177,19 @@ export interface PaymentMethodSelectProps {
 
 const logoWidth = 32;
 const logoHeight = 24;
-const LogoWrapper = ({ children }: { children: ReactElement }) => (
-  <Box
-    sx={{
-      mr: 2,
-      borderRadius: '2px',
-      overflow: 'hidden',
-      width: logoWidth,
-      height: logoHeight,
-      minWidth: logoWidth,
-      minHeight: logoHeight,
-      '& > svg': { width: logoWidth, height: logoWidth },
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-    }}
-  >
-    {children}
-  </Box>
-);
+const LogoWrapper = styled.div({
+  marginInlineEnd: '8px',
+  borderRadius: '2px',
+  overflow: 'hidden',
+  width: logoWidth,
+  height: logoHeight,
+  minWidth: logoWidth,
+  minHeight: logoHeight,
+  '& > svg': { width: logoWidth, height: logoWidth },
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
 
 function SelectItemContent(props: PaymentMethod): ReactElement {
   if (props.type === 'card') {
@@ -269,9 +264,7 @@ const PaymentMethodSelect = forwardRef<
     >
       {paymentMethods.map((m) => (
         <SelectItem value={m.id} key={m.id}>
-          <Box display="inline-flex" alignItems="center">
-            <SelectItemContent {...m} />
-          </Box>
+          <SelectItemContent {...m} />
         </SelectItem>
       ))}
     </Select>
@@ -300,7 +293,7 @@ export const PaymentMethodSelectControlled = () => {
     'visa',
     'unknown',
   ]) {
-    for (let i = 0; i < 10; i++) {
+    for (let i = 0; i < 50; i++) {
       paymentMethods.push({
         type: 'card',
         id: testCard + `_${i}`,

package/src/Select/Select.tsx

@@ -24,6 +24,7 @@ import { makeDefaultRender } from './defaultRender';
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
 import { IconContainer } from '../TextField/IconContainer';
+import { listItemStyle } from '../ListItem';
 
 const componentMap = {
   outlined: OutlinedContainer,
@@ -181,6 +182,11 @@ export const Select = forwardRef<
                     minWidth: buttonRef?.current?.offsetWidth,
                   }}
                   role="listbox"
+                  __css={{
+                    '& [data-menu-item=""]': {
+                      ...listItemStyle('primary'),
+                    },
+                  }}
                 >
                   {children}
                 </MenuList>

package/src/SelectItem/SelectItem.tsx

@@ -1,9 +1,18 @@
 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';
+
+type MenuItemProps = MenuItemPropsCore & BoxProps;
+
+const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
+  ({ as = 'li', ...props }, ref) => (
+    <MenuItemCore as={Box} innerAs={as} ref={ref} {...props} />
+  )
+);
 
 export type SelectItemProps = MenuItemProps;
 
@@ -50,6 +59,7 @@ export const SelectItem = forwardRef<HTMLLIElement, MenuItemProps>(
         disabled={disabled}
         ref={forwardedRef}
         role="option"
+        aria-selected={selected ? 'true' : undefined}
         selected={selected}
         {...otherProps}
       >

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 { alpha } from '../color';
+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%)',
+        },
+        bg: alpha('primary', 0.8),
+        '&[data-state="at-value"],&[data-state="under-value"]': {
+          bg: alpha('on.primary', 0.8),
+        },
+        ...__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: alpha('primary', 0.38),
+        '&[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: '150%',
+        },
+        '&[data-orientation="vertical"]': {
+          width: '150%',
+        },
+        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>
+  );
+});