@mui/joy - npm Package Compare versions

Comparing version 5.0.0-alpha.3 to 5.0.0-alpha.4

Button/Button.d.ts

@@ -1,7 +0,3 @@
-/// <reference types="react" />
-export declare type ButtonProps = JSX.IntrinsicElements['button'];
-declare const Button: {
-    (props: ButtonProps): JSX.Element;
-    propTypes: any;
-};
+import { ExtendButton, ButtonTypeMap } from './ButtonProps';
+declare const Button: ExtendButton<ButtonTypeMap<{}, "button">>;
 export default Button;

Button/Button.js

@@ -0,12 +1,178 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["children", "className", "action", "component", "color", "variant", "size", "fullWidth"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_capitalize as capitalize, unstable_useForkRef as useForkRef } from '@mui/utils';
+import { useButton } from '@mui/base/ButtonUnstyled';
+import composeClasses from '@mui/base/composeClasses';
+import { styled, useThemeProps } from '../styles';
+import buttonClasses, { getButtonUtilityClass } from './buttonClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 
-const Button = props => {
-  return /*#__PURE__*/_jsx("button", _extends({
-    type: "button"
-  }, props));
+const useUtilityClasses = ownerState => {
+  const {
+    color,
+    disabled,
+    focusVisible,
+    focusVisibleClassName,
+    fullWidth,
+    size,
+    variant
+  } = ownerState;
+  const slots = {
+    root: ['root', disabled && 'disabled', focusVisible && 'focusVisible', fullWidth && 'fullWidth', `variant${capitalize(variant)}`, `color${capitalize(color)}`, `size${capitalize(size)}`]
+  };
+  const composedClasses = composeClasses(slots, getButtonUtilityClass, {});
+
+  if (focusVisible && focusVisibleClassName) {
+    composedClasses.root += ` ${focusVisibleClassName}`;
+  }
+
+  return composedClasses;
 };
 
+const ButtonRoot = styled('button', {
+  name: 'MuiButton',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, styles[`variant${capitalize(ownerState.variant)}`], styles[`color${capitalize(ownerState.color)}`], styles[`size${capitalize(ownerState.size)}`], ownerState.fullWidth && styles.fullWidth];
+  }
+})(({
+  theme,
+  ownerState
+}) => {
+  const colorPalette = theme.vars.palette[ownerState.color || 'brand'];
+  const neutral = theme.vars.palette.neutral;
+  return [_extends({
+    padding: '0.25rem 2rem',
+    minHeight: '48px',
+    borderRadius: '28px',
+    border: 'none',
+    backgroundColor: 'transparent',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative'
+  }, theme.typography.button, {
+    [`&.${buttonClasses.disabled}`]: {
+      pointerEvents: 'none',
+      cursor: 'default'
+    },
+    [`&.${buttonClasses.focusVisible}`]: {
+      outline: '4px solid',
+      outlineColor: colorPalette[300]
+    }
+  }, ownerState.fullWidth && {
+    width: '100%'
+  }), ownerState.size === 'small' && {
+    minHeight: '40px'
+  }, ownerState.size === 'large' && {
+    minHeight: '56px'
+  }, ownerState.variant === 'text' && {
+    color: colorPalette[600],
+    [`&.${buttonClasses.focusVisible}`]: {
+      outlineColor: neutral[200]
+    },
+    '&:hover': {
+      backgroundColor: neutral[100]
+    },
+    '&:active': {
+      backgroundColor: neutral[200]
+    },
+    [`&.${buttonClasses.disabled}`]: {
+      color: neutral[300]
+    }
+  }, ownerState.variant === 'contained' && {
+    backgroundColor: colorPalette[600],
+    color: '#fff',
+    '&:hover': {
+      backgroundColor: colorPalette[700]
+    },
+    '&:active': {
+      backgroundColor: colorPalette[500]
+    },
+    [`&.${buttonClasses.disabled}`]: {
+      backgroundColor: colorPalette[300]
+    }
+  }, ownerState.variant === 'outlined' && {
+    color: colorPalette[600],
+    border: '1px solid',
+    borderColor: neutral[300],
+    [`&.${buttonClasses.focusVisible}`]: {
+      outlineColor: neutral[200]
+    },
+    '&:hover': {
+      backgroundColor: neutral[100]
+    },
+    '&:active': {
+      backgroundColor: neutral[200]
+    },
+    [`&.${buttonClasses.disabled}`]: {
+      borderColor: neutral[200],
+      color: neutral[300]
+    }
+  }];
+});
+const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiButton'
+  });
+
+  const {
+    children,
+    className,
+    action,
+    component = 'button',
+    color = 'brand',
+    variant = 'text',
+    size = 'medium',
+    fullWidth = false
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const buttonRef = React.useRef(null);
+  const handleRef = useForkRef(buttonRef, ref);
+  const ComponentProp = component;
+  const {
+    focusVisible,
+    setFocusVisible,
+    getRootProps
+  } = useButton(_extends({}, props, {
+    component: ComponentProp,
+    ref: handleRef
+  }));
+  React.useImperativeHandle(action, () => ({
+    focusVisible: () => {
+      var _buttonRef$current;
+
+      setFocusVisible(true);
+      (_buttonRef$current = buttonRef.current) == null ? void 0 : _buttonRef$current.focus();
+    }
+  }), [setFocusVisible]);
+
+  const ownerState = _extends({}, props, {
+    component,
+    color,
+    fullWidth,
+    variant,
+    size,
+    focusVisible
+  });
+
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(ButtonRoot, _extends({
+    as: ComponentProp,
+    className: clsx(classes.root, className),
+    ownerState: ownerState
+  }, other, getRootProps(), {
+    children: children
+  }));
+});
 process.env.NODE_ENV !== "production" ? Button.propTypes
@@ -21,6 +187,54 @@ /* remove-proptypes */
   /**
+   * A ref for imperative actions. It currently only supports `focusVisible()` action.
+   */
+  action: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focusVisible: PropTypes.func.isRequired
+    })
+  })]),
+
+  /**
    * @ignore
    */
-  children: PropTypes.node
+  children: PropTypes.node,
+
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   * @default 'primary'
+   */
+  color: PropTypes.oneOf(['brand', 'neutral']),
+
+  /**
+   * The component used for the Root slot.
+   * Either a string to use a HTML element or a component.
+   * This is equivalent to `components.Root`. If both are provided, the `component` is used.
+   */
+  component: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .elementType,
+
+  /**
+   * If `true`, the button will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: PropTypes.bool,
+
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   * @default 'medium'
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+
+  /**
+   * The variant to use.
+   * @default 'text'
+   */
+  variant: PropTypes.oneOf(['contained', 'outlined', 'text'])
 } : void 0;
 export default Button;

Button/index.d.ts

 export { default } from './Button';
-export * from './Button';
+export * from './ButtonProps';
+export { default as buttonClasses } from './buttonClasses';
+export * from './buttonClasses';

Button/index.js

 export { default } from './Button';
-export * from './Button';
+export * from './ButtonProps';
+export { default as buttonClasses } from './buttonClasses';
+export * from './buttonClasses';

colors/colors.d.ts

 declare const colors: {
-    blue: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-    };
     purple: {
@@ -15,0 +3,0 @@ 50: string;

colors/colors.js

 const colors = {
-  blue: {
-    50: '#eff6ff',
-    100: '#dbeafe',
-    200: '#bfdbfe',
-    300: '#93c5fd',
-    400: '#60a5fa',
-    500: '#3b82f6',
-    600: '#2563eb',
-    700: '#1d4ed8',
-    800: '#1e40af',
-    900: '#1e3a8a'
-  },
   purple: {
     50: '#FAF8FE',
     100: '#F0EBFD',
-    200: '#F0EBFD',
+    200: '#DDD1FA',
     300: '#C3B2F6',
@@ -19,0 +7,0 @@ 400: '#8E7AEE',

index.js

@@ -1,2 +0,2 @@
-/** @license MUI v5.0.0-alpha.3
+/** @license MUI v5.0.0-alpha.4
  *
@@ -3,0 +3,0 @@ * This source code is licensed under the MIT license found in the

modern/Button/Button.js

@@ -0,12 +1,176 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["children", "className", "action", "component", "color", "variant", "size", "fullWidth"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_capitalize as capitalize, unstable_useForkRef as useForkRef } from '@mui/utils';
+import { useButton } from '@mui/base/ButtonUnstyled';
+import composeClasses from '@mui/base/composeClasses';
+import { styled, useThemeProps } from '../styles';
+import buttonClasses, { getButtonUtilityClass } from './buttonClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 
-const Button = props => {
-  return /*#__PURE__*/_jsx("button", _extends({
-    type: "button"
-  }, props));
+const useUtilityClasses = ownerState => {
+  const {
+    color,
+    disabled,
+    focusVisible,
+    focusVisibleClassName,
+    fullWidth,
+    size,
+    variant
+  } = ownerState;
+  const slots = {
+    root: ['root', disabled && 'disabled', focusVisible && 'focusVisible', fullWidth && 'fullWidth', `variant${capitalize(variant)}`, `color${capitalize(color)}`, `size${capitalize(size)}`]
+  };
+  const composedClasses = composeClasses(slots, getButtonUtilityClass, {});
+
+  if (focusVisible && focusVisibleClassName) {
+    composedClasses.root += ` ${focusVisibleClassName}`;
+  }
+
+  return composedClasses;
 };
 
+const ButtonRoot = styled('button', {
+  name: 'MuiButton',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, styles[`variant${capitalize(ownerState.variant)}`], styles[`color${capitalize(ownerState.color)}`], styles[`size${capitalize(ownerState.size)}`], ownerState.fullWidth && styles.fullWidth];
+  }
+})(({
+  theme,
+  ownerState
+}) => {
+  const colorPalette = theme.vars.palette[ownerState.color || 'brand'];
+  const neutral = theme.vars.palette.neutral;
+  return [_extends({
+    padding: '0.25rem 2rem',
+    minHeight: '48px',
+    borderRadius: '28px',
+    border: 'none',
+    backgroundColor: 'transparent',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative'
+  }, theme.typography.button, {
+    [`&.${buttonClasses.disabled}`]: {
+      pointerEvents: 'none',
+      cursor: 'default'
+    },
+    [`&.${buttonClasses.focusVisible}`]: {
+      outline: '4px solid',
+      outlineColor: colorPalette[300]
+    }
+  }, ownerState.fullWidth && {
+    width: '100%'
+  }), ownerState.size === 'small' && {
+    minHeight: '40px'
+  }, ownerState.size === 'large' && {
+    minHeight: '56px'
+  }, ownerState.variant === 'text' && {
+    color: colorPalette[600],
+    [`&.${buttonClasses.focusVisible}`]: {
+      outlineColor: neutral[200]
+    },
+    '&:hover': {
+      backgroundColor: neutral[100]
+    },
+    '&:active': {
+      backgroundColor: neutral[200]
+    },
+    [`&.${buttonClasses.disabled}`]: {
+      color: neutral[300]
+    }
+  }, ownerState.variant === 'contained' && {
+    backgroundColor: colorPalette[600],
+    color: '#fff',
+    '&:hover': {
+      backgroundColor: colorPalette[700]
+    },
+    '&:active': {
+      backgroundColor: colorPalette[500]
+    },
+    [`&.${buttonClasses.disabled}`]: {
+      backgroundColor: colorPalette[300]
+    }
+  }, ownerState.variant === 'outlined' && {
+    color: colorPalette[600],
+    border: '1px solid',
+    borderColor: neutral[300],
+    [`&.${buttonClasses.focusVisible}`]: {
+      outlineColor: neutral[200]
+    },
+    '&:hover': {
+      backgroundColor: neutral[100]
+    },
+    '&:active': {
+      backgroundColor: neutral[200]
+    },
+    [`&.${buttonClasses.disabled}`]: {
+      borderColor: neutral[200],
+      color: neutral[300]
+    }
+  }];
+});
+const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiButton'
+  });
+
+  const {
+    children,
+    className,
+    action,
+    component = 'button',
+    color = 'brand',
+    variant = 'text',
+    size = 'medium',
+    fullWidth = false
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const buttonRef = React.useRef(null);
+  const handleRef = useForkRef(buttonRef, ref);
+  const ComponentProp = component;
+  const {
+    focusVisible,
+    setFocusVisible,
+    getRootProps
+  } = useButton(_extends({}, props, {
+    component: ComponentProp,
+    ref: handleRef
+  }));
+  React.useImperativeHandle(action, () => ({
+    focusVisible: () => {
+      setFocusVisible(true);
+      buttonRef.current?.focus();
+    }
+  }), [setFocusVisible]);
+
+  const ownerState = _extends({}, props, {
+    component,
+    color,
+    fullWidth,
+    variant,
+    size,
+    focusVisible
+  });
+
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(ButtonRoot, _extends({
+    as: ComponentProp,
+    className: clsx(classes.root, className),
+    ownerState: ownerState
+  }, other, getRootProps(), {
+    children: children
+  }));
+});
 process.env.NODE_ENV !== "production" ? Button.propTypes
@@ -21,6 +185,54 @@ /* remove-proptypes */
   /**
+   * A ref for imperative actions. It currently only supports `focusVisible()` action.
+   */
+  action: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focusVisible: PropTypes.func.isRequired
+    })
+  })]),
+
+  /**
    * @ignore
    */
-  children: PropTypes.node
+  children: PropTypes.node,
+
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   * @default 'primary'
+   */
+  color: PropTypes.oneOf(['brand', 'neutral']),
+
+  /**
+   * The component used for the Root slot.
+   * Either a string to use a HTML element or a component.
+   * This is equivalent to `components.Root`. If both are provided, the `component` is used.
+   */
+  component: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .elementType,
+
+  /**
+   * If `true`, the button will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: PropTypes.bool,
+
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   * @default 'medium'
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+
+  /**
+   * The variant to use.
+   * @default 'text'
+   */
+  variant: PropTypes.oneOf(['contained', 'outlined', 'text'])
 } : void 0;
 export default Button;

modern/Button/index.js

 export { default } from './Button';
-export * from './Button';
+export * from './ButtonProps';
+export { default as buttonClasses } from './buttonClasses';
+export * from './buttonClasses';

modern/colors/colors.js

 const colors = {
-  blue: {
-    50: '#eff6ff',
-    100: '#dbeafe',
-    200: '#bfdbfe',
-    300: '#93c5fd',
-    400: '#60a5fa',
-    500: '#3b82f6',
-    600: '#2563eb',
-    700: '#1d4ed8',
-    800: '#1e40af',
-    900: '#1e3a8a'
-  },
   purple: {
     50: '#FAF8FE',
     100: '#F0EBFD',
-    200: '#F0EBFD',
+    200: '#DDD1FA',
     300: '#C3B2F6',
@@ -19,0 +7,0 @@ 400: '#8E7AEE',

modern/index.js

@@ -1,2 +0,2 @@
-/** @license MUI v5.0.0-alpha.3
+/** @license MUI v5.0.0-alpha.4
  *
@@ -3,0 +3,0 @@ * This source code is licensed under the MIT license found in the

modern/styles/defaultTheme.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import colors from '../colors';
-/**
- * ====================================================
- * Developer facing types, they can augment these types.
- * ====================================================
- */
 
@@ -46,3 +41,3 @@ /**
   fontFamily: {
-    sans: 'IBM Plex Sans',
+    sans: '"Public Sans", Roboto',
     mono: 'Consolas'
@@ -49,0 +44,0 @@ },

modern/styles/index.js

 export * from './CssVarsProvider';
 export * from './defaultTheme';
+export * from './ColorSystem';
 export { default as styled } from './styled';
 export { default as ThemeProvider } from './ThemeProvider';
-export { useTheme } from './ThemeProvider';
+export * from './ThemeProvider';
+export { default as useThemeProps } from './useThemeProps';

modern/styles/ThemeProvider.js

 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["components"];
 import * as React from 'react';
@@ -14,5 +16,12 @@ import { deepmerge } from '@mui/utils';
 }) {
-  let mergedTheme = deepmerge(defaultTheme, theme);
+  const _ref = theme || {},
+        {
+    components
+  } = _ref,
+        filteredTheme = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  let mergedTheme = deepmerge(defaultTheme, filteredTheme);
   mergedTheme = _extends({}, mergedTheme, {
-    vars: mergedTheme
+    vars: mergedTheme,
+    components
   });
@@ -19,0 +28,0 @@ return /*#__PURE__*/_jsx(SystemThemeProvider, {

node/Button/Button.js

@@ -10,2 +10,4 @@ "use strict";
 
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -17,4 +19,18 @@
 
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _utils = require("@mui/utils");
+
+var _ButtonUnstyled = require("@mui/base/ButtonUnstyled");
+
+var _composeClasses = _interopRequireDefault(require("@mui/base/composeClasses"));
+
+var _styles = require("../styles");
+
+var _buttonClasses = _interopRequireWildcard(require("./buttonClasses"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
+const _excluded = ["children", "className", "action", "component", "color", "variant", "size", "fullWidth"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -24,8 +40,162 @@
 
-const Button = props => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", (0, _extends2.default)({
-    type: "button"
-  }, props));
+const useUtilityClasses = ownerState => {
+  const {
+    color,
+    disabled,
+    focusVisible,
+    focusVisibleClassName,
+    fullWidth,
+    size,
+    variant
+  } = ownerState;
+  const slots = {
+    root: ['root', disabled && 'disabled', focusVisible && 'focusVisible', fullWidth && 'fullWidth', `variant${(0, _utils.unstable_capitalize)(variant)}`, `color${(0, _utils.unstable_capitalize)(color)}`, `size${(0, _utils.unstable_capitalize)(size)}`]
+  };
+  const composedClasses = (0, _composeClasses.default)(slots, _buttonClasses.getButtonUtilityClass, {});
+
+  if (focusVisible && focusVisibleClassName) {
+    composedClasses.root += ` ${focusVisibleClassName}`;
+  }
+
+  return composedClasses;
 };
 
+const ButtonRoot = (0, _styles.styled)('button', {
+  name: 'MuiButton',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, styles[`variant${(0, _utils.unstable_capitalize)(ownerState.variant)}`], styles[`color${(0, _utils.unstable_capitalize)(ownerState.color)}`], styles[`size${(0, _utils.unstable_capitalize)(ownerState.size)}`], ownerState.fullWidth && styles.fullWidth];
+  }
+})(({
+  theme,
+  ownerState
+}) => {
+  const colorPalette = theme.vars.palette[ownerState.color || 'brand'];
+  const neutral = theme.vars.palette.neutral;
+  return [(0, _extends2.default)({
+    padding: '0.25rem 2rem',
+    minHeight: '48px',
+    borderRadius: '28px',
+    border: 'none',
+    backgroundColor: 'transparent',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative'
+  }, theme.typography.button, {
+    [`&.${_buttonClasses.default.disabled}`]: {
+      pointerEvents: 'none',
+      cursor: 'default'
+    },
+    [`&.${_buttonClasses.default.focusVisible}`]: {
+      outline: '4px solid',
+      outlineColor: colorPalette[300]
+    }
+  }, ownerState.fullWidth && {
+    width: '100%'
+  }), ownerState.size === 'small' && {
+    minHeight: '40px'
+  }, ownerState.size === 'large' && {
+    minHeight: '56px'
+  }, ownerState.variant === 'text' && {
+    color: colorPalette[600],
+    [`&.${_buttonClasses.default.focusVisible}`]: {
+      outlineColor: neutral[200]
+    },
+    '&:hover': {
+      backgroundColor: neutral[100]
+    },
+    '&:active': {
+      backgroundColor: neutral[200]
+    },
+    [`&.${_buttonClasses.default.disabled}`]: {
+      color: neutral[300]
+    }
+  }, ownerState.variant === 'contained' && {
+    backgroundColor: colorPalette[600],
+    color: '#fff',
+    '&:hover': {
+      backgroundColor: colorPalette[700]
+    },
+    '&:active': {
+      backgroundColor: colorPalette[500]
+    },
+    [`&.${_buttonClasses.default.disabled}`]: {
+      backgroundColor: colorPalette[300]
+    }
+  }, ownerState.variant === 'outlined' && {
+    color: colorPalette[600],
+    border: '1px solid',
+    borderColor: neutral[300],
+    [`&.${_buttonClasses.default.focusVisible}`]: {
+      outlineColor: neutral[200]
+    },
+    '&:hover': {
+      backgroundColor: neutral[100]
+    },
+    '&:active': {
+      backgroundColor: neutral[200]
+    },
+    [`&.${_buttonClasses.default.disabled}`]: {
+      borderColor: neutral[200],
+      color: neutral[300]
+    }
+  }];
+});
+const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiButton'
+  });
+  const {
+    children,
+    className,
+    action,
+    component = 'button',
+    color = 'brand',
+    variant = 'text',
+    size = 'medium',
+    fullWidth = false
+  } = props,
+        other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const buttonRef = React.useRef(null);
+  const handleRef = (0, _utils.unstable_useForkRef)(buttonRef, ref);
+  const ComponentProp = component;
+  const {
+    focusVisible,
+    setFocusVisible,
+    getRootProps
+  } = (0, _ButtonUnstyled.useButton)((0, _extends2.default)({}, props, {
+    component: ComponentProp,
+    ref: handleRef
+  }));
+  React.useImperativeHandle(action, () => ({
+    focusVisible: () => {
+      var _buttonRef$current;
+
+      setFocusVisible(true);
+      (_buttonRef$current = buttonRef.current) == null ? void 0 : _buttonRef$current.focus();
+    }
+  }), [setFocusVisible]);
+  const ownerState = (0, _extends2.default)({}, props, {
+    component,
+    color,
+    fullWidth,
+    variant,
+    size,
+    focusVisible
+  });
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonRoot, (0, _extends2.default)({
+    as: ComponentProp,
+    className: (0, _clsx.default)(classes.root, className),
+    ownerState: ownerState
+  }, other, getRootProps(), {
+    children: children
+  }));
+});
 process.env.NODE_ENV !== "production" ? Button.propTypes
@@ -40,7 +210,55 @@ /* remove-proptypes */
   /**
+   * A ref for imperative actions. It currently only supports `focusVisible()` action.
+   */
+  action: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.shape({
+      focusVisible: _propTypes.default.func.isRequired
+    })
+  })]),
+
+  /**
    * @ignore
    */
-  children: _propTypes.default.node
+  children: _propTypes.default.node,
+
+  /**
+   * @ignore
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   * @default 'primary'
+   */
+  color: _propTypes.default.oneOf(['brand', 'neutral']),
+
+  /**
+   * The component used for the Root slot.
+   * Either a string to use a HTML element or a component.
+   * This is equivalent to `components.Root`. If both are provided, the `component` is used.
+   */
+  component: _propTypes.default
+  /* @typescript-to-proptypes-ignore */
+  .elementType,
+
+  /**
+   * If `true`, the button will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: _propTypes.default.bool,
+
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   * @default 'medium'
+   */
+  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
+
+  /**
+   * The variant to use.
+   * @default 'text'
+   */
+  variant: _propTypes.default.oneOf(['contained', 'outlined', 'text'])
 } : void 0;
 var _default = Button;
 exports.default = _default;

node/Button/index.js

 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
+var _exportNames = {
+  buttonClasses: true
+};
+Object.defineProperty(exports, "buttonClasses", {
+  enumerable: true,
+  get: function () {
+    return _buttonClasses.default;
+  }
+});
 Object.defineProperty(exports, "default", {
@@ -14,12 +24,14 @@ enumerable: true,
 
-var _Button = _interopRequireWildcard(require("./Button"));
+var _Button = _interopRequireDefault(require("./Button"));
 
-Object.keys(_Button).forEach(function (key) {
+var _ButtonProps = require("./ButtonProps");
+
+Object.keys(_ButtonProps).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Button[key]) return;
+  if (key in exports && exports[key] === _ButtonProps[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _Button[key];
+      return _ButtonProps[key];
     }
@@ -29,4 +41,18 @@ });
 
+var _buttonClasses = _interopRequireWildcard(require("./buttonClasses"));
+
+Object.keys(_buttonClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _buttonClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _buttonClasses[key];
+    }
+  });
+});
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

node/colors/colors.js

@@ -8,18 +8,6 @@ "use strict";
 const colors = {
-  blue: {
-    50: '#eff6ff',
-    100: '#dbeafe',
-    200: '#bfdbfe',
-    300: '#93c5fd',
-    400: '#60a5fa',
-    500: '#3b82f6',
-    600: '#2563eb',
-    700: '#1d4ed8',
-    800: '#1e40af',
-    900: '#1e3a8a'
-  },
   purple: {
     50: '#FAF8FE',
     100: '#F0EBFD',
-    200: '#F0EBFD',
+    200: '#DDD1FA',
     300: '#C3B2F6',
@@ -26,0 +14,0 @@ 400: '#8E7AEE',

node/index.js

@@ -1,2 +0,2 @@
-/** @license MUI v5.0.0-alpha.3
+/** @license MUI v5.0.0-alpha.4
  *
@@ -3,0 +3,0 @@ * This source code is licensed under the MIT license found in the

node/styles/defaultTheme.js

@@ -51,3 +51,3 @@ "use strict";
   fontFamily: {
-    sans: 'IBM Plex Sans',
+    sans: '"Public Sans", Roboto',
     mono: 'Consolas'
@@ -54,0 +54,0 @@ },

node/styles/index.js

@@ -11,3 +11,3 @@ "use strict";
   ThemeProvider: true,
-  useTheme: true
+  useThemeProps: true
 };
@@ -26,6 +26,6 @@ Object.defineProperty(exports, "ThemeProvider", {
 });
-Object.defineProperty(exports, "useTheme", {
+Object.defineProperty(exports, "useThemeProps", {
   enumerable: true,
   get: function () {
-    return _ThemeProvider.useTheme;
+    return _useThemeProps.default;
   }
@@ -62,2 +62,16 @@ });
 
+var _ColorSystem = require("./ColorSystem");
+
+Object.keys(_ColorSystem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ColorSystem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ColorSystem[key];
+    }
+  });
+});
+
 var _styled = _interopRequireDefault(require("./styled"));
@@ -67,4 +81,18 @@
 
+Object.keys(_ThemeProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ThemeProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ThemeProvider[key];
+    }
+  });
+});
+
+var _useThemeProps = _interopRequireDefault(require("./useThemeProps"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

node/styles/ThemeProvider.js

@@ -13,2 +13,4 @@ "use strict";
 
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var React = _interopRequireWildcard(require("react"));
@@ -24,2 +26,4 @@
 
+const _excluded = ["components"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -39,5 +43,12 @@
 }) {
-  let mergedTheme = (0, _utils.deepmerge)(_defaultTheme.default, theme);
+  const _ref = theme || {},
+        {
+    components
+  } = _ref,
+        filteredTheme = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+
+  let mergedTheme = (0, _utils.deepmerge)(_defaultTheme.default, filteredTheme);
   mergedTheme = (0, _extends2.default)({}, mergedTheme, {
-    vars: mergedTheme
+    vars: mergedTheme,
+    components
   });
@@ -44,0 +55,0 @@ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_system.ThemeProvider, {

package.json

 {
   "name": "@mui/joy",
-  "version": "5.0.0-alpha.3",
+  "version": "5.0.0-alpha.4",
   "private": false,
@@ -28,3 +28,3 @@ "author": "MUI Team",
   "peerDependencies": {
-    "@emotion/react": "^11.4.1",
+    "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
@@ -47,5 +47,12 @@ "@types/react": "^16.8.6 || ^17.0.0",
   "dependencies": {
-    "@mui/system": "^5.2.1",
+    "@babel/runtime": "^7.16.3",
+    "@mui/base": "5.0.0-alpha.58",
+    "@mui/system": "^5.2.2",
     "@mui/types": "^7.1.0",
-    "@mui/utils": "^5.2.1"
+    "@mui/utils": "^5.2.2",
+    "clsx": "^1.1.1",
+    "csstype": "^3.0.10",
+    "hoist-non-react-statics": "^3.3.2",
+    "prop-types": "^15.7.2",
+    "react-is": "^17.0.2"
   },
@@ -52,0 +59,0 @@ "sideEffects": false,

styles/CssVarsProvider.d.ts

 /// <reference types="react" />
-import { ColorSystems, StaticTheme } from './defaultTheme';
+import { StaticTheme } from './defaultTheme';
+import { ColorSystems } from './ColorSystem';
 declare type PartialDeep<T> = {
@@ -4,0 +5,0 @@ [K in keyof T]?: PartialDeep<T[K]>;

styles/defaultTheme.d.ts

 import * as React from 'react';
+import { Components } from './components';
+import { ColorSystems } from './ColorSystem';
 /**
@@ -7,34 +9,2 @@ * ====================================================
  */
-export interface PaletteRange {
-    50: string;
-    100: string;
-    200: string;
-    300: string;
-    400: string;
-    500: string;
-    600: string;
-    700: string;
-    800: string;
-    900: string;
-}
-export interface PaletteText {
-    heading: React.CSSProperties['color'];
-    headingIntro: React.CSSProperties['color'];
-    content: React.CSSProperties['color'];
-    detail: React.CSSProperties['color'];
-    overline: React.CSSProperties['color'];
-}
-export interface PaletteBgNeutral {
-    transparency: React.CSSProperties['backgroundColor'];
-    plain: React.CSSProperties['backgroundColor'];
-}
-export interface Palette {
-    brand: PaletteRange;
-    neutral: PaletteRange;
-    text: PaletteText;
-    bgNeutral: PaletteBgNeutral;
-}
-export interface ColorSystems {
-    palette: Palette;
-}
 export interface BorderRadius {
@@ -112,4 +82,5 @@ md: React.CSSProperties['borderRadius'];
     vars: ThemeWithoutVars;
+    components?: Components;
 }
 declare const defaultTheme: JoyTheme;
 export default defaultTheme;

styles/defaultTheme.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import colors from '../colors';
-/**
- * ====================================================
- * Developer facing types, they can augment these types.
- * ====================================================
- */
 
@@ -46,3 +41,3 @@ /**
   fontFamily: {
-    sans: 'IBM Plex Sans',
+    sans: '"Public Sans", Roboto',
     mono: 'Consolas'
@@ -49,0 +44,0 @@ },

styles/index.d.ts

 export * from './CssVarsProvider';
 export * from './defaultTheme';
+export * from './ColorSystem';
 export { default as styled } from './styled';
 export { default as ThemeProvider } from './ThemeProvider';
-export { useTheme } from './ThemeProvider';
+export * from './ThemeProvider';
+export { default as useThemeProps } from './useThemeProps';

styles/index.js

 export * from './CssVarsProvider';
 export * from './defaultTheme';
+export * from './ColorSystem';
 export { default as styled } from './styled';
 export { default as ThemeProvider } from './ThemeProvider';
-export { useTheme } from './ThemeProvider';
+export * from './ThemeProvider';
+export { default as useThemeProps } from './useThemeProps';

styles/ThemeProvider.d.ts

@@ -8,4 +8,6 @@ import * as React from 'react';
 export default function ThemeProvider({ children, theme, }: React.PropsWithChildren<{
-    theme?: PartialDeep<Omit<JoyTheme, 'vars'>>;
+    theme?: PartialDeep<Omit<JoyTheme, 'vars' | 'components'>> & {
+        components?: JoyTheme['components'];
+    };
 }>): JSX.Element;
 export {};

styles/ThemeProvider.js

 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["components"];
 import * as React from 'react';
@@ -14,5 +16,12 @@ import { deepmerge } from '@mui/utils';
 }) {
-  let mergedTheme = deepmerge(defaultTheme, theme);
+  const _ref = theme || {},
+        {
+    components
+  } = _ref,
+        filteredTheme = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  let mergedTheme = deepmerge(defaultTheme, filteredTheme);
   mergedTheme = _extends({}, mergedTheme, {
-    vars: mergedTheme
+    vars: mergedTheme,
+    components
   });
@@ -19,0 +28,0 @@ return /*#__PURE__*/_jsx(SystemThemeProvider, {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

418246

increased by8.28%

Number of package files

64

increased by36.17%

Lines of code

2134

increased by63.15%

Worsened metrics

Dependency count

15

increased by87.5%

Published versions last year

33

decreased by-2.94%

Dependency changes

• + Added@babel/runtime@^7.16.3

• + Added@mui/base@5.0.0-alpha.58

• + Addedclsx@^1.1.1

• + Addedcsstype@^3.0.10

• + Addedhoist-non-react-statics@^3.3.2

• + Addedprop-types@^15.7.2

• + Addedreact-is@^17.0.2

• + Added@mui/base@5.0.0-alpha.58(transitive)

• + Added@mui/private-theming@5.16.13(transitive)

• + Added@mui/styled-engine@5.16.13(transitive)

• + Added@mui/system@5.16.13(transitive)

• + Added@mui/utils@5.16.13(transitive)

• + Added@popperjs/core@2.11.8(transitive)

• + Addedclsx@1.2.1(transitive)

• + Addedreact-is@17.0.2(transitive)

• - Removed@mui/private-theming@5.16.12(transitive)

• - Removed@mui/styled-engine@5.16.12(transitive)

• - Removed@mui/system@5.16.12(transitive)

• - Removed@mui/utils@5.16.12(transitive)

• Updated@mui/system@^5.2.2

• Updated@mui/utils@^5.2.2