@mui/material 7.0.0-beta.0 → 7.0.0-beta.2

package/Drawer/Drawer.d.ts

@@ -0,0 +1,154 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { InternalStandardProps as StandardProps, Theme } from "../index.js";
+import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
+import { ModalProps } from "../Modal/index.js";
+import { BackdropProps } from "../Backdrop/index.js";
+import { SlideProps } from "../Slide/index.js";
+import { PaperProps } from "../Paper/index.js";
+import { TransitionProps } from "../transitions/transition.js";
+import { DrawerClasses } from "./drawerClasses.js";
+export interface DrawerRootSlotPropsOverrides {}
+export interface DrawerDockedSlotPropsOverrides {}
+export interface DrawerPaperSlotPropsOverrides {}
+export interface DrawerTransitionSlotPropsOverrides {}
+export interface DrawerBackdropSlotPropsOverrides {}
+export interface DrawerSlots {
+  /**
+   * The component used for the root when the variant is `temporary`.
+   * @default Modal
+   */
+  root: React.ElementType;
+  /**
+   * The component used for the Modal backdrop.
+   * @default Backdrop
+   */
+  backdrop: React.ElementType;
+  /**
+   * The component used for the root element when the variant is `permanent` or `persistent`.
+   * @default div
+   */
+  docked: React.ElementType;
+  /**
+   * The component used for the paper.
+   * @default Paper
+   */
+  paper: React.ElementType;
+  /**
+   * The component used for the transition.
+   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * @default Slide
+   */
+  transition: React.ElementType;
+}
+export type DrawerSlotsAndSlotProps = CreateSlotsAndSlotProps<DrawerSlots, {
+  /**
+   * Props forwarded to the root slot.
+   * By default, the avaible props are based on the [Modal](https://mui.com/material-ui/api/modal/#props) component.
+   */
+  root: SlotProps<React.ElementType<ModalProps>, DrawerRootSlotPropsOverrides, DrawerOwnerState>;
+  /**
+   * Props forwarded to the backdrop slot.
+   * By default, the avaible props are based on the [Backdrop](https://mui.com/material-ui/api/backdrop/#props) component.
+   */
+  backdrop: SlotProps<React.ElementType<BackdropProps>, DrawerBackdropSlotPropsOverrides, DrawerOwnerState>;
+  /**
+   * Props forwarded to the docked slot.
+   * By default, the avaible props are based on a div element.
+   */
+  docked: SlotProps<'div', DrawerDockedSlotPropsOverrides, DrawerOwnerState>;
+  /**
+   * Props forwarded to the paper slot.
+   * By default, the avaible props are based on the [Paper](https://mui.com/material-ui/api/paper/#props) component.
+   */
+  paper: SlotProps<React.ElementType<PaperProps>, DrawerPaperSlotPropsOverrides, DrawerOwnerState>;
+  /**
+   * Props forwarded to the transition slot.
+   * By default, the avaible props are based on the [Slide](https://mui.com/material-ui/api/slide/#props) component.
+   */
+  transition: SlotProps<React.ElementType, TransitionProps & DrawerTransitionSlotPropsOverrides, DrawerOwnerState>;
+}>;
+export interface DrawerProps extends StandardProps<ModalProps, 'open' | 'children' | 'slots' | 'slotProps'>, DrawerSlotsAndSlotProps {
+  /**
+   * Side from which the drawer will appear.
+   * @default 'left'
+   */
+  anchor?: 'left' | 'top' | 'right' | 'bottom';
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<DrawerClasses>;
+  /**
+   * The elevation of the drawer.
+   * @default 16
+   */
+  elevation?: number;
+  /**
+   * Props applied to the [`Modal`](https://mui.com/material-ui/api/modal/) element.
+   * @default {}
+   */
+  ModalProps?: Partial<ModalProps>;
+  /**
+   * Callback fired when the component requests to be closed.
+   * The `reason` parameter can optionally be used to control the response to `onClose`.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
+   */
+  onClose?: ModalProps['onClose'];
+  /**
+   * If `true`, the component is shown.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Props applied to the [`Paper`](https://mui.com/material-ui/api/paper/) element.
+   * @deprecated use the `slotProps.paper` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   * @default {}
+   */
+  PaperProps?: Partial<PaperProps<React.ElementType>>;
+  /**
+   * Props applied to the [`Slide`](https://mui.com/material-ui/api/slide/) element.
+   * @deprecated use the `slotProps.transition` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  SlideProps?: Partial<SlideProps>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   * @default {
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
+   * }
+   */
+  transitionDuration?: TransitionProps['timeout'];
+  /**
+   * The variant to use.
+   * @default 'temporary'
+   */
+  variant?: 'permanent' | 'persistent' | 'temporary';
+}
+
+// omit `slots` and `slotProps` to prevent recusion
+export interface DrawerOwnerState extends Omit<DrawerProps, 'slots' | 'slotProps'> {}
+
+/**
+ * The props of the [Modal](https://next.mui.com/material-ui/api/modal/) component are available
+ * when `variant="temporary"` is set.
+ *
+ * Demos:
+ *
+ * - [Drawer](https://next.mui.com/material-ui/react-drawer/)
+ *
+ * API:
+ *
+ * - [Drawer API](https://next.mui.com/material-ui/api/drawer/)
+ */
+export default function Drawer(props: DrawerProps): React.JSX.Element;

package/Drawer/drawerClasses.d.ts

@@ -0,0 +1,54 @@
+export interface DrawerClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `variant="permanent or persistent"`. */
+  docked: string;
+  /** Styles applied to the Paper component. */
+  paper: string;
+  /** Styles applied to the root element if `anchor="left"`. */
+  anchorLeft: string;
+  /** Styles applied to the root element if `anchor="right"`. */
+  anchorRight: string;
+  /** Styles applied to the root element if `anchor="top"`. */
+  anchorTop: string;
+  /** Styles applied to the root element if `anchor="bottom"`. */
+  anchorBottom: string;
+  /** Styles applied to the Paper component if `anchor="left"`.
+   *  @deprecated Combine the [.MuiDrawer-anchorLeft](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorLeft) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+   */
+  paperAnchorLeft: string;
+  /** Styles applied to the Paper component if `anchor="right"`.
+   *  @deprecated Combine the [.MuiDrawer-anchorRight](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorRight) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+   */
+  paperAnchorRight: string;
+  /** Styles applied to the Paper component if `anchor="top"`.
+   *  @deprecated Combine the [.MuiDrawer-anchorTop](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorTop) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+   */
+  paperAnchorTop: string;
+  /** Styles applied to the Paper component if `anchor="bottom"`.
+   *  @deprecated Combine the [.MuiDrawer-anchorBottom](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorBottom) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+   */
+  paperAnchorBottom: string;
+  /** Styles applied to the Paper component if `anchor="left"` and `variant` is not "temporary".
+   * @deprecated Combine the [.MuiDrawer-anchorLeft](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorLeft), [.MuiDrawer-docked](/material-ui/api/drawer/#drawer-classes-MuiDrawer-docked) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+   */
+  paperAnchorDockedLeft: string;
+  /** Styles applied to the Paper component if `anchor="top"` and `variant` is not "temporary".
+   * @deprecated Combine the [.MuiDrawer-anchorTop](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorTop), [.MuiDrawer-docked](/material-ui/api/drawer/#drawer-classes-MuiDrawer-docked) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+   */
+  paperAnchorDockedTop: string;
+  /** Styles applied to the Paper component if `anchor="right"` and `variant` is not "temporary".
+   * @deprecated Combine the [.MuiDrawer-anchorRight](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorRight), [.MuiDrawer-docked](/material-ui/api/drawer/#drawer-classes-MuiDrawer-docked) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+   */
+  paperAnchorDockedRight: string;
+  /** Styles applied to the Paper component if `anchor="bottom"` and `variant` is not "temporary".
+   * @deprecated Combine the [.MuiDrawer-anchorBottom](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorBottom), [.MuiDrawer-docked](/material-ui/api/drawer/#drawer-classes-MuiDrawer-docked) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+   */
+  paperAnchorDockedBottom: string;
+  /** Styles applied to the Modal component. */
+  modal: string;
+}
+export type DrawerClassKey = keyof DrawerClasses;
+export declare function getDrawerUtilityClass(slot: string): string;
+declare const drawerClasses: DrawerClasses;
+export default drawerClasses;

package/Drawer/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./Drawer.js";
+export * from "./Drawer.js";
+export { default as drawerClasses } from "./drawerClasses.js";
+export * from "./drawerClasses.js";

package/Fab/Fab.d.ts

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { OverridableStringUnion } from '@mui/types';
+import { SxProps } from '@mui/system';
+import { PropTypes, Theme } from "../index.js";
+import { ExtendButtonBase, ExtendButtonBaseTypeMap } from "../ButtonBase/index.js";
+import { OverrideProps } from "../OverridableComponent/index.js";
+import { FabClasses } from "./fabClasses.js";
+export interface FabPropsVariantOverrides {}
+export interface FabPropsSizeOverrides {}
+export interface FabPropsColorOverrides {}
+export interface FabOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<FabClasses>;
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'default'
+   */
+  color?: OverridableStringUnion<PropTypes.Color | 'success' | 'error' | 'info' | 'warning', FabPropsColorOverrides>;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple?: boolean;
+  /**
+   * If `true`, the ripple effect is disabled.
+   */
+  disableRipple?: boolean;
+  /**
+   * The URL to link to when the button is clicked.
+   * If defined, an `a` element will be used as the root node.
+   */
+  href?: string;
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   * @default 'large'
+   */
+  size?: OverridableStringUnion<'small' | 'medium' | 'large', FabPropsSizeOverrides>;
+  /**
+   * The variant to use.
+   * @default 'circular'
+   */
+  variant?: OverridableStringUnion<'circular' | 'extended', FabPropsVariantOverrides>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+export type FabTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'button'> = ExtendButtonBaseTypeMap<{
+  props: AdditionalProps & FabOwnProps;
+  defaultComponent: RootComponent;
+}>;
+
+/**
+ *
+ * Demos:
+ *
+ * - [Floating Action Button](https://next.mui.com/material-ui/react-floating-action-button/)
+ *
+ * API:
+ *
+ * - [Fab API](https://next.mui.com/material-ui/api/fab/)
+ * - inherits [ButtonBase API](https://next.mui.com/material-ui/api/button-base/)
+ */
+declare const Fab: ExtendButtonBase<FabTypeMap>;
+export type FabProps<RootComponent extends React.ElementType = FabTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<FabTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+export default Fab;

package/Fab/fabClasses.d.ts

@@ -0,0 +1,26 @@
+export interface FabClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `color="primary"`. */
+  primary: string;
+  /** Styles applied to the root element if `color="secondary"`. */
+  secondary: string;
+  /** Styles applied to the root element if `variant="extended"`. */
+  extended: string;
+  /** Styles applied to the root element if `variant="circular"`. */
+  circular: string;
+  /** State class applied to the ButtonBase root element if the button is keyboard focused. */
+  focusVisible: string;
+  /** State class applied to the root element if `disabled={true}`. */
+  disabled: string;
+  /** Styles applied to the root element if `color="inherit"`. */
+  colorInherit: string;
+  /** Styles applied to the root element if `size="small"``. */
+  sizeSmall: string;
+  /** Styles applied to the root element if `size="medium"``. */
+  sizeMedium: string;
+}
+export type FabClassKey = keyof FabClasses;
+export declare function getFabUtilityClass(slot: string): string;
+declare const fabClasses: FabClasses;
+export default fabClasses;

package/Fab/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./Fab.js";
+export * from "./Fab.js";
+export { default as fabClasses } from "./fabClasses.js";
+export * from "./fabClasses.js";

package/Fade/Fade.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { TransitionProps } from "../transitions/transition.js";
+export interface FadeProps extends Omit<TransitionProps, 'children'> {
+  /**
+   * Perform the enter transition when it first mounts if `in` is also `true`.
+   * Set this to `false` to disable this behavior.
+   * @default true
+   */
+  appear?: boolean;
+  /**
+   * A single child content element.
+   */
+  children: React.ReactElement<unknown, any>;
+  /**
+   * The transition timing function.
+   * You may specify a single easing or a object containing enter and exit values.
+   */
+  easing?: TransitionProps['easing'];
+  /**
+   * If `true`, the component will transition in.
+   */
+  in?: boolean;
+  ref?: React.Ref<unknown>;
+  /**
+   * The duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   * @default {
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
+   * }
+   */
+  timeout?: TransitionProps['timeout'];
+}
+
+/**
+ * The Fade transition is used by the [Modal](https://next.mui.com/material-ui/react-modal/) component.
+ * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
+ *
+ * Demos:
+ *
+ * - [Transitions](https://next.mui.com/material-ui/transitions/)
+ *
+ * API:
+ *
+ * - [Fade API](https://next.mui.com/material-ui/api/fade/)
+ * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props)
+ */
+export default function Fade(props: FadeProps): React.JSX.Element;

package/Fade/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Fade.js";
+export * from "./Fade.js";

package/FilledInput/FilledInput.d.ts

@@ -0,0 +1,42 @@
+import { SxProps } from '@mui/system';
+import { InternalStandardProps as StandardProps, Theme } from "../index.js";
+import { InputBaseProps } from "../InputBase/index.js";
+import { FilledInputClasses } from "./filledInputClasses.js";
+export interface FilledInputProps extends StandardProps<InputBaseProps> {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<FilledInputClasses>;
+  /**
+   * If `true`, the label is hidden.
+   * This is used to increase density for a `FilledInput`.
+   * Be sure to add `aria-label` to the `input` element.
+   * @default false
+   */
+  hiddenLabel?: boolean;
+  /**
+   * If `true`, the input will not have an underline.
+   * @default false
+   */
+  disableUnderline?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Text Field](https://next.mui.com/material-ui/react-text-field/)
+ *
+ * API:
+ *
+ * - [FilledInput API](https://next.mui.com/material-ui/api/filled-input/)
+ * - inherits [InputBase API](https://next.mui.com/material-ui/api/input-base/)
+ */
+declare const FilledInput: ((props: FilledInputProps) => React.JSX.Element) & {
+  muiName: string;
+};
+export default FilledInput;

package/FilledInput/filledInputClasses.d.ts

@@ -0,0 +1,30 @@
+export interface FilledInputClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if color secondary. */
+  colorSecondary: string;
+  /** Styles applied to the root element unless `disableUnderline={true}`. */
+  underline: string;
+  /** State class applied to the root element if the component is focused. */
+  focused: string;
+  /** State class applied to the root element if `disabled={true}`. */
+  disabled: string;
+  /** Styles applied to the root element if `startAdornment` is provided. */
+  adornedStart: string;
+  /** Styles applied to the root element if `endAdornment` is provided. */
+  adornedEnd: string;
+  /** State class applied to the root element if `error={true}`. */
+  error: string;
+  /** Styles applied to the root element if `size="small"`. */
+  sizeSmall: string;
+  /** Styles applied to the root element if `multiline={true}`. */
+  multiline: string;
+  /** Styles applied to the root element if `hiddenLabel={true}`. */
+  hiddenLabel: string;
+  /** Styles applied to the input element. */
+  input: string;
+}
+export type FilledInputClassKey = keyof FilledInputClasses;
+export declare function getFilledInputUtilityClass(slot: string): string;
+declare const filledInputClasses: FilledInputClasses;
+export default filledInputClasses;

package/FilledInput/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./FilledInput.js";
+export * from "./FilledInput.js";
+export { default as filledInputClasses } from "./filledInputClasses.js";
+export * from "./filledInputClasses.js";

package/FormControl/FormControl.d.ts

@@ -0,0 +1,120 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { OverridableStringUnion } from '@mui/types';
+import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
+import { Theme } from "../styles/index.js";
+import { FormControlClasses } from "./formControlClasses.js";
+export interface FormControlPropsSizeOverrides {}
+export interface FormControlPropsColorOverrides {}
+export interface FormControlOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.HTMLAttributes<HTMLDivElement>['children'];
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<FormControlClasses>;
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color?: OverridableStringUnion<'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', FormControlPropsColorOverrides>;
+  /**
+   * If `true`, the label, input and helper text should be displayed in a disabled state.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the label is displayed in an error state.
+   * @default false
+   */
+  error?: boolean;
+  /**
+   * If `true`, the component will take up the full width of its container.
+   * @default false
+   */
+  fullWidth?: boolean;
+  /**
+   * If `true`, the component is displayed in focused state.
+   */
+  focused?: boolean;
+  /**
+   * If `true`, the label is hidden.
+   * This is used to increase density for a `FilledInput`.
+   * Be sure to add `aria-label` to the `input` element.
+   * @default false
+   */
+  hiddenLabel?: boolean;
+  /**
+   * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
+   * @default 'none'
+   */
+  margin?: 'dense' | 'normal' | 'none';
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   * @default false
+   */
+  required?: boolean;
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size?: OverridableStringUnion<'small' | 'medium', FormControlPropsSizeOverrides>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant?: 'standard' | 'outlined' | 'filled';
+}
+export interface FormControlTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
+  props: AdditionalProps & FormControlOwnProps;
+  defaultComponent: RootComponent;
+}
+
+/**
+ * Provides context such as filled/focused/error/required for form inputs.
+ * Relying on the context provides high flexibility and ensures that the state always stays
+ * consistent across the children of the `FormControl`.
+ * This context is used by the following components:
+ *
+ * * FormLabel
+ * * FormHelperText
+ * * Input
+ * * InputLabel
+ *
+ * You can find one composition example below and more going to [the demos](https://next.mui.com/material-ui/react-text-field/#components).
+ *
+ * ```jsx
+ * <FormControl>
+ *   <InputLabel htmlFor="my-input">Email address</InputLabel>
+ *   <Input id="my-input" aria-describedby="my-helper-text" />
+ *   <FormHelperText id="my-helper-text">We'll never share your email.</FormHelperText>
+ * </FormControl>
+ * ```
+ *
+ * ⚠️ Only one `InputBase` can be used within a FormControl because it creates visual inconsistencies.
+ * For instance, only one input can be focused at the same time, the state shouldn't be shared.
+ *
+ * Demos:
+ *
+ * - [Checkbox](https://next.mui.com/material-ui/react-checkbox/)
+ * - [Radio Group](https://next.mui.com/material-ui/react-radio-button/)
+ * - [Switch](https://next.mui.com/material-ui/react-switch/)
+ * - [Text Field](https://next.mui.com/material-ui/react-text-field/)
+ *
+ * API:
+ *
+ * - [FormControl API](https://next.mui.com/material-ui/api/form-control/)
+ */
+declare const FormControl: OverridableComponent<FormControlTypeMap>;
+export type FormControlProps<RootComponent extends React.ElementType = FormControlTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<FormControlTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+export default FormControl;

package/FormControl/FormControlContext.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { FormControlProps } from "./FormControl.js";
+type ContextFromPropsKey = 'color' | 'disabled' | 'error' | 'fullWidth' | 'hiddenLabel' | 'margin' | 'onBlur' | 'onFocus' | 'required' | 'size' | 'variant';
+export interface FormControlState extends Pick<FormControlProps, ContextFromPropsKey> {
+  adornedStart: boolean;
+  filled: boolean;
+  focused: boolean;
+  onEmpty: () => void;
+  onFilled: () => void;
+  registerEffect: () => void;
+  setAdornedStart: React.Dispatch<React.SetStateAction<boolean>>;
+}
+/**
+ * @ignore - internal component.
+ */
+declare const FormControlContext: React.Context<FormControlState | undefined>;
+export default FormControlContext;

package/FormControl/formControlClasses.d.ts

@@ -0,0 +1,14 @@
+export interface FormControlClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `margin="normal"`. */
+  marginNormal: string;
+  /** Styles applied to the root element if `margin="dense"`. */
+  marginDense: string;
+  /** Styles applied to the root element if `fullWidth={true}`. */
+  fullWidth: string;
+}
+export type FormControlClassKey = keyof FormControlClasses;
+export declare function getFormControlUtilityClasses(slot: string): string;
+declare const formControlClasses: FormControlClasses;
+export default formControlClasses;

package/FormControl/index.d.ts

@@ -0,0 +1,6 @@
+export { default } from "./FormControl.js";
+export * from "./FormControl.js";
+export { default as useFormControl } from "./useFormControl.js";
+export { FormControlState } from "./FormControlContext.js";
+export { default as formControlClasses } from "./formControlClasses.js";
+export * from "./formControlClasses.js";

package/FormControl/useFormControl.d.ts

@@ -0,0 +1,2 @@
+import { FormControlState } from "./FormControlContext.js";
+export default function useFormControl(): FormControlState | undefined;