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

package/build/cjs/index.js

@@ -596,7 +596,7 @@ function getDarkThemeBackgroundOverlay(theme, backgroundOverlay, overlayColor =
   }
 
   return {
-    [`.${dynamicTheme.DARK_THEME_CLASS} &, &.${dynamicTheme.DARK_THEME_CLASS}`]: { ...getBackgroundOverlay(theme, backgroundOverlay, overlayColor)
+    [`.${dynamicTheme.DARK_SCHEME_CLASS} &, &.${dynamicTheme.DARK_SCHEME_CLASS}`]: { ...getBackgroundOverlay(theme, backgroundOverlay, overlayColor)
     }
   };
 }
@@ -1205,7 +1205,9 @@ function useRippleSurface(opts = {}) {
     hoverOpacity = 0.04,
     focusOpacity = 0.12,
     pressedOpacity = 0.12,
-    rippleColor = 'on.surface'
+    rippleColor = 'on.surface',
+    // eslint-disable-next-line prefer-const
+    mouseFocus = false
   } = opts;
   const {
     onKeyDown,
@@ -1235,6 +1237,7 @@ function useRippleSurface(opts = {}) {
     disabled,
     ...rippleProps
   });
+  const focusPseudoClass = mouseFocus ? 'focus' : 'focus-visible';
   const css$1 = react$1.useMemo(() => ({
     overflow: 'hidden',
     position: 'relative',
@@ -1260,7 +1263,7 @@ function useRippleSurface(opts = {}) {
     '&:hover::before': {
       opacity: hoverOpacity
     },
-    '&:focus-visible::before': {
+    [`&:${focusPseudoClass}::before`]: {
       opacity: focusOpacity
     },
     ...(!rippleEnabled && {
@@ -1274,7 +1277,7 @@ function useRippleSurface(opts = {}) {
     '&[aria-pressed="true"]:hover::before': {
       opacity: pressedOpacity + hoverOpacity
     },
-    '&[aria-pressed="true"]:focus-visible::before': {
+    [`&[aria-pressed="true"]:${focusPseudoClass}::before`]: {
       opacity: pressedOpacity + focusOpacity
     },
     ...(!rippleEnabled && {
@@ -1295,7 +1298,7 @@ function useRippleSurface(opts = {}) {
         })
       }
     })
-  }), [animation, baseOpacity, focusOpacity, hoverOpacity, pressedOpacity, rippleColor, rippleEnabled]);
+  }), [animation, baseOpacity, focusOpacity, focusPseudoClass, hoverOpacity, pressedOpacity, rippleColor, rippleEnabled]);
   return {
     style: { ...animationStyle,
       ...style
@@ -2424,12 +2427,17 @@ const OutlinedContainer = /*#__PURE__*/react$1.forwardRef(function OutlinedConta
 
     if (element) {
       setLabelWidth(element.offsetWidth);
-      document?.fonts?.ready?.then(() => {
+
+      function handleFontsLoaded() {
         // set the label width again once the fonts have been loaded
         requestAnimationFrame(() => {
-          setLabelWidth(element.offsetWidth);
+          if (element) setLabelWidth(element.offsetWidth);
         });
-      });
+      }
+
+      document.fonts?.addEventListener?.('loadingdone', handleFontsLoaded);
+      document.fonts?.ready?.then(handleFontsLoaded);
+      return () => document.fonts?.removeEventListener?.('loadingdone', handleFontsLoaded);
     }
   }, [label]);
   const color = error ? 'error' : colorProp;
@@ -2674,6 +2682,47 @@ const List = /*#__PURE__*/react$1.forwardRef(function List(props, forwardedRef)
   });
 });
 
+const listItemStyle = (color, hoverOpacity = 0.16, focusOpacity = 0.24) => ({
+  variant: 'text.label-large',
+  px: 3,
+  py: "0.75rem",
+  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'
+  }
+});
 const ListItem = /*#__PURE__*/react$1.forwardRef(function ListItem(props, forwardedRef) {
   const {
     as = 'div',
@@ -2690,9 +2739,6 @@ const ListItem = /*#__PURE__*/react$1.forwardRef(function ListItem(props, forwar
   const selected = ariaSelectedProp || selectedProp;
   const color = rippleColor || colorProp || 'primary';
   const theme = useTheme();
-  const baseOpacity = 0.12;
-  const hoverOpacity = 0.16;
-  const focusOpacity = 0.24;
   return /*#__PURE__*/jsxRuntime.jsx(Box, {
     ref: forwardedRef,
     as: innerAs || as,
@@ -2702,45 +2748,7 @@ const ListItem = /*#__PURE__*/react$1.forwardRef(function ListItem(props, forwar
     "aria-selected": selected ? 'true' : undefined,
     disabled: disabled,
     ...otherProps,
-    __css: {
-      variant: 'text.label-large',
-      px: 3,
-      py: "0.75rem",
-      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', baseOpacity + 0.12)
-      },
-      '&[aria-selected="true"]': {
-        backgroundColor: alpha(color, baseOpacity + 0.12),
-        color,
-        ':hover': {
-          backgroundColor: alpha(color, hoverOpacity + 0.12)
-        },
-        ':focus': {
-          outline: 'none',
-          backgroundColor: alpha(color, focusOpacity + 0.12)
-        },
-        ':active': {
-          backgroundColor: alpha(color, baseOpacity + 0.24)
-        }
-      },
-      '&[data-disabled]': {
-        color: alpha('on.surface', 0.6),
-        backgroundColor: 'transparent',
-        cursor: 'default'
-      },
-      textDecoration: 'none',
-      WebkitTapHighlightColor: 'transparent',
+    __css: { ...listItemStyle(color),
       ...__css
     },
     children: children
@@ -2831,6 +2839,8 @@ const ComboboxList = /*#__PURE__*/react$1.forwardRef((props, forwardedRef) => {
       '[data-popper-placement="bottom"] &': {
         transformOrigin: 'top center'
       },
+      '& [data-reach-combobox-option=""]': { ...listItemStyle('primary')
+      },
       ...__css
     },
     ...otherProps
@@ -2883,7 +2893,7 @@ const ComboboxOption = /*#__PURE__*/react$1.forwardRef((props, forwardedRef) =>
     ...otherProps
   } = props;
   return /*#__PURE__*/jsxRuntime.jsx(ComboboxOptionCore, {
-    as: ListItem,
+    as: Box,
     ref: forwardedRef,
     innerAs: as,
     ...otherProps
@@ -3592,6 +3602,12 @@ const Link = /*#__PURE__*/react$1.forwardRef(function Link(props, forwardedRef)
       letterSpacing: 'inherit',
       color,
       textDecoration: 'underline',
+      background: 'none',
+      border: 'none',
+      borderRadius: 'extra-small',
+      'button&': {
+        cursor: 'pointer'
+      },
       '&:hover,&:focus': {
         textDecoration: 'none'
       },
@@ -3603,6 +3619,12 @@ const Link = /*#__PURE__*/react$1.forwardRef(function Link(props, forwardedRef)
       '&:active': {
         bg: alpha(color, 0.16)
       },
+      '&[aria-disabled="true"],&:disabled': {
+        color: 'on.surface',
+        opacity: 0.38,
+        cursor: 'default',
+        pointerEvents: 'none'
+      },
       WebkitTapHighlightColor: 'transparent',
       ...__css
     },
@@ -3656,7 +3678,7 @@ const MenuList = /*#__PURE__*/react$1.forwardRef(({
 })); /////////////////////////////////////////////////////
 // MenuItem
 
-const MenuItem = /*#__PURE__*/react$1.forwardRef(({
+const MenuItem$1 = /*#__PURE__*/react$1.forwardRef(({
   as = 'li',
   ...props
 }, ref) => /*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
@@ -4262,6 +4284,10 @@ const Select = /*#__PURE__*/react$1.forwardRef(function Select(props, forwardedR
                 minWidth: buttonRef?.current?.offsetWidth
               },
               role: "listbox",
+              __css: {
+                '& [data-menu-item=""]': { ...listItemStyle('primary')
+                }
+              },
               children: children
             })
           })]
@@ -4278,6 +4304,15 @@ const Select = /*#__PURE__*/react$1.forwardRef(function Select(props, forwardedR
   });
 });
 
+const MenuItem = /*#__PURE__*/react$1.forwardRef(({
+  as = 'li',
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
+  as: Box,
+  innerAs: as,
+  ref: ref,
+  ...props
+}));
 const ZERO_WIDTH_SPACE = '\u200b';
 const SelectItem = /*#__PURE__*/react$1.forwardRef(function SelectItem(props, forwardedRef) {
   const {
@@ -4317,6 +4352,7 @@ const SelectItem = /*#__PURE__*/react$1.forwardRef(function SelectItem(props, fo
     disabled: disabled,
     ref: forwardedRef,
     role: "option",
+    "aria-selected": selected ? 'true' : undefined,
     selected: selected,
     ...otherProps,
     children: children || ZERO_WIDTH_SPACE
@@ -4418,6 +4454,205 @@ const DelayAppearance = /*#__PURE__*/react$1.forwardRef(function DelayAppearance
   });
 });
 
+const SliderInput = /*#__PURE__*/react$1.forwardRef(({
+  as = 'div',
+  __css,
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntime.jsx(core.SliderInput, {
+  as: Box,
+  innerAs: as,
+  ref: ref,
+  ...props,
+  __css: {
+    maxWidth: '100%',
+    cursor: 'pointer',
+    '&[data-orientation="horizontal"]': {
+      height: "0.25rem"
+    },
+    '&[data-orientation="vertical"]': {
+      width: "0.25rem",
+      height: '250px',
+      maxHeight: '100%'
+    },
+    '&[data-disabled]': {
+      opacity: 0.5,
+      pointerEvents: 'none'
+    },
+    ...__css
+  }
+})); /////////////////////////////////////////////////////
+// SliderHandle
+
+const SliderHandle = /*#__PURE__*/react$1.forwardRef(({
+  as = 'div',
+  __css,
+  children,
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntime.jsxs(core.SliderHandle, {
+  as: RippleBox,
+  innerAs: as,
+  ref: ref,
+  rippleColor: "currentColor",
+  hoverOpacity: 0.12,
+  focusOpacity: 0.24,
+  pressedOpacity: 0.24,
+  mouseFocus: true,
+  center: true,
+  __css: {
+    position: 'relative',
+    width: "2.5rem",
+    height: "2.5rem",
+    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,
+  children: [/*#__PURE__*/jsxRuntime.jsx(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]
+})); /////////////////////////////////////////////////////
+// SliderMarker
+
+const SliderMarker = /*#__PURE__*/react$1.forwardRef(({
+  as = 'div',
+  __css,
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntime.jsx(core.SliderMarker, {
+  as: Box,
+  innerAs: as,
+  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
+
+const SliderTrack = /*#__PURE__*/react$1.forwardRef(({
+  as = 'div',
+  __css,
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntime.jsx(core.SliderTrack, {
+  as: Box,
+  innerAs: as,
+  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
+
+const SliderRange = /*#__PURE__*/react$1.forwardRef(({
+  as = 'div',
+  __css,
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntime.jsx(core.SliderRange, {
+  as: Box,
+  innerAs: as,
+  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
+}));
+const Slider = /*#__PURE__*/react$1.forwardRef(function Slider(props, forwardedRef) {
+  const {
+    children,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(SliderInput, { ...otherProps,
+    ref: forwardedRef,
+    "data-reach-slider": "",
+    children: /*#__PURE__*/jsxRuntime.jsxs(SliderTrack, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(SliderRange, {}), /*#__PURE__*/jsxRuntime.jsx(SliderHandle, {}), children]
+    })
+  });
+});
+
 const StackItemContext = /*#__PURE__*/react$1.createContext(null);
 StackItemContext.displayName = 'StackItemContext';
 function useStackItem({
@@ -4789,8 +5024,8 @@ function useSnackbarAnimation(ref, timeout) {
 
 const Snackbar = /*#__PURE__*/react$1.forwardRef(function Snackbar(props, forwardedRef) {
   const {
-    colorMode
-  } = dynamicTheme.useColorMode();
+    colorScheme
+  } = dynamicTheme.useColorScheme();
   const ref = react$1.useRef(null);
   const {
     __css,
@@ -4809,7 +5044,7 @@ const Snackbar = /*#__PURE__*/react$1.forwardRef(function Snackbar(props, forwar
   return /*#__PURE__*/jsxRuntime.jsxs(Paper, {
     elevation: 4,
     darkThemeBackgroundOverlay: 4,
-    className: colorMode === 'default' ? dynamicTheme.DARK_THEME_CLASS : dynamicTheme.DEFAULT_THEME_CLASS,
+    className: colorScheme === 'light' ? dynamicTheme.DARK_SCHEME_CLASS : dynamicTheme.LIGHT_SCHEME_CLASS,
     ref: core.assignMultipleRefs(forwardedRef, ref),
     __css: {
       boxShadow: 4,
@@ -5428,7 +5663,7 @@ exports.List = List;
 exports.ListItem = ListItem;
 exports.ListItemText = ListItemText;
 exports.MenuButton = MenuButton;
-exports.MenuItem = MenuItem;
+exports.MenuItem = MenuItem$1;
 exports.MenuList = MenuList;
 exports.MenuPopover = MenuPopover;
 exports.NavRailIndicator = NavRailIndicator;
@@ -5445,6 +5680,12 @@ exports.RippleBox = RippleBox;
 exports.Select = Select;
 exports.SelectItem = SelectItem;
 exports.Skeleton = Skeleton;
+exports.Slider = Slider;
+exports.SliderHandle = SliderHandle;
+exports.SliderInput = SliderInput;
+exports.SliderMarker = SliderMarker;
+exports.SliderRange = SliderRange;
+exports.SliderTrack = SliderTrack;
 exports.Snackbar = Snackbar;
 exports.StackProvider = StackProvider;
 exports.Switch = Switch;
@@ -5467,6 +5708,7 @@ exports.base = base;
 exports.getBackgroundOverlay = getBackgroundOverlay;
 exports.getColorOverlay = getColorOverlay;
 exports.getDarkThemeBackgroundOverlay = getDarkThemeBackgroundOverlay;
+exports.listItemStyle = listItemStyle;
 exports.mixColor = mixColor;
 exports.rippleStyle = rippleStyle;
 exports.sx = sx;