@basic-ui/material 0.1.15 → 1.0.0-alpha.1

package/src/CheckBox/CheckBox.story.tsx

@@ -1,7 +1,8 @@
 import { useState, useRef } from 'react';
-import { CheckBox, Box } from '../';
 import { keyframes } from '@emotion/react';
-import { Keyframes } from '@emotion/serialize';
+import type { Keyframes } from '@emotion/serialize';
+
+import { CheckBox, Box } from '../';
 
 export default {
   title: 'components/CheckBox',

package/src/CheckBox/CheckBox.tsx

@@ -1,10 +1,14 @@
-import { forwardRef, cloneElement, InputHTMLAttributes } from 'react';
-import type * as React from 'react';
-import { RippleBox, RippleBoxProps } from '../Ripple';
-import { Box, BoxProps } from '../Box';
-import { useTheme } from '../theme';
+import type { InputHTMLAttributes } from 'react';
+import { forwardRef, cloneElement } from 'react';
+import * as React from 'react';
 import { rem } from 'polished';
 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 { CheckBoxIcon } from './CheckBoxIcon';
 import {
   SelectionControlLabel,
@@ -98,7 +102,7 @@ const CheckBoxInner = forwardRef<HTMLInputElement, CheckBoxProps>(
               outline: 'none',
             },
             border: 'none',
-            borderRadius: '50%',
+            borderRadius: 'full',
             zIndex: 1,
             position: 'absolute',
             ...__css,

package/src/CheckBox/CheckBoxIcon.tsx

@@ -1,7 +1,9 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Box, BoxProps } from '../Box';
+import * as React from 'react';
 import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { CheckPath } from './CheckPath';
 import { IndeterminatePath } from './IndeterminatePath';
 

package/src/Chip/ButtonChip.tsx

@@ -1,27 +1,30 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { ChipBaseProps, ChipBase } from './ChipBase';
+import * as React from 'react';
+import { rem } from 'polished';
+
+import type { ChipBaseProps } from './ChipBase';
+import { ChipBase } from './ChipBase';
 import { RippleBox } from '../Ripple';
 import { useTheme } from '../theme';
-import { Box } from '../Box';
-import { rem } from 'polished';
 
 export type ButtonChipProps = ChipBaseProps & {
   checked?: boolean;
   disabled?: boolean;
-  leftIcon?: React.ReactNode;
-  rightIcon?: React.ReactNode;
+  leadingIcon?: React.ReactNode;
+  trailingIcon?: React.ReactNode;
 };
 
 export const ButtonChip = forwardRef<HTMLDivElement, ButtonChipProps>(
   function ButtonChip(props, forwardedRef) {
     const {
-      as = 'button',
+      as = 'div',
       onClick,
       disabled: disabledProp,
-      leftIcon,
-      rightIcon,
+      leadingIcon,
+      trailingIcon,
       children,
+      color,
+      __css,
       ...otherProps
     } = props;
 
@@ -30,60 +33,53 @@ export const ButtonChip = forwardRef<HTMLDivElement, ButtonChipProps>(
 
     return (
       <ChipBase
-        as="label"
+        as="div"
         onClick={isClickable ? onClick : undefined}
         disabled={disabledProp}
+        color="on.surface"
+        backgroundColor="surface"
+        __css={__css}
         {...otherProps}
       >
-        <Box
-          as="span"
+        <RippleBox
+          as={as}
+          role={isClickable ? 'button' : undefined}
+          tabIndex={isClickable ? 0 : undefined}
+          theme={theme}
+          ref={forwardedRef}
+          rippleColor={'currentColor'}
+          baseOpacity={0}
+          hoverOpacity={0.12}
+          focusOpacity={0.24}
+          center={false}
+          disabled={!isClickable}
+          aria-disabled={!isClickable}
           __css={{
+            bg: 'transparent',
+            color: 'inherit',
+            padding: `0`,
+            pl: leadingIcon ? rem(8) : rem(12),
+            pr: trailingIcon ? rem(8) : rem(12),
+            gap: rem(8),
             width: '100%',
+            minWidth: 'auto',
             height: '100%',
+            appearance: 'none',
+            ':focus': {
+              outline: 'none',
+            },
             border: 'none',
+            borderRadius: 0,
+            position: 'relative',
             display: 'inline-flex',
             alignItems: 'center',
-            justifyContent: 'center',
+            cursor: isClickable ? 'pointer' : 'default',
           }}
         >
-          <RippleBox
-            as={as}
-            theme={theme}
-            ref={forwardedRef}
-            rippleColor={'currentColor'}
-            baseOpacity={0}
-            hoverOpacity={0.12}
-            focusOpacity={0.24}
-            center={false}
-            disabled={!isClickable}
-            aria-disabled={!isClickable}
-            __css={{
-              backgroundColor: 'rgba(0,0,0,0)',
-              top: 0,
-              left: 0,
-              width: '100%',
-              height: '100%',
-              appearance: 'none',
-              ':focus': {
-                outline: 'none',
-              },
-              border: 'none',
-              borderRadius: 0,
-              position: 'absolute',
-              color: 'inherit',
-              cursor: isClickable ? 'pointer' : 'default',
-            }}
-          />
-          <Box as="span" pl={rem(4)} pr={rem(8)}>
-            {leftIcon}
-          </Box>
-          <Box as="span" __css={{ minWidth: 'auto', whiteSpace: 'nowrap' }}>
-            {children}
-          </Box>
-          <Box as="span" pl={rem(6)} pr={rem(6)}>
-            {rightIcon}
-          </Box>
-        </Box>
+          {leadingIcon}
+          {children}
+          {trailingIcon}
+        </RippleBox>
       </ChipBase>
     );
   }

package/src/Chip/Chip.story.tsx

@@ -1,7 +1,6 @@
 import { Chip } from './';
 import { Box } from '../Box';
 import { Text } from '../Text';
-import { alpha } from '../color';
 import { RadioGroup } from '../RadioButton';
 import { ChoiceChip } from './ChoiceChip';
 import { LoremIpsum } from '../Text/LoremIpsum';
@@ -12,15 +11,14 @@ export default {
 
 const CloseIcon = (props) => (
   <Box
+    role="button"
+    tabIndex={0}
     display="flex"
     width={20}
     height={20}
-    borderRadius="50%"
     alignItems="center"
     justifyContent="center"
     sx={{
-      bg: alpha('on.surface', 0.24),
-      color: alpha('surface', 0.6),
       '& > svg': { display: 'block' },
     }}
   >
@@ -39,11 +37,12 @@ const LeftIcon = ({ color }) => (
     display="flex"
     width={24}
     height={24}
-    borderRadius="50%"
+    borderRadius="full"
     alignItems="center"
     justifyContent="center"
     bg={color}
     color={`on.${color}`}
+    ml="-4px"
   >
     L
   </Box>
@@ -59,34 +58,38 @@ const Example = ({ variant, color = 'default' }) => {
       <Text variant="h6" mb={2}>
         Variant: {variant}, Color: {color}
       </Text>
-      <Box my={2}>
+      <Box my={2} display="flex" sx={{ gap: 2 }}>
         <Text as="span" mr={2}>
           Non clickable
         </Text>
-        <Chip variant={variant}>Buy now</Chip>
-        <Chip variant={variant}>Close door</Chip>
-        <Chip variant={variant} disabled>
+        <Chip variant={variant} color={color}>
+          Buy now
+        </Chip>
+        <Chip variant={variant} color={color}>
+          Close door
+        </Chip>
+        <Chip variant={variant} disabled color={color}>
           Nothing
         </Chip>
       </Box>
-      <Box my={2}>
+      <Box my={2} display="flex" sx={{ gap: 2 }}>
         <Text as="span" mr={2}>
           Button
         </Text>
-        <Chip variant={variant} onClick={noop}>
+        <Chip variant={variant} onClick={noop} color={color}>
           John
         </Chip>
-        <Chip variant={variant} onClick={noop}>
+        <Chip variant={variant} onClick={noop} color={color}>
           Max
         </Chip>
-        <Chip variant={variant} onClick={noop}>
+        <Chip variant={variant} onClick={noop} color={color}>
           Jane
         </Chip>
-        <Chip variant={variant} onClick={noop} disabled>
+        <Chip variant={variant} onClick={noop} disabled color={color}>
           Off
         </Chip>
       </Box>
-      <Box my={2}>
+      <Box my={2} display="flex" sx={{ gap: 2 }}>
         <Text as="span" mr={2}>
           CheckBox
         </Text>
@@ -103,7 +106,12 @@ const Example = ({ variant, color = 'default' }) => {
           Disabled
         </ChoiceChip>
       </Box>
-      <RadioGroup name={`test-radio-${variant}-${color}`} my={2}>
+      <RadioGroup
+        name={`test-radio-${variant}-${color}`}
+        my={2}
+        display="flex"
+        sx={{ gap: 2 }}
+      >
         <Text as="span" mr={2}>
           RadioGroup
         </Text>
@@ -126,21 +134,21 @@ const Example = ({ variant, color = 'default' }) => {
           Disabled
         </ChoiceChip>
       </RadioGroup>
-      <Box my={2} display="flex">
+      <Box my={2} display="flex" sx={{ gap: 2 }}>
         <Text as="span" mr={2}>
           With icons
         </Text>
         <Chip variant={variant}>Hello please</Chip>
-        <Chip variant={variant} leftIcon={<LeftIcon color={color} />}>
+        <Chip variant={variant} leadingIcon={<LeftIcon color={color} />}>
           Hello please
         </Chip>
-        <Chip variant={variant} rightIcon={<CloseIcon />}>
+        <Chip variant={variant} trailingIcon={<CloseIcon />}>
           Hello please
         </Chip>
         <Chip
           variant={variant}
-          leftIcon={<LeftIcon color={color} />}
-          rightIcon={<CloseIcon />}
+          leadingIcon={<LeftIcon color={color} />}
+          trailingIcon={<CloseIcon />}
         >
           Hello please
         </Chip>
@@ -192,26 +200,39 @@ export const HorizontallyScrollableExample = () => {
           borderColor: '#aeaeae',
           borderWidth: '1px',
           borderStyle: 'solid',
+          scrollbarWidth: 'none',
+          MsOverflowStyle: 'none',
+          '::-webkit-scrollbar': {
+            display: 'none',
+          },
         }}
       >
-        <Box
+        <RadioGroup
           sx={{
             px: 3,
             display: 'flex',
             minWidth: 'auto',
-            width: 'auto',
-            scrollbarWidth: 'none',
-            '& > :not(first-of-type)': {
+            overflow: 'visible',
+            '& > :not(:first-of-type)': {
               marginLeft: 2,
             },
           }}
         >
           {texts.map((text) => (
             <Box key={text} sx={{ minWidth: 'auto' }}>
-              <Chip key={text}>{text}</Chip>
+              <ChoiceChip
+                type="radio"
+                value={text}
+                key={text}
+                onClick={() => {
+                  /* noop */
+                }}
+              >
+                {text}
+              </ChoiceChip>
             </Box>
           ))}
-        </Box>
+        </RadioGroup>
       </Box>
       <Box>
         <LoremIpsum count={20} />

package/src/Chip/ChipBase.tsx

@@ -1,11 +1,18 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
 import { variant } from 'styled-system';
-import { Box, BoxProps } from '../Box';
-import { useTheme } from '../theme';
-import { alpha } from '../color';
 import { rem } from 'polished';
 
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import type { Theme } from '../theme';
+import { useTheme } from '../theme';
+import {
+  alpha,
+  getDarkThemeBackgroundOverlay,
+  getColorOverlay,
+} from '../color';
+
 export type ChipBaseProps<
   H = HTMLDivElement,
   Attr = React.HTMLAttributes<H>
@@ -17,15 +24,24 @@ export type ChipBaseProps<
   disabled?: boolean;
 };
 
-function getFilledCSS(bg: string, color: string) {
+function getFilledCSS(
+  theme: Theme,
+  bg: string,
+  color: string,
+  disabled: boolean
+) {
   return {
-    bg,
-    color: alpha(color, 0.87),
+    ...(!disabled && bg !== 'surface'
+      ? { bg }
+      : {
+          ...getColorOverlay(theme, 'surface', 'primary', 0.05),
+        }),
+    color,
     '&::before': {
       backgroundColor: 'currentColor',
       position: 'absolute',
       content: '""',
-      opacity: 0.12,
+      opacity: 0,
       pointerEvents: 'none',
       top: 0,
       right: 0,
@@ -38,13 +54,19 @@ function getFilledCSS(bg: string, color: string) {
     '& > *': {
       zIndex: 1,
     },
+    ...(disabled && { boxShadow: 0, bg: alpha('on.surface', 0.32) }),
   };
 }
 
-function getOutlinedCSS(bg: string, color: string, borderOpacity: number) {
+function getOutlinedCSS(
+  theme: Theme,
+  bg: string,
+  color: string,
+  borderOpacity: number
+) {
   return {
-    bg,
-    color: alpha(color, 0.87),
+    ...(bg !== 'surface' ? { bg } : getDarkThemeBackgroundOverlay(theme, 2)),
+    color: color,
     borderColor: alpha(color, borderOpacity),
     borderStyle: 'solid',
     borderWidth: rem(1),
@@ -71,6 +93,7 @@ export const ChipBase = forwardRef<HTMLDivElement, ChipBaseProps>(function Chip(
   return (
     <Box
       as={as}
+      data-disabled={disabled ? '' : undefined}
       ref={forwardedRef}
       __css={{
         boxSizing: 'border-box',
@@ -84,9 +107,11 @@ export const ChipBase = forwardRef<HTMLDivElement, ChipBaseProps>(function Chip(
         fontSize: 'inherit',
         border: 0,
         overflow: 'hidden',
+        whiteSpace: 'nowrap',
         cursor: 'default',
         WebkitTapHighlightColor: 'transparent',
         willChange: 'transform,opacity',
+        minWidth: 'auto',
         '&::-moz-focus-inner': {
           border: 0,
         },
@@ -98,9 +123,14 @@ export const ChipBase = forwardRef<HTMLDivElement, ChipBaseProps>(function Chip(
           },
         })({ variant: variantProp, theme }),
         ...(variantProp === 'filled'
-          ? getFilledCSS(backgroundColorProp, colorProp)
-          : getOutlinedCSS(backgroundColorProp, colorProp, borderOpacityProp)),
-        opacity: disabled ? 0.37 : 1,
+          ? getFilledCSS(theme, backgroundColorProp, colorProp, disabled)
+          : getOutlinedCSS(
+              theme,
+              backgroundColorProp,
+              colorProp,
+              borderOpacityProp
+            )),
+        opacity: disabled ? 0.38 : 1,
         ...__css,
       }}
       {...otherProps}

package/src/Chip/ChoiceChip.tsx

@@ -1,11 +1,14 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
 import { RadioButton, CheckBox } from '@basic-ui/core';
-import { ChipBaseProps, ChipBase } from './ChipBase';
-import { RippleBox, RippleBoxProps } from '../Ripple';
+import { rem } from 'polished';
+
+import type { ChipBaseProps } from './ChipBase';
+import { ChipBase } from './ChipBase';
+import type { RippleBoxProps } from '../Ripple';
+import { RippleBox } from '../Ripple';
 import { useTheme } from '../theme';
 import { Box } from '../Box';
-import { rem } from 'polished';
 
 export type ChoiceChipProps = ChipBaseProps<
   HTMLInputElement,
@@ -14,7 +17,8 @@ export type ChoiceChipProps = ChipBaseProps<
   checked?: boolean;
   disabled?: boolean;
   type: 'checkbox' | 'radio';
-  leftIcon?: React.ReactNode;
+  leadingIcon?: React.ReactNode;
+  trailingIcon?: React.ReactNode;
 };
 
 const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
@@ -30,21 +34,23 @@ const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
       defaultValue,
       disabled,
       onChange,
-      leftIcon,
+      leadingIcon,
+      trailingIcon,
       children,
+      __css,
       ...otherProps
     } = props;
 
     const theme = useTheme();
-    const sumOpacity = checked ? 0.12 : 0;
 
     return (
       <ChipBase
         as="label"
         disabled={disabled}
-        backgroundColor={'surface'}
-        color={checked ? color : 'on.surface'}
-        borderOpacity={checked ? 0.6 : 0.24}
+        backgroundColor={checked ? color + '-container' : 'surface'}
+        color={checked ? 'on.' + color + '-container' : 'on.surface'}
+        borderOpacity={checked ? 0 : 0.24}
+        __css={__css}
         {...otherProps}
       >
         <Box
@@ -56,6 +62,8 @@ const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
             display: 'inline-flex',
             alignItems: 'center',
             justifyContent: 'center',
+            pl: leadingIcon ? rem(8) : rem(12),
+            pr: trailingIcon ? rem(8) : rem(12),
           }}
         >
           <RippleBox<
@@ -75,13 +83,13 @@ const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
             theme={theme}
             disabled={disabled}
             rippleColor={color}
-            baseOpacity={0 + sumOpacity}
-            hoverOpacity={0.12 + sumOpacity}
-            focusOpacity={0.24 + sumOpacity}
+            baseOpacity={0}
+            hoverOpacity={0.12}
+            focusOpacity={0.24}
             name={name}
             ref={forwardedRef}
             __css={{
-              backgroundColor: 'rgba(0,0,0,0)',
+              bg: 'transparent',
               top: 0,
               left: 0,
               width: '100%',
@@ -93,15 +101,11 @@ const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
               border: 'none',
               borderRadius: 0,
               position: 'absolute',
-              color: 'inherit',
             }}
           />
-          <Box as="span" pl={rem(4)} pr={rem(8)}>
-            {leftIcon}
-          </Box>
-          <Box as="span" pr={rem(12)}>
-            {children}
-          </Box>
+          {leadingIcon}
+          {children}
+          {trailingIcon}
         </Box>
       </ChipBase>
     );
@@ -112,9 +116,9 @@ export const ChoiceChip = forwardRef<HTMLInputElement, ChoiceChipProps>(
   function ChoiceChip(props, forwardedRef) {
     const { type = 'checkbox', ...otherProps } = props;
 
-    const Comp: React.FC<ChoiceChipProps> = (type === 'radio'
-      ? RadioButton
-      : CheckBox) as any;
+    const Comp: React.FC<ChoiceChipProps> = (
+      type === 'radio' ? RadioButton : CheckBox
+    ) as any;
 
     return (
       <Comp ref={forwardedRef} as={InnerInput} type={type} {...otherProps} />

package/src/ColorMode/ColorModeProvider.tsx

@@ -1,7 +1,9 @@
 import { useState, useEffect, useMemo, useCallback } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
 import { Global } from '@emotion/react';
-import { ColorMode, ColorModeContext } from './color-mode';
+
+import type { ColorMode } from './color-mode';
+import { ColorModeContext } from './color-mode';
 import {
   DARK_THEME_CLASS,
   DEFAULT_THEME_CLASS,

package/src/Combobox/Combobox.story.tsx

@@ -1,5 +1,6 @@
 import { useMemo, useState } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import {
   Combobox,
   ComboboxOption,