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

package/StepLabel/stepLabelClasses.d.ts

@@ -0,0 +1,28 @@
+export interface StepLabelClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `orientation="horizontal"`. */
+  horizontal: string;
+  /** Styles applied to the root element if `orientation="vertical"`. */
+  vertical: string;
+  /** Styles applied to the label element that wraps `children`. */
+  label: string;
+  /** State class applied to the label element if `active={true}`. */
+  active: string;
+  /** State class applied to the label element if `completed={true}`. */
+  completed: string;
+  /** State class applied to the root and label elements if `error={true}`. */
+  error: string;
+  /** State class applied to the root and label elements if `disabled={true}`. */
+  disabled: string;
+  /** Styles applied to the `icon` container element. */
+  iconContainer: string;
+  /** State class applied to the root and icon container and label if `alternativeLabel={true}`. */
+  alternativeLabel: string;
+  /** Styles applied to the container element which wraps label and `optional`. */
+  labelContainer: string;
+}
+export type StepLabelClassKey = keyof StepLabelClasses;
+export declare function getStepLabelUtilityClass(slot: string): string;
+declare const stepLabelClasses: StepLabelClasses;
+export default stepLabelClasses;

package/Stepper/Stepper.d.ts

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
+import { Theme } from "../styles/index.js";
+import { PaperProps } from "../Paper/index.js";
+import { StepperClasses } from "./stepperClasses.js";
+export type Orientation = 'horizontal' | 'vertical';
+export interface StepperOwnProps extends Pick<PaperProps, 'elevation' | 'square' | 'variant'> {
+  /**
+   * Set the active step (zero based index).
+   * Set to -1 to disable all the steps.
+   * @default 0
+   */
+  activeStep?: number;
+  /**
+   * If set to 'true' and orientation is horizontal,
+   * then the step label will be positioned under the icon.
+   * @default false
+   */
+  alternativeLabel?: boolean;
+  /**
+   * Two or more `<Step />` components.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<StepperClasses>;
+  /**
+   * An element to be placed between each step.
+   * @default <StepConnector />
+   */
+  connector?: React.ReactElement<unknown, any> | null;
+  /**
+   * If set the `Stepper` will not assist in controlling steps for linear flow.
+   * @default false
+   */
+  nonLinear?: boolean;
+  /**
+   * The component orientation (layout flow direction).
+   * @default 'horizontal'
+   */
+  orientation?: Orientation;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+export interface StepperTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
+  props: AdditionalProps & StepperOwnProps;
+  defaultComponent: RootComponent;
+}
+export type StepperProps<RootComponent extends React.ElementType = StepperTypeMap['defaultComponent'], AdditionalProps = {
+  component?: React.ElementType;
+}> = OverrideProps<StepperTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+export type StepperClasskey = keyof NonNullable<StepperProps['classes']>;
+
+/**
+ *
+ * Demos:
+ *
+ * - [Stepper](https://next.mui.com/material-ui/react-stepper/)
+ *
+ * API:
+ *
+ * - [Stepper API](https://next.mui.com/material-ui/api/stepper/)
+ */
+declare const Stepper: OverridableComponent<StepperTypeMap>;
+export default Stepper;

package/Stepper/StepperContext.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export interface StepperContextType {
+  activeStep: number;
+  alternativeLabel: boolean;
+  connector: React.ReactNode;
+  nonLinear: boolean;
+  orientation: 'horizontal' | 'vertical';
+}
+/**
+ * Provides information about the current step in Stepper.
+ */
+declare const StepperContext: React.Context<{} | StepperContextType>;
+/**
+ * Returns the current StepperContext or an empty object if no StepperContext
+ * has been defined in the component tree.
+ */
+export declare function useStepperContext(): StepperContextType | {};
+export default StepperContext;

package/Stepper/index.d.ts

@@ -0,0 +1,6 @@
+export { default } from "./Stepper.js";
+export * from "./Stepper.js";
+export { default as stepperClasses } from "./stepperClasses.js";
+export * from "./stepperClasses.js";
+export { default as StepperContext } from "./StepperContext.js";
+export * from "./StepperContext.js";

package/Stepper/stepperClasses.d.ts

@@ -0,0 +1,16 @@
+export interface StepperClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `orientation="horizontal"`. */
+  horizontal: string;
+  /** Styles applied to the root element if `orientation="vertical"`. */
+  vertical: string;
+  /** Styles applied to the root element if `nonLinear={true}`. */
+  nonLinear: string;
+  /** Styles applied to the root element if `alternativeLabel={true}`. */
+  alternativeLabel: string;
+}
+export type StepperClassKey = keyof StepperClasses;
+export declare function getStepperUtilityClass(slot: string): string;
+declare const stepperClasses: StepperClasses;
+export default stepperClasses;

package/SvgIcon/SvgIcon.d.ts

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { OverridableStringUnion } from '@mui/types';
+import { Theme } from "../styles/index.js";
+import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
+import { SvgIconClasses } from "./svgIconClasses.js";
+export interface SvgIconPropsSizeOverrides {}
+export interface SvgIconPropsColorOverrides {}
+export interface SvgIconOwnProps {
+  /**
+   * Node passed into the SVG element.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<SvgIconClasses>;
+  /**
+   * 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).
+   * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
+   * @default 'inherit'
+   */
+  color?: OverridableStringUnion<'inherit' | 'action' | 'disabled' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', SvgIconPropsColorOverrides>;
+  /**
+   * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
+   * @default 'medium'
+   */
+  fontSize?: OverridableStringUnion<'inherit' | 'large' | 'medium' | 'small', SvgIconPropsSizeOverrides>;
+  /**
+   * Applies a color attribute to the SVG element.
+   */
+  htmlColor?: string;
+  /**
+   * If `true`, the root node will inherit the custom `component`'s viewBox and the `viewBox`
+   * prop will be ignored.
+   * Useful when you want to reference a custom `component` and have `SvgIcon` pass that
+   * `component`'s viewBox to the root node.
+   * @default false
+   */
+  inheritViewBox?: boolean;
+  /**
+   * The shape-rendering attribute. The behavior of the different options is described on the
+   * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).
+   * If you are having issues with blurry icons you should investigate this prop.
+   */
+  shapeRendering?: string;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * Provides a human-readable title for the element that contains it.
+   * https://www.w3.org/TR/SVG-access/#Equivalent
+   */
+  titleAccess?: string;
+  /**
+   * Allows you to redefine what the coordinates without units mean inside an SVG element.
+   * For example, if the SVG element is 500 (width) by 200 (height),
+   * and you pass viewBox="0 0 50 20",
+   * this means that the coordinates inside the SVG will go from the top left corner (0,0)
+   * to bottom right (50,20) and each unit will be worth 10px.
+   * @default '0 0 24 24'
+   */
+  viewBox?: string;
+}
+export interface SvgIconTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'svg'> {
+  props: AdditionalProps & SvgIconOwnProps;
+  defaultComponent: RootComponent;
+}
+/**
+ *
+ * Demos:
+ *
+ * - [Icons](https://next.mui.com/material-ui/icons/)
+ * - [Material Icons](https://next.mui.com/material-ui/material-icons/)
+ *
+ * API:
+ *
+ * - [SvgIcon API](https://next.mui.com/material-ui/api/svg-icon/)
+ */
+declare const SvgIcon: OverridableComponent<SvgIconTypeMap> & {
+  muiName: string;
+};
+export type SvgIconProps<RootComponent extends React.ElementType = SvgIconTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<SvgIconTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+export default SvgIcon;

package/SvgIcon/index.d.ts

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

package/SvgIcon/svgIconClasses.d.ts

@@ -0,0 +1,26 @@
+export interface SvgIconClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `color="primary"`. */
+  colorPrimary: string;
+  /** Styles applied to the root element if `color="secondary"`. */
+  colorSecondary: string;
+  /** Styles applied to the root element if `color="action"`. */
+  colorAction: string;
+  /** Styles applied to the root element if `color="error"`. */
+  colorError: string;
+  /** Styles applied to the root element if `color="disabled"`. */
+  colorDisabled: string;
+  /** Styles applied to the root element if `fontSize="inherit"`. */
+  fontSizeInherit: string;
+  /** Styles applied to the root element if `fontSize="small"`. */
+  fontSizeSmall: string;
+  /** Styles applied to the root element if `fontSize="medium"`. */
+  fontSizeMedium: string;
+  /** Styles applied to the root element if `fontSize="large"`. */
+  fontSizeLarge: string;
+}
+export type SvgIconClassKey = keyof SvgIconClasses;
+export declare function getSvgIconUtilityClass(slot: string): string;
+declare const svgIconClasses: SvgIconClasses;
+export default svgIconClasses;

package/SwipeableDrawer/SwipeableDrawer.d.ts

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
+import { DrawerProps, DrawerOwnerState, DrawerSlotsAndSlotProps } from "../Drawer/index.js";
+export interface SwipeableDrawerSwipeAreaSlotPropsOverrides {}
+export interface SwipeableDrawerSlots {
+  /**
+   * The component used for the swipeArea slot.
+   * @default div
+   */
+  swipeArea?: React.ElementType;
+}
+type SwipeableDrawerSlotsAndSlotProps = DrawerSlotsAndSlotProps & CreateSlotsAndSlotProps<SwipeableDrawerSlots, {
+  /**
+   * Props forwarded to the docked slot.
+   * By default, the avaible props are based on a div element.
+   */
+  swipeArea: SlotProps<'div', SwipeableDrawerSwipeAreaSlotPropsOverrides, DrawerOwnerState>;
+}>;
+export interface SwipeableDrawerProps extends Omit<DrawerProps, 'onClose' | 'open' | 'slots' | 'slotProps'>, SwipeableDrawerSlotsAndSlotProps {
+  /**
+   * If set to true, the swipe event will open the drawer even if the user begins the swipe on one of the drawer's children.
+   * This can be useful in scenarios where the drawer is partially visible.
+   * You can customize it further with a callback that determines which children the user can drag over to open the drawer
+   * (for example, to ignore other elements that handle touch move events, like sliders).
+   *
+   * @param {TouchEvent} event The 'touchstart' event
+   * @param {HTMLDivElement} swipeArea The swipe area element
+   * @param {HTMLDivElement} paper The drawer's paper element
+   *
+   * @default false
+   */
+  allowSwipeInChildren?: boolean | ((event: TouchEvent, swipeArea: HTMLDivElement, paper: HTMLDivElement) => boolean);
+  /**
+   * Disable the backdrop transition.
+   * This can improve the FPS on low-end devices.
+   * @default false
+   */
+  disableBackdropTransition?: boolean;
+  /**
+   * If `true`, touching the screen near the edge of the drawer will not slide in the drawer a bit
+   * to promote accidental discovery of the swipe gesture.
+   * @default false
+   */
+  disableDiscovery?: boolean;
+  /**
+   * If `true`, swipe to open is disabled. This is useful in browsers where swiping triggers
+   * navigation actions. Swipe to open is disabled on iOS browsers by default.
+   * @default typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent)
+   */
+  disableSwipeToOpen?: boolean;
+  /**
+   * Affects how far the drawer must be opened/closed to change its state.
+   * Specified as percent (0-1) of the width of the drawer
+   * @default 0.52
+   */
+  hysteresis?: number;
+  /**
+   * Defines, from which (average) velocity on, the swipe is
+   * defined as complete although hysteresis isn't reached.
+   * Good threshold is between 250 - 1000 px/s
+   * @default 450
+   */
+  minFlingVelocity?: number;
+  /**
+   * Callback fired when the component requests to be closed.
+   *
+   * @param {React.SyntheticEvent<{}>} event The event source of the callback.
+   */
+  onClose: React.ReactEventHandler<{}>;
+  /**
+   * Callback fired when the component requests to be opened.
+   *
+   * @param {React.SyntheticEvent<{}>} event The event source of the callback.
+   */
+  onOpen: React.ReactEventHandler<{}>;
+  /**
+   * If `true`, the component is shown.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * The element is used to intercept the touch events on the edge.
+   * @deprecated use the `slotProps.swipeArea` 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.
+   */
+  SwipeAreaProps?: object;
+  /**
+   * The width of the left most (or right most) area in `px` that
+   * the drawer can be swiped open from.
+   * @default 20
+   */
+  swipeAreaWidth?: number;
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Drawer](https://next.mui.com/material-ui/react-drawer/)
+ *
+ * API:
+ *
+ * - [SwipeableDrawer API](https://next.mui.com/material-ui/api/swipeable-drawer/)
+ * - inherits [Drawer API](https://next.mui.com/material-ui/api/drawer/)
+ */
+declare const SwipeableDrawer: React.JSXElementConstructor<SwipeableDrawerProps>;
+export default SwipeableDrawer;

package/SwipeableDrawer/index.d.ts

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

package/Switch/Switch.d.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { OverridableStringUnion } from '@mui/types';
+import { InternalStandardProps as StandardProps, Theme } from "../index.js";
+import { SwitchBaseProps } from "../internal/SwitchBase.js";
+import { SwitchClasses } from "./switchClasses.js";
+export interface SwitchPropsSizeOverrides {}
+export interface SwitchPropsColorOverrides {}
+export interface SwitchProps extends StandardProps<SwitchBaseProps, 'checkedIcon' | 'color' | 'icon'> {
+  /**
+   * The icon to display when the component is checked.
+   */
+  checkedIcon?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<SwitchClasses>;
+  /**
+   * 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' | 'default', SwitchPropsColorOverrides>;
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * The icon to display when the component is unchecked.
+   */
+  icon?: React.ReactNode;
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense switch styling.
+   * @default 'medium'
+   */
+  size?: OverridableStringUnion<'small' | 'medium', SwitchPropsSizeOverrides>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The value of the component. The DOM API casts this to a string.
+   * The browser uses "on" as the default value.
+   */
+  value?: unknown;
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Switch](https://next.mui.com/material-ui/react-switch/)
+ * - [Transfer List](https://next.mui.com/material-ui/react-transfer-list/)
+ *
+ * API:
+ *
+ * - [Switch API](https://next.mui.com/material-ui/api/switch/)
+ * - inherits [IconButton API](https://next.mui.com/material-ui/api/icon-button/)
+ */
+export default function Switch(props: SwitchProps): React.JSX.Element;

package/Switch/index.d.ts

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

package/Switch/switchClasses.d.ts

@@ -0,0 +1,32 @@
+export interface SwitchClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `edge="start"`. */
+  edgeStart: string;
+  /** Styles applied to the root element if `edge="end"`. */
+  edgeEnd: string;
+  /** Styles applied to the internal `SwitchBase` component's `root` class. */
+  switchBase: string;
+  /** Styles applied to the internal SwitchBase component's root element if `color="primary"`. */
+  colorPrimary: string;
+  /** Styles applied to the internal SwitchBase component's root element if `color="secondary"`. */
+  colorSecondary: string;
+  /** Styles applied to the root element if `size="small"`. */
+  sizeSmall: string;
+  /** Styles applied to the root element if `size="medium"`. */
+  sizeMedium: string;
+  /** State class applied to the internal `SwitchBase` component's `checked` class. */
+  checked: string;
+  /** State class applied to the internal SwitchBase component's disabled class. */
+  disabled: string;
+  /** Styles applied to the internal SwitchBase component's input element. */
+  input: string;
+  /** Styles used to create the thumb passed to the internal `SwitchBase` component `icon` prop. */
+  thumb: string;
+  /** Styles applied to the track element. */
+  track: string;
+}
+export type SwitchClassKey = keyof SwitchClasses;
+export declare function getSwitchUtilityClass(slot: string): string;
+declare const switchClasses: SwitchClasses;
+export default switchClasses;

package/Tab/Tab.d.ts

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { Theme } from "../index.js";
+import { ExtendButtonBase, ExtendButtonBaseTypeMap } from "../ButtonBase/index.js";
+import { OverrideProps } from "../OverridableComponent/index.js";
+import { TabClasses } from "./tabClasses.js";
+export interface TabOwnProps {
+  /**
+   * This prop isn't supported.
+   * Use the `component` prop if you need to change the children structure.
+   */
+  children?: null;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<TabClasses>;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple?: boolean;
+  /**
+   * The icon to display.
+   */
+  icon?: string | React.ReactElement<unknown>;
+  /**
+   * The position of the icon relative to the label.
+   * @default 'top'
+   */
+  iconPosition?: 'top' | 'bottom' | 'start' | 'end';
+  /**
+   * The label element.
+   */
+  label?: React.ReactNode;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * You can provide your own value. Otherwise, we fallback to the child position index.
+   */
+  value?: any;
+  /**
+   * Tab labels appear in a single row.
+   * They can use a second line if needed.
+   * @default false
+   */
+  wrapped?: boolean;
+}
+export type TabTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> = ExtendButtonBaseTypeMap<{
+  props: AdditionalProps & TabOwnProps;
+  defaultComponent: RootComponent;
+}>;
+
+/**
+ *
+ * Demos:
+ *
+ * - [Tabs](https://next.mui.com/material-ui/react-tabs/)
+ *
+ * API:
+ *
+ * - [Tab API](https://next.mui.com/material-ui/api/tab/)
+ * - inherits [ButtonBase API](https://next.mui.com/material-ui/api/button-base/)
+ */
+declare const Tab: ExtendButtonBase<TabTypeMap>;
+export type TabProps<RootComponent extends React.ElementType = TabTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<TabTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+export default Tab;

package/Tab/index.d.ts

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

package/Tab/tabClasses.d.ts

@@ -0,0 +1,30 @@
+export interface TabClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if both `icon` and `label` are provided. */
+  labelIcon: string;
+  /** Styles applied to the root element if the parent [`Tabs`](/material-ui/api/tabs/) has `textColor="inherit"`. */
+  textColorInherit: string;
+  /** Styles applied to the root element if the parent [`Tabs`](/material-ui/api/tabs/) has `textColor="primary"`. */
+  textColorPrimary: string;
+  /** Styles applied to the root element if the parent [`Tabs`](/material-ui/api/tabs/) has `textColor="secondary"`. */
+  textColorSecondary: string;
+  /** State class applied to the root element if `selected={true}` (controlled by the Tabs component). */
+  selected: string;
+  /** State class applied to the root element if `disabled={true}` (controlled by the Tabs component). */
+  disabled: string;
+  /** Styles applied to the root element if `fullWidth={true}` (controlled by the Tabs component). */
+  fullWidth: string;
+  /** Styles applied to the root element if `wrapped={true}`. */
+  wrapped: string;
+  /** Styles applied to the `icon` HTML element if both `icon` and `label` are provided.
+   * @deprecated Use `icon` class instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details
+   */
+  iconWrapper: string;
+  /** Styles applied to the `icon` HTML element if both `icon` and `label` are provided. */
+  icon: string;
+}
+export type TabClassKey = keyof TabClasses;
+export declare function getTabUtilityClass(slot: string): string;
+declare const tabClasses: TabClasses;
+export default tabClasses;

package/TabScrollButton/TabScrollButton.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { SlotComponentProps } from "../utils/types.js";
+import { ButtonBaseProps } from "../ButtonBase/index.js";
+import { SvgIcon, Theme } from "../index.js";
+import { TabScrollButtonClasses } from "./tabScrollButtonClasses.js";
+export interface TabScrollButtonStartIconSlotPropsOverrides {}
+export interface TabScrollButtonEndIconSlotPropsOverrides {}
+export interface TabScrollButtonOwnerState extends TabScrollButtonProps {
+  isRtl: boolean;
+}
+export interface TabScrollButtonProps extends ButtonBaseProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<TabScrollButtonClasses>;
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots?: {
+    StartScrollButtonIcon?: React.ElementType;
+    EndScrollButtonIcon?: React.ElementType;
+  };
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   * @default {}
+   */
+  slotProps?: {
+    startScrollButtonIcon?: SlotComponentProps<typeof SvgIcon, TabScrollButtonStartIconSlotPropsOverrides, TabScrollButtonOwnerState>;
+    endScrollButtonIcon?: SlotComponentProps<typeof SvgIcon, TabScrollButtonEndIconSlotPropsOverrides, TabScrollButtonOwnerState>;
+  };
+  /**
+   * The direction the button should indicate.
+   */
+  direction: 'left' | 'right';
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * The component orientation (layout flow direction).
+   */
+  orientation: 'horizontal' | 'vertical';
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Tabs](https://next.mui.com/material-ui/react-tabs/)
+ *
+ * API:
+ *
+ * - [TabScrollButton API](https://next.mui.com/material-ui/api/tab-scroll-button/)
+ */
+export default function TabScrollButton(props: TabScrollButtonProps): React.JSX.Element;

package/TabScrollButton/index.d.ts

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