@vodafone_de/brix-components 3.1.0 → 3.1.2

package/dist/Slide/Slide.js

@@ -0,0 +1,345 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.setTranslateValue = setTranslateValue;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactTransitionGroup = require("react-transition-group");
+var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
+var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
+var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
+var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
+var _debounce = _interopRequireDefault(require("../utils/debounce"));
+var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
+var _zeroStyled = require("../zero-styled");
+var _utils = require("../transitions/utils");
+var _utils2 = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+// Translate the node so it can't be seen on the screen.
+// Later, we're going to translate the node back to its original location with `none`.
+function getTranslateValue(direction, node, resolvedContainer) {
+  const rect = node.getBoundingClientRect();
+  const containerRect = resolvedContainer && resolvedContainer.getBoundingClientRect();
+  const containerWindow = (0, _utils2.ownerWindow)(node);
+  let transform;
+  if (node.fakeTransform) {
+    transform = node.fakeTransform;
+  } else {
+    const computedStyle = containerWindow.getComputedStyle(node);
+    transform = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('transform');
+  }
+  let offsetX = 0;
+  let offsetY = 0;
+  if (transform && transform !== 'none' && typeof transform === 'string') {
+    const transformValues = transform.split('(')[1].split(')')[0].split(',');
+    offsetX = parseInt(transformValues[4], 10);
+    offsetY = parseInt(transformValues[5], 10);
+  }
+  if (direction === 'left') {
+    if (containerRect) {
+      return `translateX(${containerRect.right + offsetX - rect.left}px)`;
+    }
+    return `translateX(${containerWindow.innerWidth + offsetX - rect.left}px)`;
+  }
+  if (direction === 'right') {
+    if (containerRect) {
+      return `translateX(-${rect.right - containerRect.left - offsetX}px)`;
+    }
+    return `translateX(-${rect.left + rect.width - offsetX}px)`;
+  }
+  if (direction === 'up') {
+    if (containerRect) {
+      return `translateY(${containerRect.bottom + offsetY - rect.top}px)`;
+    }
+    return `translateY(${containerWindow.innerHeight + offsetY - rect.top}px)`;
+  }
+
+  // direction === 'down'
+  if (containerRect) {
+    return `translateY(-${rect.top - containerRect.top + rect.height - offsetY}px)`;
+  }
+  return `translateY(-${rect.top + rect.height - offsetY}px)`;
+}
+function resolveContainer(containerPropProp) {
+  return typeof containerPropProp === 'function' ? containerPropProp() : containerPropProp;
+}
+function setTranslateValue(direction, node, containerProp) {
+  const resolvedContainer = resolveContainer(containerProp);
+  const transform = getTranslateValue(direction, node, resolvedContainer);
+  if (transform) {
+    node.style.webkitTransform = transform;
+    node.style.transform = transform;
+  }
+}
+
+/**
+ * The Slide transition is used by the [Drawer](/material-ui/react-drawer/) component.
+ * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
+ */
+const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
+  const theme = (0, _zeroStyled.useTheme)();
+  const defaultEasing = {
+    enter: theme.transitions.easing.easeOut,
+    exit: theme.transitions.easing.sharp
+  };
+  const defaultTimeout = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
+  const {
+    addEndListener,
+    appear = true,
+    children,
+    container: containerProp,
+    direction = 'down',
+    easing: easingProp = defaultEasing,
+    in: inProp,
+    onEnter,
+    onEntered,
+    onEntering,
+    onExit,
+    onExited,
+    onExiting,
+    style,
+    timeout = defaultTimeout,
+    // eslint-disable-next-line react/prop-types
+    TransitionComponent = _reactTransitionGroup.Transition,
+    ...other
+  } = props;
+  const childrenRef = React.useRef(null);
+  const handleRef = (0, _useForkRef.default)((0, _getReactElementRef.default)(children), childrenRef, ref);
+  const normalizedTransitionCallback = callback => isAppearing => {
+    if (callback) {
+      // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
+      if (isAppearing === undefined) {
+        callback(childrenRef.current);
+      } else {
+        callback(childrenRef.current, isAppearing);
+      }
+    }
+  };
+  const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
+    setTranslateValue(direction, node, containerProp);
+    (0, _utils.reflow)(node);
+    if (onEnter) {
+      onEnter(node, isAppearing);
+    }
+  });
+  const handleEntering = normalizedTransitionCallback((node, isAppearing) => {
+    const transitionProps = (0, _utils.getTransitionProps)({
+      timeout,
+      style,
+      easing: easingProp
+    }, {
+      mode: 'enter'
+    });
+    node.style.webkitTransition = theme.transitions.create('-webkit-transform', {
+      ...transitionProps
+    });
+    node.style.transition = theme.transitions.create('transform', {
+      ...transitionProps
+    });
+    node.style.webkitTransform = 'none';
+    node.style.transform = 'none';
+    if (onEntering) {
+      onEntering(node, isAppearing);
+    }
+  });
+  const handleEntered = normalizedTransitionCallback(onEntered);
+  const handleExiting = normalizedTransitionCallback(onExiting);
+  const handleExit = normalizedTransitionCallback(node => {
+    const transitionProps = (0, _utils.getTransitionProps)({
+      timeout,
+      style,
+      easing: easingProp
+    }, {
+      mode: 'exit'
+    });
+    node.style.webkitTransition = theme.transitions.create('-webkit-transform', transitionProps);
+    node.style.transition = theme.transitions.create('transform', transitionProps);
+    setTranslateValue(direction, node, containerProp);
+    if (onExit) {
+      onExit(node);
+    }
+  });
+  const handleExited = normalizedTransitionCallback(node => {
+    // No need for transitions when the component is hidden
+    node.style.webkitTransition = '';
+    node.style.transition = '';
+    if (onExited) {
+      onExited(node);
+    }
+  });
+  const handleAddEndListener = next => {
+    if (addEndListener) {
+      // Old call signature before `react-transition-group` implemented `nodeRef`
+      addEndListener(childrenRef.current, next);
+    }
+  };
+  const updatePosition = React.useCallback(() => {
+    if (childrenRef.current) {
+      setTranslateValue(direction, childrenRef.current, containerProp);
+    }
+  }, [direction, containerProp]);
+  React.useEffect(() => {
+    // Skip configuration where the position is screen size invariant.
+    if (inProp || direction === 'down' || direction === 'right') {
+      return undefined;
+    }
+    const handleResize = (0, _debounce.default)(() => {
+      if (childrenRef.current) {
+        setTranslateValue(direction, childrenRef.current, containerProp);
+      }
+    });
+    const containerWindow = (0, _utils2.ownerWindow)(childrenRef.current);
+    containerWindow.addEventListener('resize', handleResize);
+    return () => {
+      handleResize.clear();
+      containerWindow.removeEventListener('resize', handleResize);
+    };
+  }, [direction, inProp, containerProp]);
+  React.useEffect(() => {
+    if (!inProp) {
+      // We need to update the position of the drawer when the direction change and
+      // when it's hidden.
+      updatePosition();
+    }
+  }, [inProp, updatePosition]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, {
+    nodeRef: childrenRef,
+    onEnter: handleEnter,
+    onEntered: handleEntered,
+    onEntering: handleEntering,
+    onExit: handleExit,
+    onExited: handleExited,
+    onExiting: handleExiting,
+    addEndListener: handleAddEndListener,
+    appear: appear,
+    in: inProp,
+    timeout: timeout,
+    ...other,
+    children: (state, {
+      ownerState,
+      ...restChildProps
+    }) => {
+      return /*#__PURE__*/React.cloneElement(children, {
+        ref: handleRef,
+        style: {
+          visibility: state === 'exited' && !inProp ? 'hidden' : undefined,
+          ...style,
+          ...children.props.style
+        },
+        ...restChildProps
+      });
+    }
+  });
+});
+process.env.NODE_ENV !== "production" ? Slide.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Add a custom transition end trigger. Called with the transitioning DOM
+   * node and a done callback. Allows for more fine grained transition end
+   * logic. Note: Timeouts are still used as a fallback if provided.
+   */
+  addEndListener: _propTypes.default.func,
+  /**
+   * Perform the enter transition when it first mounts if `in` is also `true`.
+   * Set this to `false` to disable this behavior.
+   * @default true
+   */
+  appear: _propTypes.default.bool,
+  /**
+   * A single child content element.
+   */
+  children: _elementAcceptingRef.default.isRequired,
+  /**
+   * An HTML element, or a function that returns one.
+   * It's used to set the container the Slide is transitioning from.
+   */
+  container: (0, _chainPropTypes.default)(_propTypes.default.oneOfType([_HTMLElementType.default, _propTypes.default.func]), props => {
+    if (props.open) {
+      const resolvedContainer = resolveContainer(props.container);
+      if (resolvedContainer && resolvedContainer.nodeType === 1) {
+        const box = resolvedContainer.getBoundingClientRect();
+        if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
+          return new Error(['MUI: The `container` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
+        }
+      } else if (!resolvedContainer || typeof resolvedContainer.getBoundingClientRect !== 'function' || resolvedContainer.contextElement != null && resolvedContainer.contextElement.nodeType !== 1) {
+        return new Error(['MUI: The `container` prop provided to the component is invalid.', 'It should be an HTML element instance.'].join('\n'));
+      }
+    }
+    return null;
+  }),
+  /**
+   * Direction the child node will enter from.
+   * @default 'down'
+   */
+  direction: _propTypes.default.oneOf(['down', 'left', 'right', 'up']),
+  /**
+   * The transition timing function.
+   * You may specify a single easing or a object containing enter and exit values.
+   * @default {
+   *   enter: theme.transitions.easing.easeOut,
+   *   exit: theme.transitions.easing.sharp,
+   * }
+   */
+  easing: _propTypes.default.oneOfType([_propTypes.default.shape({
+    enter: _propTypes.default.string,
+    exit: _propTypes.default.string
+  }), _propTypes.default.string]),
+  /**
+   * If `true`, the component will transition in.
+   */
+  in: _propTypes.default.bool,
+  /**
+   * @ignore
+   */
+  onEnter: _propTypes.default.func,
+  /**
+   * @ignore
+   */
+  onEntered: _propTypes.default.func,
+  /**
+   * @ignore
+   */
+  onEntering: _propTypes.default.func,
+  /**
+   * @ignore
+   */
+  onExit: _propTypes.default.func,
+  /**
+   * @ignore
+   */
+  onExited: _propTypes.default.func,
+  /**
+   * @ignore
+   */
+  onExiting: _propTypes.default.func,
+  /**
+   * @ignore
+   */
+  style: _propTypes.default.object,
+  /**
+   * 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: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
+    appear: _propTypes.default.number,
+    enter: _propTypes.default.number,
+    exit: _propTypes.default.number
+  })])
+} : void 0;
+var _default = exports.default = Slide;

package/dist/Slide/index.d.ts

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

package/dist/Slide/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Slide.default;
+  }
+});
+var _Slide = _interopRequireDefault(require("./Slide"));

package/dist/Slider/Slider.d.ts

@@ -0,0 +1,298 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { OverridableStringUnion } from '@mui/types';
+import { Mark } from "./useSlider.types.js";
+import { SlotComponentProps } from "../utils/types.js";
+import { Theme } from "../styles/index.js";
+import { OverrideProps, OverridableComponent } from "../OverridableComponent/index.js";
+import SliderValueLabelComponent from "./SliderValueLabel.js";
+import { SliderClasses } from "./sliderClasses.js";
+export interface SliderPropsColorOverrides {}
+export interface SliderPropsSizeOverrides {}
+export interface SliderComponentsPropsOverrides {}
+export interface SliderOwnerState extends SliderProps {
+  dragging: boolean;
+  marked: boolean;
+  focusedThumbIndex: number;
+}
+export interface SliderOwnProps<Value extends number | number[]> {
+  /**
+   * The label of the slider.
+   */
+  'aria-label'?: string;
+  /**
+   * The id of the element containing a label for the slider.
+   */
+  'aria-labelledby'?: string;
+  /**
+   * A string value that provides a user-friendly name for the current value of the slider.
+   */
+  'aria-valuetext'?: string;
+  /**
+   * 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', SliderPropsColorOverrides>;
+  /**
+   * The components used for each slot inside.
+   *
+   * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   *
+   * @default {}
+   */
+  components?: {
+    Root?: React.ElementType;
+    Track?: React.ElementType;
+    Rail?: React.ElementType;
+    Thumb?: React.ElementType;
+    Mark?: React.ElementType;
+    MarkLabel?: React.ElementType;
+    ValueLabel?: React.ElementType;
+    Input?: React.ElementType;
+  };
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   *
+   * @default {}
+   */
+  componentsProps?: {
+    root?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+    track?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+    rail?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+    thumb?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+    mark?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+    markLabel?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+    valueLabel?: SlotComponentProps<typeof SliderValueLabelComponent, SliderComponentsPropsOverrides, SliderOwnerState>;
+    input?: SlotComponentProps<'input', SliderComponentsPropsOverrides, SliderOwnerState>;
+  };
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<SliderClasses>;
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * The default value. Use when the component is not controlled.
+   */
+  defaultValue?: Value;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb.
+   * @default false
+   */
+  disableSwap?: boolean;
+  /**
+   * Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider.
+   * This is important for screen reader users.
+   * @param {number} index The thumb label's index to format.
+   * @returns {string}
+   */
+  getAriaLabel?: (index: number) => string;
+  /**
+   * Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.
+   * This is important for screen reader users.
+   * @param {number} value The thumb label's value to format.
+   * @param {number} index The thumb label's index to format.
+   * @returns {string}
+   */
+  getAriaValueText?: (value: number, index: number) => string;
+  /**
+   * Marks indicate predetermined values to which the user can move the slider.
+   * If `true` the marks are spaced according the value of the `step` prop.
+   * If an array, it should contain objects with `value` and an optional `label` keys.
+   * @default false
+   */
+  marks?: boolean | Mark[];
+  /**
+   * The maximum allowed value of the slider.
+   * Should not be equal to min.
+   * @default 100
+   */
+  max?: number;
+  /**
+   * The minimum allowed value of the slider.
+   * Should not be equal to max.
+   * @default 0
+   */
+  min?: number;
+  /**
+   * Name attribute of the hidden `input` element.
+   */
+  name?: string;
+  /**
+   * Callback function that is fired when the slider's value changed.
+   *
+   * @param {Event} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (any).
+   * **Warning**: This is a generic event not a change event.
+   * @param {Value} value The new value.
+   * @param {number} activeThumb Index of the currently moved thumb.
+   */
+  onChange?: (event: Event, value: Value, activeThumb: number) => void;
+  /**
+   * Callback function that is fired when the `mouseup` is triggered.
+   *
+   * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event.
+   * @param {Value} value The new value.
+   */
+  onChangeCommitted?: (event: React.SyntheticEvent | Event, value: Value) => void;
+  /**
+   * The component orientation.
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * A transformation function, to change the scale of the slider.
+   * @param {any} x
+   * @returns {any}
+   * @default function Identity(x) {
+   *   return x;
+   * }
+   */
+  scale?: (value: number) => number;
+  /**
+   * The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.
+   * @default 10
+   */
+  shiftStep?: number;
+  /**
+   * The size of the slider.
+   * @default 'medium'
+   */
+  size?: OverridableStringUnion<'small' | 'medium', SliderPropsSizeOverrides>;
+  /**
+   * The props used for each slot inside the Slider.
+   * @default {}
+   */
+  slotProps?: {
+    root?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+    track?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+    rail?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+    thumb?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+    mark?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+    markLabel?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>;
+    valueLabel?: SlotComponentProps<typeof SliderValueLabelComponent, SliderComponentsPropsOverrides, SliderOwnerState>;
+    input?: SlotComponentProps<'input', SliderComponentsPropsOverrides, SliderOwnerState>;
+  };
+  /**
+   * The components used for each slot inside the Slider.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots?: {
+    root?: React.ElementType;
+    track?: React.ElementType;
+    rail?: React.ElementType;
+    thumb?: React.ElementType;
+    mark?: React.ElementType;
+    markLabel?: React.ElementType;
+    valueLabel?: React.ElementType;
+    input?: React.ElementType;
+  };
+  /**
+   * The granularity with which the slider can step through values. (A "discrete" slider.)
+   * The `min` prop serves as the origin for the valid values.
+   * We recommend (max - min) to be evenly divisible by the step.
+   *
+   * When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop.
+   * @default 1
+   */
+  step?: number | null;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * Tab index attribute of the hidden `input` element.
+   */
+  tabIndex?: number;
+  /**
+   * The track presentation:
+   *
+   * - `normal` the track will render a bar representing the slider value.
+   * - `inverted` the track will render a bar representing the remaining slider value.
+   * - `false` the track will render without a bar.
+   * @default 'normal'
+   */
+  track?: 'normal' | false | 'inverted';
+  /**
+   * The value of the slider.
+   * For ranged sliders, provide an array with two values.
+   */
+  value?: Value;
+  /**
+   * Controls when the value label is displayed:
+   *
+   * - `auto` the value label will display when the thumb is hovered or focused.
+   * - `on` will display persistently.
+   * - `off` will never display.
+   * @default 'off'
+   */
+  valueLabelDisplay?: 'on' | 'auto' | 'off';
+  /**
+   * The format function the value label's value.
+   *
+   * When a function is provided, it should have the following signature:
+   *
+   * - {number} value The value label's value to format
+   * - {number} index The value label's index to format
+   * @param {any} x
+   * @returns {any}
+   * @default function Identity(x) {
+   *   return x;
+   * }
+   */
+  valueLabelFormat?: string | ((value: number, index: number) => React.ReactNode);
+}
+export interface SliderTypeMap<RootComponent extends React.ElementType = 'span', AdditionalProps = {}, Value extends number | number[] = number | number[]> {
+  props: AdditionalProps & SliderOwnProps<Value>;
+  defaultComponent: RootComponent;
+}
+export type SliderComponent<Value extends number | number[]> = OverridableComponent<SliderTypeMap<'span', {}, Value>>;
+export type SliderType = SliderComponent<number> & SliderComponent<number[]> & SliderComponent<number | number[]>;
+export interface SliderValueLabelProps extends React.HTMLAttributes<HTMLSpanElement> {
+  children: React.ReactElement<unknown>;
+  index: number;
+  open: boolean;
+  value: React.ReactNode;
+}
+type SliderRootProps = NonNullable<SliderTypeMap['props']['componentsProps']>['root'];
+type SliderMarkProps = NonNullable<SliderTypeMap['props']['componentsProps']>['mark'];
+type SliderMarkLabelProps = NonNullable<SliderTypeMap['props']['componentsProps']>['markLabel'];
+type SliderRailProps = NonNullable<SliderTypeMap['props']['componentsProps']>['rail'];
+type SliderTrackProps = NonNullable<SliderTypeMap['props']['componentsProps']>['track'];
+type SliderThumbProps = NonNullable<SliderTypeMap['props']['componentsProps']>['thumb'];
+export declare const SliderRoot: React.FC<SliderRootProps>;
+export declare const SliderMark: React.FC<SliderMarkProps>;
+export declare const SliderMarkLabel: React.FC<SliderMarkLabelProps>;
+export declare const SliderRail: React.FC<SliderRailProps>;
+export declare const SliderTrack: React.FC<SliderTrackProps>;
+export declare const SliderThumb: React.FC<SliderThumbProps>;
+export declare const SliderValueLabel: React.FC<SliderValueLabelProps>;
+
+/**
+ *
+ * Demos:
+ *
+ * - [Slider](https://mui.com/material-ui/react-slider/)
+ *
+ * API:
+ *
+ * - [Slider API](https://mui.com/material-ui/api/slider/)
+ */
+declare const Slider: SliderType;
+export type SliderProps<RootComponent extends React.ElementType = SliderTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<SliderTypeMap<RootComponent, AdditionalProps>, RootComponent> & {
+  component?: React.ElementType;
+};
+export default Slider;