Začetni commit projekta rezervacije

This commit is contained in:
Mark Poljanšek committed 2025-04-23 20:19:33 +02:00
commit 328731b32f
56062 files changed
+2485242

No files matched your search

+122
View File
@@ -0,0 +1,122 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { Theme } from "../index.js";
import { TransitionProps } from "../transitions/transition.js";
import { AccordionClasses } from "./accordionClasses.js";
import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
import { ExtendPaperTypeMap, PaperProps } from "../Paper/Paper.js";
import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from "../utils/types.js";
export interface AccordionSlots {
/**
* The component that renders the root.
* @default Paper
*/
root: React.ElementType;
/**
* The component that renders the heading.
* @default 'h3'
*/
heading: React.ElementType;
/**
* The component that renders the transition.
* [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
* @default Collapse
*/
transition: React.ElementType;
}
export interface AccordionRootSlotPropsOverrides {}
export interface AccordionHeadingSlotPropsOverrides {}
export interface AccordionTransitionSlotPropsOverrides {}
export type AccordionSlotsAndSlotProps = CreateSlotsAndSlotProps<AccordionSlots, {
/**
* Props forwarded to the root slot.
* By default, the avaible props are based on the Paper element.
*/
root: SlotProps<React.ElementType<PaperProps>, AccordionRootSlotPropsOverrides, AccordionOwnerState>;
/**
* Props forwarded to the heading slot.
* By default, the avaible props are based on the h3 element.
*/
heading: SlotProps<'h3', AccordionHeadingSlotPropsOverrides, AccordionOwnerState>;
/**
* Props forwarded to the transition slot.
* By default, the avaible props are based on the [Collapse](https://mui.com/material-ui/api/collapse/#props) component.
*/
transition: SlotComponentProps<React.ElementType, TransitionProps & AccordionTransitionSlotPropsOverrides, AccordionOwnerState>;
}>;
export type AccordionTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> = ExtendPaperTypeMap<{
props: AdditionalProps & {
/**
* The content of the component.
*/
children: NonNullable<React.ReactNode>;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<AccordionClasses>;
/**
* If `true`, expands the accordion by default.
* @default false
*/
defaultExpanded?: boolean;
/**
* If `true`, the component is disabled.
* @default false
*/
disabled?: boolean;
/**
* If `true`, it removes the margin between two expanded accordion items and the increase of height.
* @default false
*/
disableGutters?: boolean;
/**
* If `true`, expands the accordion, otherwise collapse it.
* Setting this prop enables control over the accordion.
*/
expanded?: boolean;
/**
* Callback fired when the expand/collapse state is changed.
*
* @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
* @param {boolean} expanded The `expanded` state of the accordion.
*/
onChange?: (event: React.SyntheticEvent, expanded: boolean) => void;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
/**
* 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.
* @deprecated Use `slots.transition` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
TransitionComponent?: React.JSXElementConstructor<TransitionProps & {
children?: React.ReactElement<unknown, any>;
}>;
/**
* Props applied to the transition element.
* By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
* @deprecated Use `slotProps.transition` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
TransitionProps?: TransitionProps;
} & AccordionSlotsAndSlotProps;
defaultComponent: RootComponent;
}, 'onChange' | 'classes'>;
/**
*
* Demos:
*
* - [Accordion](https://mui.com/material-ui/react-accordion/)
*
* API:
*
* - [Accordion API](https://mui.com/material-ui/api/accordion/)
* - inherits [Paper API](https://mui.com/material-ui/api/paper/)
*/
declare const Accordion: OverridableComponent<AccordionTypeMap>;
export type AccordionProps<RootComponent extends React.ElementType = AccordionTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<AccordionTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export interface AccordionOwnerState extends AccordionProps {}
export default Accordion;
+20
View File
@@ -0,0 +1,20 @@
export interface AccordionClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the heading element. */
heading: string;
/** Styles applied to the root element unless `square={true}`. */
rounded: string;
/** State class applied to the root element if `expanded={true}`. */
expanded: string;
/** State class applied to the root element if `disabled={true}`. */
disabled: string;
/** Styles applied to the root element unless `disableGutters={true}`. */
gutters: string;
/** Styles applied to the region element, the container of the children. */
region: string;
}
export type AccordionClassKey = keyof AccordionClasses;
export declare function getAccordionUtilityClass(slot: string): string;
declare const accordionClasses: AccordionClasses;
export default accordionClasses;
+4
View File
@@ -0,0 +1,4 @@
export { default } from "./Accordion.js";
export * from "./Accordion.js";
export { default as accordionClasses } from "./accordionClasses.js";
export * from "./accordionClasses.js";
@@ -0,0 +1,35 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { InternalStandardProps as StandardProps, Theme } from "../index.js";
import { AccordionActionsClasses } from "./accordionActionsClasses.js";
export interface AccordionActionsProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
/**
* The content of the component.
*/
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<AccordionActionsClasses>;
/**
* If `true`, the actions do not have additional margin.
* @default false
*/
disableSpacing?: boolean;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
}
/**
*
* Demos:
*
* - [Accordion](https://mui.com/material-ui/react-accordion/)
*
* API:
*
* - [AccordionActions API](https://mui.com/material-ui/api/accordion-actions/)
*/
export default function AccordionActions(props: AccordionActionsProps): React.JSX.Element;
@@ -0,0 +1,10 @@
export interface AccordionActionsClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the root element unless `disableSpacing={true}`. */
spacing: string;
}
export type AccordionActionsClassKey = keyof AccordionActionsClasses;
export declare function getAccordionActionsUtilityClass(slot: string): string;
declare const accordionActionsClasses: AccordionActionsClasses;
export default accordionActionsClasses;
+4
View File
@@ -0,0 +1,4 @@
export { default } from "./AccordionActions.js";
export * from "./AccordionActions.js";
export { default as accordionActionsClasses } from "./accordionActionsClasses.js";
export * from "./accordionActionsClasses.js";
@@ -0,0 +1,30 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { InternalStandardProps as StandardProps, Theme } from "../index.js";
import { AccordionDetailsClasses } from "./accordionDetailsClasses.js";
export interface AccordionDetailsProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
/**
* The content of the component.
*/
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<AccordionDetailsClasses>;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
}
/**
*
* Demos:
*
* - [Accordion](https://mui.com/material-ui/react-accordion/)
*
* API:
*
* - [AccordionDetails API](https://mui.com/material-ui/api/accordion-details/)
*/
export default function AccordionDetails(props: AccordionDetailsProps): React.JSX.Element;
@@ -0,0 +1,8 @@
export interface AccordionDetailsClasses {
/** Styles applied to the root element. */
root: string;
}
export type AccordionDetailsClassKey = keyof AccordionDetailsClasses;
export declare function getAccordionDetailsUtilityClass(slot: string): string;
declare const accordionDetailsClasses: AccordionDetailsClasses;
export default accordionDetailsClasses;
+4
View File
@@ -0,0 +1,4 @@
export { default } from "./AccordionDetails.js";
export * from "./AccordionDetails.js";
export { default as accordionDetailsClasses } from "./accordionDetailsClasses.js";
export * from "./accordionDetailsClasses.js";
@@ -0,0 +1,80 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { ButtonBaseProps, ExtendButtonBase, ExtendButtonBaseTypeMap } from "../ButtonBase/index.js";
import { OverrideProps } from "../OverridableComponent/index.js";
import { CreateSlotsAndSlotProps, SlotProps, Theme } from "../index.js";
import { AccordionSummaryClasses } from "./accordionSummaryClasses.js";
export interface AccordionSummarySlots {
/**
* The component that renders the root slot.
* @default ButtonBase
*/
root: React.ElementType;
/**
* The component that renders the content slot.
* @default div
*/
content: React.ElementType;
/**
* The component that renders the expand icon wrapper slot.
* @default div
*/
expandIconWrapper: React.ElementType;
}
export interface AccordionSummaryRootSlotPropsOverrides {}
export interface AccordionSummaryContentSlotPropsOverrides {}
export interface AccordionSummaryExpandIconWrapperSlotPropsOverrides {}
export type AccordionSummarySlotsAndSlotProps = CreateSlotsAndSlotProps<AccordionSummarySlots, {
/**
* Props forwarded to the root slot.
* By default, the avaible props are based on the [ButtonBase](https://mui.com/material-ui/api/button-base/#props) component.
*/
root: SlotProps<React.ElementType<ButtonBaseProps>, AccordionSummaryRootSlotPropsOverrides, AccordionSummaryOwnerState>;
/**
* Props forwarded to the content slot.
* By default, the avaible props are based on a div element.
*/
content: SlotProps<'div', AccordionSummaryContentSlotPropsOverrides, AccordionSummaryOwnerState>;
/**
* Props forwarded to the expand icon wrapper slot.
* By default, the avaible props are based on a div element.
*/
expandIconWrapper: SlotProps<'div', AccordionSummaryExpandIconWrapperSlotPropsOverrides, AccordionSummaryOwnerState>;
}>;
export interface AccordionSummaryOwnProps extends AccordionSummarySlotsAndSlotProps {
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<AccordionSummaryClasses>;
/**
* The icon to display as the expand indicator.
*/
expandIcon?: React.ReactNode;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
}
export type AccordionSummaryTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> = ExtendButtonBaseTypeMap<{
props: AdditionalProps & AccordionSummaryOwnProps;
defaultComponent: RootComponent;
}>;
export interface AccordionSummaryOwnerState extends Omit<AccordionSummaryProps, 'slots' | 'slotProps'> {}
/**
*
* Demos:
*
* - [Accordion](https://mui.com/material-ui/react-accordion/)
*
* API:
*
* - [AccordionSummary API](https://mui.com/material-ui/api/accordion-summary/)
* - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
*/
declare const AccordionSummary: ExtendButtonBase<AccordionSummaryTypeMap>;
export type AccordionSummaryProps<RootComponent extends React.ElementType = AccordionSummaryTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<AccordionSummaryTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export default AccordionSummary;
@@ -0,0 +1,25 @@
export interface AccordionSummaryClasses {
/** Styles applied to the root element. */
root: string;
/** State class applied to the root element, children wrapper element and `IconButton` component if `expanded={true}`. */
expanded: 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 unless `disableGutters={true}`. */
gutters: string;
/**
* Styles applied to the children wrapper element unless `disableGutters={true}`.
* @deprecated Combine the [.MuiAccordionSummary-gutters](/material-ui/api/accordion-summary/#AccordionSummary-classes-gutters) and [.MuiAccordionSummary-content](/material-ui/api/accordion-summary/#AccordionSummary-classes-content) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
contentGutters: string;
/** Styles applied to the children wrapper element. */
content: string;
/** Styles applied to the `expandIcon`'s wrapper element. */
expandIconWrapper: string;
}
export type AccordionSummaryClassKey = keyof AccordionSummaryClasses;
export declare function getAccordionSummaryUtilityClass(slot: string): string;
declare const accordionSummaryClasses: AccordionSummaryClasses;
export default accordionSummaryClasses;
+4
View File
@@ -0,0 +1,4 @@
export { default } from "./AccordionSummary.js";
export * from "./AccordionSummary.js";
export { default as accordionSummaryClasses } from "./accordionSummaryClasses.js";
export * from "./accordionSummaryClasses.js";
+178
View File
@@ -0,0 +1,178 @@
import * as React from 'react';
import { OverridableStringUnion } from '@mui/types';
import { SxProps } from '@mui/system';
import { IconButtonProps, InternalStandardProps as StandardProps, SvgIconProps, Theme } from "../index.js";
import { PaperProps } from "../Paper/index.js";
import { AlertClasses } from "./alertClasses.js";
import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
export type AlertColor = 'success' | 'info' | 'warning' | 'error';
export interface AlertPropsVariantOverrides {}
export interface AlertPropsColorOverrides {}
export interface AlertRootSlotPropsOverrides {}
export interface AlertIconSlotPropsOverrides {}
export interface AlertMessageSlotPropsOverrides {}
export interface AlertActionSlotPropsOverrides {}
export interface AlertCloseButtonSlotPropsOverrides {}
export interface AlertCloseIconSlotPropsOverrides {}
export interface AlertSlots {
/**
* The component that renders the root slot.
* @default Paper
*/
root: React.ElementType;
/**
* The component that renders the icon slot.
* @default div
*/
icon: React.ElementType;
/**
* The component that renders the message slot.
* @default div
*/
message: React.ElementType;
/**
* The component that renders the action slot.
* @default div
*/
action: React.ElementType;
/**
* The component that renders the close button.
* @default IconButton
*/
closeButton: React.ElementType;
/**
* The component that renders the close icon.
* @default svg
*/
closeIcon: React.ElementType;
}
export type AlertSlotsAndSlotProps = CreateSlotsAndSlotProps<AlertSlots, {
/**
* Props forwarded to the root slot.
* By default, the avaible props are based on the [Paper](https://mui.com/material-ui/api/paper/#props) component.
*/
root: SlotProps<React.ElementType<PaperProps>, AlertRootSlotPropsOverrides, AlertOwnerState>;
/**
* Props forwarded to the icon slot.
* By default, the avaible props are based on a div element.
*/
icon: SlotProps<'div', AlertIconSlotPropsOverrides, AlertOwnerState>;
/**
* Props forwarded to the message slot.
* By default, the avaible props are based on a div element.
*/
message: SlotProps<'div', AlertMessageSlotPropsOverrides, AlertOwnerState>;
/**
* Props forwarded to the action slot.
* By default, the avaible props are based on a div element.
*/
action: SlotProps<'div', AlertActionSlotPropsOverrides, AlertOwnerState>;
/**
* Props forwarded to the closeButton slot.
* By default, the avaible props are based on the [IconButton](https://mui.com/material-ui/api/icon-button/#props) component.
*/
closeButton: SlotProps<React.ElementType<IconButtonProps>, AlertCloseButtonSlotPropsOverrides, AlertOwnerState>;
/**
* Props forwarded to the closeIcon slot.
* By default, the avaible props are based on the [SvgIcon](https://mui.com/material-ui/api/svg-icon/#props) component.
*/
closeIcon: SlotProps<React.ElementType<SvgIconProps>, AlertCloseIconSlotPropsOverrides, AlertOwnerState>;
}>;
export interface AlertProps extends StandardProps<PaperProps, 'variant'>, AlertSlotsAndSlotProps {
/**
* The action to display. It renders after the message, at the end of the alert.
*/
action?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<AlertClasses>;
/**
* Override the default label for the *close popup* icon button.
*
* For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
* @default 'Close'
*/
closeText?: string;
/**
* The color of the component. Unless provided, the value is taken from the `severity` prop.
* 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).
*/
color?: OverridableStringUnion<AlertColor, AlertPropsColorOverrides>;
/**
* 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?: {
CloseButton?: React.ElementType;
CloseIcon?: 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?: {
closeButton?: IconButtonProps;
closeIcon?: SvgIconProps;
};
/**
* The severity of the alert. This defines the color and icon used.
* @default 'success'
*/
severity?: OverridableStringUnion<AlertColor, AlertPropsColorOverrides>;
/**
* Override the icon displayed before the children.
* Unless provided, the icon is mapped to the value of the `severity` prop.
* Set to `false` to remove the `icon`.
*/
icon?: React.ReactNode;
/**
* The ARIA role attribute of the element.
* @default 'alert'
*/
role?: string;
/**
* The component maps the `severity` prop to a range of different icons,
* for instance success to `<SuccessOutlined>`.
* If you wish to change this mapping, you can provide your own.
* Alternatively, you can use the `icon` prop to override the icon displayed.
*/
iconMapping?: Partial<Record<OverridableStringUnion<AlertColor, AlertPropsColorOverrides>, React.ReactNode>>;
/**
* Callback fired when the component requests to be closed.
* When provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked.
* @param {React.SyntheticEvent} event The event source of the callback.
*/
onClose?: (event: React.SyntheticEvent) => void;
/**
* The variant to use.
* @default 'standard'
*/
variant?: OverridableStringUnion<'standard' | 'filled' | 'outlined', AlertPropsVariantOverrides>;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
}
export interface AlertOwnerState extends AlertProps {}
/**
*
* Demos:
*
* - [Alert](https://mui.com/material-ui/react-alert/)
*
* API:
*
* - [Alert API](https://mui.com/material-ui/api/alert/)
* - inherits [Paper API](https://mui.com/material-ui/api/paper/)
*/
export default function Alert(props: AlertProps): React.JSX.Element;
+100
View File
@@ -0,0 +1,100 @@
export interface AlertClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the root element if `variant="filled"`. */
filled: string;
/** Styles applied to the root element if `variant="outlined"`. */
outlined: string;
/** Styles applied to the root element if `variant="standard"`. */
standard: string;
/** Styles applied to the root element if `color="success"`. */
colorSuccess: string;
/** Styles applied to the root element if `color="info"`. */
colorInfo: string;
/** Styles applied to the root element if `color="warning"`. */
colorWarning: string;
/** Styles applied to the root element if `color="error"`. */
colorError: string;
/** Styles applied to the root element if `variant="standard"` and `color="success"`.
* @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-standard)
* and [.MuiAlert-colorSuccess](/material-ui/api/alert/#alert-classes-colorSuccess) classes instead.
* See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
standardSuccess: string;
/** Styles applied to the root element if `variant="standard"` and `color="info"`.
* @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-standard)
* and [.MuiAlert-colorInfo](/material-ui/api/alert/#alert-classes-colorInfo) classes instead.
* See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
standardInfo: string;
/** Styles applied to the root element if `variant="standard"` and `color="warning"`.
* @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-standard)
* and [.MuiAlert-colorWarning](/material-ui/api/alert/#alert-classes-colorWarning) classes instead.
* See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
standardWarning: string;
/** Styles applied to the root element if `variant="standard"` and `color="error"`.
* @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-standard)
* and [.MuiAlert-colorError](/material-ui/api/alert/#alert-classes-colorError) classes instead.
* See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
standardError: string;
/** Styles applied to the root element if `variant="outlined"` and `color="success"`.
* @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-outlined)
* and [.MuiAlert-colorSuccess](/material-ui/api/alert/#alert-classes-colorSuccess) classes instead.
* See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
outlinedSuccess: string;
/** Styles applied to the root element if `variant="outlined"` and `color="info"`.
* @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-outlined)
* and [.MuiAlert-colorInfo](/material-ui/api/alert/#alert-classes-colorInfo) classes instead.
* See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
outlinedInfo: string;
/** Styles applied to the root element if `variant="outlined"` and `color="warning"`.
* @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-outlined)
* and [.MuiAlert-colorWarning](/material-ui/api/alert/#alert-classes-colorWarning) classes instead.
* See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
outlinedWarning: string;
/** Styles applied to the root element if `variant="outlined"` and `color="error"`.
* @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-outlined)
* and [.MuiAlert-colorError](/material-ui/api/alert/#alert-classes-colorError) classes instead.
* See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
outlinedError: string;
/** Styles applied to the root element if `variant="filled"` and `color="success"`.
* @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-filled)
* and [.MuiAlert-colorSuccess](/material-ui/api/alert/#alert-classes-colorSuccess) classes instead.
* See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
filledSuccess: string;
/** Styles applied to the root element if `variant="filled"` and `color="info"`.
* @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-filled)
* and [.MuiAlert-colorInfo](/material-ui/api/alert/#alert-classes-colorInfo) classes instead.
* See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
filledInfo: string;
/** Styles applied to the root element if `variant="filled"` and `color="warning"`
* @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-filled)
* and [.MuiAlert-colorWarning](/material-ui/api/alert/#alert-classes-colorWarning) classes instead.
* See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
filledWarning: string;
/** Styles applied to the root element if `variant="filled"` and `color="error"`.
* @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-filled)
* and [.MuiAlert-colorError](/material-ui/api/alert/#alert-classes-colorError) classes instead.
* See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
filledError: string;
/** Styles applied to the icon wrapper element. */
icon: string;
/** Styles applied to the message wrapper element. */
message: string;
/** Styles applied to the action wrapper element if `action` is provided. */
action: string;
}
export type AlertClassKey = keyof AlertClasses;
export declare function getAlertUtilityClass(slot: string): string;
declare const alertClasses: AlertClasses;
export default alertClasses;
+4
View File
@@ -0,0 +1,4 @@
export { default } from "./Alert.js";
export * from "./Alert.js";
export { default as alertClasses } from "./alertClasses.js";
export * from "./alertClasses.js";
+31
View File
@@ -0,0 +1,31 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { Theme, TypographyProps } from "../index.js";
import { AlertTitleClasses } from "./alertTitleClasses.js";
export interface AlertTitleProps extends TypographyProps<'div'> {
/**
* The content of the component.
*/
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<AlertTitleClasses>;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
}
/**
*
* Demos:
*
* - [Alert](https://mui.com/material-ui/react-alert/)
*
* API:
*
* - [AlertTitle API](https://mui.com/material-ui/api/alert-title/)
* - inherits [Typography API](https://mui.com/material-ui/api/typography/)
*/
export default function AlertTitle(props: AlertTitleProps): React.JSX.Element;
+8
View File
@@ -0,0 +1,8 @@
export interface AlertTitleClasses {
/** Styles applied to the root element. */
root: string;
}
export type AlertTitleClassKey = keyof AlertTitleClasses;
export declare function getAlertTitleUtilityClass(slot: string): string;
declare const alertTitleClasses: AlertTitleClasses;
export default alertTitleClasses;
+4
View File
@@ -0,0 +1,4 @@
export { default } from "./AlertTitle.js";
export * from "./AlertTitle.js";
export { default as alertTitleClasses } from "./alertTitleClasses.js";
export * from "./alertTitleClasses.js";
+59
View File
@@ -0,0 +1,59 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { OverridableStringUnion } from '@mui/types';
import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
import { PropTypes, Theme } from "../index.js";
import { AppBarClasses } from "./appBarClasses.js";
import { ExtendPaperTypeMap } from "../Paper/Paper.js";
export interface AppBarPropsColorOverrides {}
export interface AppBarOwnProps {
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<AppBarClasses>;
/**
* 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<PropTypes.Color | 'transparent' | 'error' | 'info' | 'success' | 'warning', AppBarPropsColorOverrides>;
/**
* If true, the `color` prop is applied in dark mode.
* @default false
*/
enableColorOnDark?: boolean;
/**
* The positioning type. The behavior of the different options is described
* [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/position).
* Note: `sticky` is not universally supported and will fall back to `static` when unavailable.
* @default 'fixed'
*/
position?: 'fixed' | 'absolute' | 'sticky' | 'static' | 'relative';
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
}
export type AppBarTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'header'> = ExtendPaperTypeMap<{
props: AdditionalProps & AppBarOwnProps;
defaultComponent: RootComponent;
}, 'position' | 'color' | 'classes'>;
/**
*
* Demos:
*
* - [App Bar](https://mui.com/material-ui/react-app-bar/)
*
* API:
*
* - [AppBar API](https://mui.com/material-ui/api/app-bar/)
* - inherits [Paper API](https://mui.com/material-ui/api/paper/)
*/
declare const AppBar: OverridableComponent<AppBarTypeMap>;
export type AppBarProps<RootComponent extends React.ElementType = AppBarTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<AppBarTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export default AppBar;
+36
View File
@@ -0,0 +1,36 @@
export interface AppBarClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the root element if `position="fixed"`. */
positionFixed: string;
/** Styles applied to the root element if `position="absolute"`. */
positionAbsolute: string;
/** Styles applied to the root element if `position="sticky"`. */
positionSticky: string;
/** Styles applied to the root element if `position="static"`. */
positionStatic: string;
/** Styles applied to the root element if `position="relative"`. */
positionRelative: string;
/** Styles applied to the root element if `color="default"`. */
colorDefault: 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="inherit"`. */
colorInherit: string;
/** Styles applied to the root element if `color="transparent"`. */
colorTransparent: string;
/** Styles applied to the root element if `color="error"`. */
colorError: string;
/** Styles applied to the root element if `color="info"`. */
colorInfo: string;
/** Styles applied to the root element if `color="success"`. */
colorSuccess: string;
/** Styles applied to the root element if `color="warning"`. */
colorWarning: string;
}
export type AppBarClassKey = keyof AppBarClasses;
export declare function getAppBarUtilityClass(slot: string): string;
declare const appBarClasses: AppBarClasses;
export default appBarClasses;
+4
View File
@@ -0,0 +1,4 @@
export { default } from "./AppBar.js";
export * from "./AppBar.js";
export { default as appBarClasses } from "./appBarClasses.js";
export * from "./appBarClasses.js";
+320
View File
@@ -0,0 +1,320 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { OverridableStringUnion } from '@mui/types';
import { IconButtonProps, InternalStandardProps as StandardProps, Theme } from '@mui/material';
import { ChipProps, ChipTypeMap } from "../Chip/index.js";
import { PaperProps } from "../Paper/index.js";
import { PopperProps } from "../Popper/index.js";
import useAutocomplete, { AutocompleteChangeDetails, AutocompleteChangeReason, AutocompleteCloseReason, AutocompleteInputChangeReason, AutocompleteValue, createFilterOptions, UseAutocompleteProps, AutocompleteFreeSoloValueMapping } from "../useAutocomplete/index.js";
import { AutocompleteClasses } from "./autocompleteClasses.js";
import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
export interface AutocompletePaperSlotPropsOverrides {}
export interface AutocompletePopperSlotPropsOverrides {}
export { AutocompleteChangeDetails, AutocompleteChangeReason, AutocompleteCloseReason, AutocompleteInputChangeReason, AutocompleteValue, createFilterOptions };
export type AutocompleteOwnerState<Value, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> = AutocompleteProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent> & {
disablePortal: boolean;
expanded: boolean;
focused: boolean;
fullWidth: boolean;
getOptionLabel: (option: Value | AutocompleteFreeSoloValueMapping<FreeSolo>) => string;
hasClearIcon: boolean;
hasPopupIcon: boolean;
inputFocused: boolean;
popupOpen: boolean;
size: OverridableStringUnion<'small' | 'medium', AutocompletePropsSizeOverrides>;
};
export type AutocompleteRenderGetTagProps = ({
index
}: {
index: number;
}) => {
key: number;
className: string;
disabled: boolean;
'data-tag-index': number;
tabIndex: -1;
onDelete: (event: any) => void;
};
export type AutocompleteRenderValueGetItemProps<Multiple extends boolean | undefined> = Multiple extends true ? (args: {
index: number;
}) => {
key: number;
className: string;
disabled: boolean;
'data-item-index': number;
tabIndex: -1;
onDelete: (event: any) => void;
} : (args?: {
index?: number;
}) => {
className: string;
disabled: boolean;
'data-item-index': number;
tabIndex: -1;
onDelete: (event: any) => void;
};
export type AutocompleteRenderValue<Value, Multiple, FreeSolo> = Multiple extends true ? Array<Value | AutocompleteFreeSoloValueMapping<FreeSolo>> : NonNullable<Value | AutocompleteFreeSoloValueMapping<FreeSolo>>;
export interface AutocompleteRenderOptionState {
inputValue: string;
index: number;
selected: boolean;
}
export interface AutocompleteRenderGroupParams {
key: number;
group: string;
children?: React.ReactNode;
}
export interface AutocompleteRenderInputParams {
id: string;
disabled: boolean;
fullWidth: boolean;
size: 'small' | undefined;
InputLabelProps: ReturnType<ReturnType<typeof useAutocomplete>['getInputLabelProps']>;
InputProps: {
ref: React.Ref<any>;
className: string;
startAdornment: React.ReactNode;
endAdornment: React.ReactNode;
onMouseDown: React.MouseEventHandler;
};
inputProps: ReturnType<ReturnType<typeof useAutocomplete>['getInputProps']>;
}
export interface AutocompletePropsSizeOverrides {}
export interface AutocompleteSlots {
/**
* The component used to render the listbox.
* @default 'ul'
*/
listbox: React.JSXElementConstructor<React.HTMLAttributes<HTMLElement>>;
/**
* The component used to render the body of the popup.
* @default Paper
*/
paper: React.JSXElementConstructor<PaperProps & AutocompletePaperSlotPropsOverrides>;
/**
* The component used to position the popup.
* @default Popper
*/
popper: React.JSXElementConstructor<PopperProps & AutocompletePopperSlotPropsOverrides>;
}
export type AutocompleteSlotsAndSlotProps<Value, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> = CreateSlotsAndSlotProps<AutocompleteSlots, {
chip: SlotProps<React.ElementType<Partial<ChipProps<ChipComponent>>>, {}, AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>>;
clearIndicator: SlotProps<React.ElementType<Partial<IconButtonProps>>, {}, AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>>;
/**
* Props applied to the Listbox element.
*/
listbox: SlotProps<React.ElementType<ReturnType<ReturnType<typeof useAutocomplete>['getListboxProps']> & {
sx?: SxProps<Theme>;
ref?: React.Ref<Element>;
}>, {}, AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>>;
paper: SlotProps<React.ElementType<Partial<PaperProps>>, AutocompletePaperSlotPropsOverrides, AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>>;
popper: SlotProps<React.ElementType<Partial<PopperProps>>, AutocompletePopperSlotPropsOverrides, AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>>;
popupIndicator: SlotProps<React.ElementType<Partial<IconButtonProps>>, {}, AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>>;
}>;
export interface AutocompleteProps<Value, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> extends UseAutocompleteProps<Value, Multiple, DisableClearable, FreeSolo>, StandardProps<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'children'>, AutocompleteSlotsAndSlotProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent> {
/**
* Props applied to the [`Chip`](https://mui.com/material-ui/api/chip/) element.
* @deprecated Use `slotProps.chip` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
ChipProps?: ChipProps<ChipComponent>;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<AutocompleteClasses>;
/**
* The icon to display in place of the default clear icon.
* @default <ClearIcon fontSize="small" />
*/
clearIcon?: React.ReactNode;
/**
* Override the default text for the *clear* icon button.
*
* For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
* @default 'Clear'
*/
clearText?: string;
/**
* Override the default text for the *close popup* icon button.
*
* For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
* @default 'Close'
*/
closeText?: string;
/**
* The props used for each slot inside.
* @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.
*/
componentsProps?: {
clearIndicator?: Partial<IconButtonProps>;
paper?: PaperProps;
popper?: Partial<PopperProps>;
popupIndicator?: Partial<IconButtonProps>;
};
/**
* If `true`, the component is disabled.
* @default false
*/
disabled?: boolean;
/**
* If `true`, the `Popper` content will be under the DOM hierarchy of the parent component.
* @default false
*/
disablePortal?: boolean;
/**
* Force the visibility display of the popup icon.
* @default 'auto'
*/
forcePopupIcon?: true | false | 'auto';
/**
* If `true`, the input will take up the full width of its container.
* @default false
*/
fullWidth?: boolean;
/**
* The label to display when the tags are truncated (`limitTags`).
*
* @param {number} more The number of truncated tags.
* @returns {ReactNode}
* @default (more) => `+${more}`
*/
getLimitTagsText?: (more: number) => React.ReactNode;
/**
* The component used to render the listbox.
* @default 'ul'
* @deprecated Use `slotProps.listbox.component` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
ListboxComponent?: React.JSXElementConstructor<React.HTMLAttributes<HTMLElement>>;
/**
* Props applied to the Listbox element.
* @deprecated Use `slotProps.listbox` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
ListboxProps?: ReturnType<ReturnType<typeof useAutocomplete>['getListboxProps']> & {
sx?: SxProps<Theme>;
ref?: React.Ref<Element>;
};
/**
* If `true`, the component is in a loading state.
* This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, for example `options` are empty).
* @default false
*/
loading?: boolean;
/**
* Text to display when in a loading state.
*
* For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
* @default 'Loading…'
*/
loadingText?: React.ReactNode;
/**
* The maximum number of tags that will be visible when not focused.
* Set `-1` to disable the limit.
* @default -1
*/
limitTags?: number;
/**
* Text to display when there are no options.
*
* For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
* @default 'No options'
*/
noOptionsText?: React.ReactNode;
onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement> & {
defaultMuiPrevented?: boolean;
}) => void;
/**
* Override the default text for the *open popup* icon button.
*
* For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
* @default 'Open'
*/
openText?: string;
/**
* The component used to render the body of the popup.
* @default Paper
* @deprecated Use `slots.paper` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
PaperComponent?: React.JSXElementConstructor<React.HTMLAttributes<HTMLElement>>;
/**
* The component used to position the popup.
* @default Popper
* @deprecated Use `slots.popper` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
PopperComponent?: React.JSXElementConstructor<PopperProps>;
/**
* The icon to display in place of the default popup icon.
* @default <ArrowDropDownIcon />
*/
popupIcon?: React.ReactNode;
/**
* If `true`, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted.
* @default false
*/
readOnly?: boolean;
/**
* Render the group.
*
* @param {AutocompleteRenderGroupParams} params The group to render.
* @returns {ReactNode}
*/
renderGroup?: (params: AutocompleteRenderGroupParams) => React.ReactNode;
/**
* Render the input.
*
* @param {object} params
* @returns {ReactNode}
*/
renderInput: (params: AutocompleteRenderInputParams) => React.ReactNode;
/**
* Render the option, use `getOptionLabel` by default.
*
* @param {object} props The props to apply on the li element.
* @param {Value} option The option to render.
* @param {object} state The state of each option.
* @param {object} ownerState The state of the Autocomplete component.
* @returns {ReactNode}
*/
renderOption?: (props: React.HTMLAttributes<HTMLLIElement> & {
key: any;
}, option: Value, state: AutocompleteRenderOptionState, ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>) => React.ReactNode;
/**
* Render the selected value when doing multiple selections.
*
* @deprecated Use `renderValue` prop instead
*
* @param {Value[]} value The `value` provided to the component.
* @param {function} getTagProps A tag props getter.
* @param {object} ownerState The state of the Autocomplete component.
* @returns {ReactNode}
*/
renderTags?: (value: Value[], getTagProps: AutocompleteRenderGetTagProps, ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>) => React.ReactNode;
/**
* Renders the selected value(s) as rich content in the input for both single and multiple selections.
*
* @param {AutocompleteRenderValue<Value, Multiple, FreeSolo>} value The `value` provided to the component.
* @param {function} getItemProps The value item props.
* @param {object} ownerState The state of the Autocomplete component.
* @returns {ReactNode}
*/
renderValue?: (value: AutocompleteRenderValue<Value, Multiple, FreeSolo>, getItemProps: AutocompleteRenderValueGetItemProps<Multiple>, ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>) => React.ReactNode;
/**
* The size of the component.
* @default 'medium'
*/
size?: OverridableStringUnion<'small' | 'medium', AutocompletePropsSizeOverrides>;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
}
/**
*
* Demos:
*
* - [Autocomplete](https://mui.com/material-ui/react-autocomplete/)
*
* API:
*
* - [Autocomplete API](https://mui.com/material-ui/api/autocomplete/)
*/
export default function Autocomplete<Value, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']>(props: AutocompleteProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>): React.JSX.Element;
@@ -0,0 +1,58 @@
export interface AutocompleteClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the root element if `fullWidth={true}`. */
fullWidth: string;
/** State class applied to the root element if the listbox is displayed. */
expanded: string;
/** State class applied to the root element if focused. */
focused: string;
/** Styles applied to the option elements if they are keyboard focused. */
focusVisible: string;
/** Styles applied to the tag elements, for example the chips. */
tag: string;
/** Styles applied to the tag elements, for example the chips if `size="small"`. */
tagSizeSmall: string;
/** Styles applied to the tag elements, for example the chips if `size="medium"`. */
tagSizeMedium: string;
/** Styles applied when the popup icon is rendered. */
hasPopupIcon: string;
/** Styles applied when the clear icon is rendered. */
hasClearIcon: string;
/** Styles applied to the Input element. */
inputRoot: string;
/** Styles applied to the input element. */
input: string;
/** Styles applied to the input element if the input is focused. */
inputFocused: string;
/** Styles applied to the endAdornment element. */
endAdornment: string;
/** Styles applied to the clear indicator. */
clearIndicator: string;
/** Styles applied to the popup indicator. */
popupIndicator: string;
/** Styles applied to the popup indicator if the popup is open. */
popupIndicatorOpen: string;
/** Styles applied to the popper element. */
popper: string;
/** Styles applied to the popper element if `disablePortal={true}`. */
popperDisablePortal: string;
/** Styles applied to the Paper component. */
paper: string;
/** Styles applied to the listbox component. */
listbox: string;
/** Styles applied to the loading wrapper. */
loading: string;
/** Styles applied to the no option wrapper. */
noOptions: string;
/** Styles applied to the option elements. */
option: string;
/** Styles applied to the group's label elements. */
groupLabel: string;
/** Styles applied to the group's ul elements. */
groupUl: string;
}
export type AutocompleteClassKey = keyof AutocompleteClasses;
export declare function getAutocompleteUtilityClass(slot: string): string;
declare const autocompleteClasses: AutocompleteClasses;
export default autocompleteClasses;
+4
View File
@@ -0,0 +1,4 @@
export { default } from "./Autocomplete.js";
export * from "./Autocomplete.js";
export { default as autocompleteClasses } from "./autocompleteClasses.js";
export * from "./autocompleteClasses.js";
+85
View File
@@ -0,0 +1,85 @@
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 { AvatarClasses } from "./avatarClasses.js";
import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
export interface AvatarSlots {
/**
* The component that renders the transition.
* [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
* @default Collapse
*/
img: React.JSXElementConstructor<React.ImgHTMLAttributes<HTMLImageElement>>;
}
export interface AvatarPropsVariantOverrides {}
export type AvatarSlotsAndSlotProps = CreateSlotsAndSlotProps<AvatarSlots, {
img: SlotProps<React.ElementType<React.ImgHTMLAttributes<HTMLImageElement>>, {}, AvatarOwnProps>;
}>;
export interface AvatarOwnProps {
/**
* Used in combination with `src` or `srcSet` to
* provide an alt attribute for the rendered `img` element.
*/
alt?: string;
/**
* Used to render icon or text elements inside the Avatar if `src` is not set.
* This can be an element, or just a string.
*/
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<AvatarClasses>;
/**
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
* It can be used to listen for the loading error event.
* @deprecated Use `slotProps.img` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
imgProps?: React.ImgHTMLAttributes<HTMLImageElement> & {
sx?: SxProps<Theme>;
};
/**
* The `sizes` attribute for the `img` element.
*/
sizes?: string;
/**
* The `src` attribute for the `img` element.
*/
src?: string;
/**
* The `srcSet` attribute for the `img` element.
* Use this attribute for responsive image display.
*/
srcSet?: string;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
/**
* The shape of the avatar.
* @default 'circular'
*/
variant?: OverridableStringUnion<'circular' | 'rounded' | 'square', AvatarPropsVariantOverrides>;
}
export interface AvatarTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
props: AdditionalProps & AvatarOwnProps & AvatarSlotsAndSlotProps;
defaultComponent: RootComponent;
}
/**
*
* Demos:
*
* - [Avatar](https://mui.com/material-ui/react-avatar/)
*
* API:
*
* - [Avatar API](https://mui.com/material-ui/api/avatar/)
*/
declare const Avatar: OverridableComponent<AvatarTypeMap>;
export type AvatarProps<RootComponent extends React.ElementType = AvatarTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<AvatarTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export default Avatar;
+20
View File
@@ -0,0 +1,20 @@
export interface AvatarClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the root element if not `src` or `srcSet`. */
colorDefault: string;
/** Styles applied to the root element if `variant="circular"`. */
circular: string;
/** Styles applied to the root element if `variant="rounded"`. */
rounded: string;
/** Styles applied to the root element if `variant="square"`. */
square: string;
/** Styles applied to the img element if either `src` or `srcSet` is defined. */
img: string;
/** Styles applied to the fallback icon */
fallback: string;
}
export type AvatarClassKey = keyof AvatarClasses;
export declare function getAvatarUtilityClass(slot: string): string;
declare const avatarClasses: AvatarClasses;
export default avatarClasses;
+4
View File
@@ -0,0 +1,4 @@
export { default } from "./Avatar.js";
export * from "./Avatar.js";
export { default as avatarClasses } from "./avatarClasses.js";
export * from "./avatarClasses.js";
+96
View File
@@ -0,0 +1,96 @@
import * as React from 'react';
import { OverridableComponent, OverridableStringUnion, OverrideProps, PartiallyRequired } from '@mui/types';
import { SxProps } from '@mui/system';
import { Theme } from '@mui/material';
import { AvatarGroupClasses } from "./avatarGroupClasses.js";
import Avatar from "../Avatar/index.js";
import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
export interface AvatarGroupPropsVariantOverrides {}
export interface AvatarGroupComponentsPropsOverrides {}
export interface AvatarGroupSlots {
surplus: React.ElementType;
}
export type AvatarGroupSlotsAndSlotProps = CreateSlotsAndSlotProps<AvatarGroupSlots, {
/**
* @deprecated use `slotProps.surplus` 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.
* */
additionalAvatar: React.ComponentPropsWithRef<typeof Avatar> & AvatarGroupComponentsPropsOverrides;
surplus: SlotProps<React.ElementType<React.ComponentPropsWithRef<typeof Avatar>>, AvatarGroupComponentsPropsOverrides, AvatarGroupOwnerState>;
}>;
export interface AvatarGroupOwnProps extends AvatarGroupSlotsAndSlotProps {
/**
* The avatars to stack.
*/
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<AvatarGroupClasses>;
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component?: React.ElementType;
/**
* The extra props for the slot components.
* You can override the existing props or add new ones.
*
* This prop is an alias for the `slotProps` prop.
*
* @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.
*/
componentsProps?: {
additionalAvatar?: React.ComponentPropsWithRef<typeof Avatar> & AvatarGroupComponentsPropsOverrides;
};
/**
* Max avatars to show before +x.
* @default 5
*/
max?: number;
/**
* custom renderer of extraAvatars
* @param {number} surplus number of extra avatars
* @returns {React.ReactNode} custom element to display
*/
renderSurplus?: (surplus: number) => React.ReactNode;
/**
* Spacing between avatars.
* @default 'medium'
*/
spacing?: 'small' | 'medium' | number;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
/**
* The total number of avatars. Used for calculating the number of extra avatars.
* @default children.length
*/
total?: number;
/**
* The variant to use.
* @default 'circular'
*/
variant?: OverridableStringUnion<'circular' | 'rounded' | 'square', AvatarGroupPropsVariantOverrides>;
}
export interface AvatarGroupTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
props: AdditionalProps & AvatarGroupOwnProps;
defaultComponent: RootComponent;
}
/**
*
* Demos:
*
* - [Avatar](https://mui.com/material-ui/react-avatar/)
*
* API:
*
* - [AvatarGroup API](https://mui.com/material-ui/api/avatar-group/)
*/
declare const AvatarGroup: OverridableComponent<AvatarGroupTypeMap>;
export type AvatarGroupProps<RootComponent extends React.ElementType = AvatarGroupTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<AvatarGroupTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export interface AvatarGroupOwnerState extends PartiallyRequired<AvatarGroupProps, 'max' | 'spacing' | 'component' | 'variant'> {}
export default AvatarGroup;
+10
View File
@@ -0,0 +1,10 @@
export interface AvatarGroupClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the avatar elements. */
avatar: string;
}
export type AvatarGroupClassKey = keyof AvatarGroupClasses;
export declare function getAvatarGroupUtilityClass(slot: string): string;
declare const avatarGroupClasses: AvatarGroupClasses;
export default avatarGroupClasses;
+4
View File
@@ -0,0 +1,4 @@
export { default } from "./AvatarGroup.js";
export * from "./AvatarGroup.js";
export { default as avatarGroupClasses } from "./avatarGroupClasses.js";
export * from "./avatarGroupClasses.js";
+118
View File
@@ -0,0 +1,118 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { FadeProps } from "../Fade/index.js";
import { TransitionProps } from "../transitions/transition.js";
import { Theme } from "../styles/index.js";
import { BackdropClasses } from "./backdropClasses.js";
import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from "../utils/types.js";
export interface BackdropSlots {
/**
* The component that renders the root.
* @default 'div'
*/
root: React.ElementType;
/**
* The component that renders the transition.
* [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
* @default Fade
*/
transition: React.ElementType;
}
export interface BackdropComponentsPropsOverrides {}
export interface BackdropTransitionSlotPropsOverrides {}
export type BackdropSlotsAndSlotProps = CreateSlotsAndSlotProps<BackdropSlots, {
/**
* Props forwarded to the transition slot.
* By default, the avaible props are based on the div element.
*/
root: SlotProps<'div', BackdropComponentsPropsOverrides, BackdropOwnerState>;
/**
* Props forwarded to the transition slot.
* By default, the avaible props are based on the [Fade](https://mui.com/material-ui/api/fade/#props) component.
*/
transition: SlotComponentProps<React.ElementType, TransitionProps & BackdropTransitionSlotPropsOverrides, BackdropOwnerState>;
}>;
export interface BackdropOwnProps extends Partial<Omit<FadeProps, 'children'>>, BackdropSlotsAndSlotProps {
/**
* The content of the component.
*/
children?: React.ReactNode;
/**
* 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;
};
/**
* 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?: React.HTMLAttributes<HTMLDivElement> & BackdropComponentsPropsOverrides;
};
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<BackdropClasses>;
/**
* If `true`, the backdrop is invisible.
* It can be used when rendering a popover or a custom select component.
* @default false
*/
invisible?: boolean;
/**
* If `true`, the component is shown.
*/
open: boolean;
/**
* 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.
*/
transitionDuration?: TransitionProps['timeout'];
/**
* 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 Fade
* @deprecated Use `slots.transition` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
TransitionComponent?: React.JSXElementConstructor<TransitionProps & {
children: React.ReactElement<unknown, any>;
}>;
}
export interface BackdropTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
props: AdditionalProps & BackdropOwnProps;
defaultComponent: RootComponent;
}
type BackdropRootProps = NonNullable<BackdropTypeMap['props']['componentsProps']>['root'];
export declare const BackdropRoot: React.FC<BackdropRootProps>;
/**
*
* Demos:
*
* - [Backdrop](https://mui.com/material-ui/react-backdrop/)
*
* API:
*
* - [Backdrop API](https://mui.com/material-ui/api/backdrop/)
* - inherits [Fade API](https://mui.com/material-ui/api/fade/)
*/
declare const Backdrop: OverridableComponent<BackdropTypeMap>;
export type BackdropProps<RootComponent extends React.ElementType = BackdropTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<BackdropTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export interface BackdropOwnerState extends BackdropProps {}
export default Backdrop;
+10
View File
@@ -0,0 +1,10 @@
export interface BackdropClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the root element if `invisible={true}`. */
invisible: string;
}
export type BackdropClassKey = keyof BackdropClasses;
export declare function getBackdropUtilityClass(slot: string): string;
declare const backdropClasses: BackdropClasses;
export default backdropClasses;
+4
View File
@@ -0,0 +1,4 @@
export { default } from "./Backdrop.js";
export * from "./Backdrop.js";
export { default as backdropClasses } from "./backdropClasses.js";
export * from "./backdropClasses.js";
+158
View File
@@ -0,0 +1,158 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { OverridableStringUnion, Simplify } from '@mui/types';
import { SlotComponentProps } from "../utils/types.js";
import { Theme } from "../styles/index.js";
import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
import { BadgeClasses } from "./badgeClasses.js";
export interface BadgePropsVariantOverrides {}
export interface BadgePropsColorOverrides {}
export interface BadgeRootSlotPropsOverrides {}
export interface BadgeBadgeSlotPropsOverrides {}
export type BadgeOwnerState = Simplify<BadgeOwnProps & {
badgeContent: React.ReactNode;
invisible: boolean;
max: number;
displayValue: React.ReactNode;
showZero: boolean;
anchorOrigin: BadgeOrigin;
color: OverridableStringUnion<'primary' | 'secondary' | 'default' | 'error' | 'info' | 'success' | 'warning', BadgePropsColorOverrides>;
overlap: 'rectangular' | 'circular';
variant: OverridableStringUnion<'standard' | 'dot', BadgePropsVariantOverrides>;
}>;
export interface BadgeOrigin {
vertical?: 'top' | 'bottom';
horizontal?: 'left' | 'right';
}
export interface BadgeOwnProps {
/**
* The anchor of the badge.
* @default {
* vertical: 'top',
* horizontal: 'right',
* }
*/
anchorOrigin?: BadgeOrigin;
/**
* The content rendered within the badge.
*/
badgeContent?: React.ReactNode;
/**
* The badge will be added relative to this node.
*/
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<BadgeClasses>;
/**
* @ignore
*/
className?: 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 'default'
*/
color?: OverridableStringUnion<'primary' | 'secondary' | 'default' | 'error' | 'info' | 'success' | 'warning', BadgePropsColorOverrides>;
/**
* 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?: BadgeOwnProps['slotProps'];
/**
* 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;
Badge?: React.ElementType;
};
/**
* If `true`, the badge is invisible.
* @default false
*/
invisible?: boolean;
/**
* Max count to show.
* @default 99
*/
max?: number;
/**
* Wrapped shape the badge should overlap.
* @default 'rectangular'
*/
overlap?: 'rectangular' | 'circular';
/**
* The props used for each slot inside the Badge.
* @default {}
*/
slotProps?: {
root?: SlotComponentProps<'span', BadgeRootSlotPropsOverrides, BadgeOwnerState>;
badge?: SlotComponentProps<'span', BadgeBadgeSlotPropsOverrides, BadgeOwnerState>;
};
/**
* The components used for each slot inside the Badge.
* Either a string to use a HTML element or a component.
* @default {}
*/
slots?: {
/**
* The component that renders the root.
* @default 'span'
*/
root?: React.ElementType;
/**
* The component that renders the badge.
* @default 'span'
*/
badge?: React.ElementType;
};
/**
* Controls whether the badge is hidden when `badgeContent` is zero.
* @default false
*/
showZero?: boolean;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
/**
* The variant to use.
* @default 'standard'
*/
variant?: OverridableStringUnion<'standard' | 'dot', BadgePropsVariantOverrides>;
}
export interface BadgeTypeMap<RootComponent extends React.ElementType = 'span', AdditionalProps = {}> {
props: AdditionalProps & BadgeOwnProps;
defaultComponent: RootComponent;
}
type BadgeRootProps = NonNullable<BadgeTypeMap['props']['slotProps']>['root'];
type BadgeBadgeProps = NonNullable<BadgeTypeMap['props']['slotProps']>['badge'];
export declare const BadgeRoot: React.FC<BadgeRootProps>;
export declare const BadgeMark: React.FC<BadgeBadgeProps>;
/**
*
* Demos:
*
* - [Avatar](https://mui.com/material-ui/react-avatar/)
* - [Badge](https://mui.com/material-ui/react-badge/)
*
* API:
*
* - [Badge API](https://mui.com/material-ui/api/badge/)
*/
declare const Badge: OverridableComponent<BadgeTypeMap>;
export type BadgeProps<RootComponent extends React.ElementType = BadgeTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<BadgeTypeMap<RootComponent, AdditionalProps>, RootComponent> & {
component?: React.ElementType;
};
export default Badge;
+56
View File
@@ -0,0 +1,56 @@
export interface BadgeClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the badge `span` element. */
badge: string;
/** Styles applied to the badge `span` element if `variant="dot"`. */
dot: string;
/** Styles applied to the badge `span` element if `variant="standard"`. */
standard: string;
/** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }}`. */
anchorOriginTopRight: string;
/** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }}`. */
anchorOriginBottomRight: string;
/** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }}`. */
anchorOriginTopLeft: string;
/** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }}`. */
anchorOriginBottomLeft: string;
/** State class applied to the badge `span` element if `invisible={true}`. */
invisible: string;
/** Styles applied to the badge `span` element if `color="primary"`. */
colorPrimary: string;
/** Styles applied to the badge `span` element if `color="secondary"`. */
colorSecondary: string;
/** Styles applied to the badge `span` element if `color="error"`. */
colorError: string;
/** Styles applied to the badge `span` element if `color="info"`. */
colorInfo: string;
/** Styles applied to the badge `span` element if `color="success"`. */
colorSuccess: string;
/** Styles applied to the badge `span` element if `color="warning"`. */
colorWarning: string;
/** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangular"`. */
anchorOriginTopRightRectangular: string;
/** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"`. */
anchorOriginBottomRightRectangular: string;
/** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangular"`. */
anchorOriginTopLeftRectangular: string;
/** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"`. */
anchorOriginBottomLeftRectangular: string;
/** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap="circular"`. */
anchorOriginTopRightCircular: string;
/** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circular"`. */
anchorOriginBottomRightCircular: string;
/** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="circular"`. */
anchorOriginTopLeftCircular: string;
/** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circular"`. */
anchorOriginBottomLeftCircular: string;
/** Styles applied to the badge `span` element if `overlap="rectangular"`. */
overlapRectangular: string;
/** Styles applied to the badge `span` element if `overlap="circular"`. */
overlapCircular: string;
}
export type BadgeClassKey = keyof BadgeClasses;
export declare function getBadgeUtilityClass(slot: string): string;
declare const badgeClasses: BadgeClasses;
export default badgeClasses;
+4
View File
@@ -0,0 +1,4 @@
export { default } from "./Badge.js";
export * from "./Badge.js";
export { default as badgeClasses } from "./badgeClasses.js";
export * from "./badgeClasses.js";
+13
View File
@@ -0,0 +1,13 @@
import { UseBadgeParameters, UseBadgeReturnValue } from "./useBadge.types.js";
/**
*
* Demos:
*
* - [Badge](https://mui.com/base-ui/react-badge/#hook)
*
* API:
*
* - [useBadge API](https://mui.com/base-ui/react-badge/hooks-api/#use-badge)
*/
declare function useBadge(parameters: UseBadgeParameters): UseBadgeReturnValue;
export default useBadge;
+39
View File
@@ -0,0 +1,39 @@
export interface UseBadgeParameters {
/**
* The content rendered within the badge.
*/
badgeContent?: React.ReactNode;
/**
* If `true`, the badge is invisible.
* @default false
*/
invisible?: boolean;
/**
* Max count to show.
* @default 99
*/
max?: number;
/**
* Controls whether the badge is hidden when `badgeContent` is zero.
* @default false
*/
showZero?: boolean;
}
export interface UseBadgeReturnValue {
/**
* Defines the content that's displayed inside the badge.
*/
badgeContent: React.ReactNode;
/**
* If `true`, the component will not be visible.
*/
invisible: boolean;
/**
* Maximum number to be displayed in the badge.
*/
max: number;
/**
* Value to be displayed in the badge. If `badgeContent` is greater than `max`, it will return `max+`.
*/
displayValue: React.ReactNode;
}
@@ -0,0 +1,55 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { Theme } from "../index.js";
import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
import { BottomNavigationClasses } from "./bottomNavigationClasses.js";
export interface BottomNavigationOwnProps {
/**
* The content of the component.
*/
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<BottomNavigationClasses>;
/**
* Callback fired when the value changes.
*
* @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
* @param {any} value We default to the index of the child.
*/
onChange?: (event: React.SyntheticEvent, value: any) => void;
/**
* If `true`, all `BottomNavigationAction`s will show their labels.
* By default, only the selected `BottomNavigationAction` will show its label.
* @default false
*/
showLabels?: boolean;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
/**
* The value of the currently selected `BottomNavigationAction`.
*/
value?: any;
}
export interface BottomNavigationTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
props: AdditionalProps & BottomNavigationOwnProps;
defaultComponent: RootComponent;
}
/**
*
* Demos:
*
* - [Bottom Navigation](https://mui.com/material-ui/react-bottom-navigation/)
*
* API:
*
* - [BottomNavigation API](https://mui.com/material-ui/api/bottom-navigation/)
*/
declare const BottomNavigation: OverridableComponent<BottomNavigationTypeMap>;
export type BottomNavigationProps<RootComponent extends React.ElementType = BottomNavigationTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<BottomNavigationTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export default BottomNavigation;
@@ -0,0 +1,8 @@
export interface BottomNavigationClasses {
/** Styles applied to the root element. */
root: string;
}
export type BottomNavigationClassKey = keyof BottomNavigationClasses;
export declare function getBottomNavigationUtilityClass(slot: string): string;
declare const bottomNavigationClasses: BottomNavigationClasses;
export default bottomNavigationClasses;
+4
View File
@@ -0,0 +1,4 @@
export { default } from "./BottomNavigation.js";
export * from "./BottomNavigation.js";
export { default as bottomNavigationClasses } from "./bottomNavigationClasses.js";
export * from "./bottomNavigationClasses.js";
@@ -0,0 +1,62 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { Theme } from "../index.js";
import { ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from "../ButtonBase/index.js";
import { OverrideProps } from "../OverridableComponent/index.js";
import { BottomNavigationActionClasses } from "./bottomNavigationActionClasses.js";
export interface BottomNavigationActionOwnProps {
/**
* This prop isn't supported.
* Use the `component` prop if you need to change the children structure.
*/
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<BottomNavigationActionClasses>;
/**
* The icon to display.
*/
icon?: React.ReactNode;
/**
* The label element.
*/
label?: React.ReactNode;
/**
* If `true`, the `BottomNavigationAction` will show its label.
* By default, only the selected `BottomNavigationAction`
* inside `BottomNavigation` will show its label.
*
* The prop defaults to the value (`false`) inherited from the parent BottomNavigation component.
*/
showLabel?: boolean;
/**
* 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;
}
export type BottomNavigationActionTypeMap<AdditionalProps, RootComponent extends React.ElementType> = ExtendButtonBaseTypeMap<{
props: AdditionalProps & BottomNavigationActionOwnProps;
defaultComponent: RootComponent;
}>;
/**
*
* Demos:
*
* - [Bottom Navigation](https://mui.com/material-ui/react-bottom-navigation/)
*
* API:
*
* - [BottomNavigationAction API](https://mui.com/material-ui/api/bottom-navigation-action/)
* - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
*/
declare const BottomNavigationAction: ExtendButtonBase<BottomNavigationActionTypeMap<{}, ButtonBaseTypeMap['defaultComponent']>>;
export type BottomNavigationActionProps<RootComponent extends React.ElementType = ButtonBaseTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<BottomNavigationActionTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export default BottomNavigationAction;
@@ -0,0 +1,14 @@
export interface BottomNavigationActionClasses {
/** Styles applied to the root element. */
root: string;
/** State class applied to the root element if selected. */
selected: string;
/** State class applied to the root element if `showLabel={false}` and not selected. */
iconOnly: string;
/** Styles applied to the label's span element. */
label: string;
}
export type BottomNavigationActionClassKey = keyof BottomNavigationActionClasses;
export declare function getBottomNavigationActionUtilityClass(slot: string): string;
declare const bottomNavigationActionClasses: BottomNavigationActionClasses;
export default bottomNavigationActionClasses;
+4
View File
@@ -0,0 +1,4 @@
export { default } from "./BottomNavigationAction.js";
export * from "./BottomNavigationAction.js";
export { default as bottomNavigationActionClasses } from "./bottomNavigationActionClasses.js";
export * from "./bottomNavigationActionClasses.js";
+20
View File
@@ -0,0 +1,20 @@
import { BoxTypeMap } from '@mui/system';
import { OverridableComponent } from '@mui/types';
import { OverrideProps } from "../OverridableComponent/index.js";
import { Theme as MaterialTheme } from "../styles/index.js";
/**
*
* Demos:
*
* - [Box](https://mui.com/material-ui/react-box/)
*
* API:
*
* - [Box API](https://mui.com/material-ui/api/box/)
*/
declare const Box: OverridableComponent<BoxTypeMap<{}, 'div', MaterialTheme>>;
export type BoxProps<RootComponent extends React.ElementType = BoxTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<BoxTypeMap<AdditionalProps, RootComponent, MaterialTheme>, RootComponent> & {
component?: React.ElementType;
};
export default Box;
+7
View File
@@ -0,0 +1,7 @@
export interface BoxClasses {
/** Styles applied to the root element. */
root: string;
}
export type BoxClassKey = keyof BoxClasses;
declare const boxClasses: BoxClasses;
export default boxClasses;
+4
View File
@@ -0,0 +1,4 @@
export { default } from "./Box.js";
export * from "./Box.js";
export { default as boxClasses } from "./boxClasses.js";
export * from "./boxClasses.js";
+94
View File
@@ -0,0 +1,94 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { SlotComponentProps } from "../utils/types.js";
import { Theme } from "../styles/index.js";
import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
import { BreadcrumbsClasses } from "./breadcrumbsClasses.js";
import SvgIcon from "../SvgIcon/index.js";
export interface BreadcrumbsCollapsedIconSlotPropsOverrides {}
export interface BreadcrumbsOwnerState extends BreadcrumbsProps {
expanded: boolean;
}
export interface BreadcrumbsOwnProps {
/**
* The content of the component.
*/
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<BreadcrumbsClasses>;
/**
* The components used for each slot inside the Breadcumb.
* Either a string to use a HTML element or a component.
* @default {}
*/
slots?: {
CollapsedIcon?: React.ElementType;
};
/**
* The props used for each slot inside the Breadcumb.
* @default {}
*/
slotProps?: {
/**
* Props applied to the CollapsedIcon slot.
* @default {}
*/
collapsedIcon?: SlotComponentProps<typeof SvgIcon, BreadcrumbsCollapsedIconSlotPropsOverrides, BreadcrumbsOwnerState>;
};
/**
* Override the default label for the expand button.
*
* For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
* @default 'Show path'
*/
expandText?: string;
/**
* If max items is exceeded, the number of items to show after the ellipsis.
* @default 1
*/
itemsAfterCollapse?: number;
/**
* If max items is exceeded, the number of items to show before the ellipsis.
* @default 1
*/
itemsBeforeCollapse?: number;
/**
* Specifies the maximum number of breadcrumbs to display. When there are more
* than the maximum number, only the first `itemsBeforeCollapse` and last `itemsAfterCollapse`
* will be shown, with an ellipsis in between.
* @default 8
*/
maxItems?: number;
/**
* Custom separator node.
* @default '/'
*/
separator?: React.ReactNode;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
}
export interface BreadcrumbsTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'nav'> {
props: AdditionalProps & BreadcrumbsOwnProps;
defaultComponent: RootComponent;
}
/**
*
* Demos:
*
* - [Breadcrumbs](https://mui.com/material-ui/react-breadcrumbs/)
*
* API:
*
* - [Breadcrumbs API](https://mui.com/material-ui/api/breadcrumbs/)
* - inherits [Typography API](https://mui.com/material-ui/api/typography/)
*/
declare const Breadcrumbs: OverridableComponent<BreadcrumbsTypeMap>;
export type BreadcrumbsProps<RootComponent extends React.ElementType = BreadcrumbsTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<BreadcrumbsTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export default Breadcrumbs;
+14
View File
@@ -0,0 +1,14 @@
export interface BreadcrumbsClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the ol element. */
ol: string;
/** Styles applied to the li element. */
li: string;
/** Styles applied to the separator element. */
separator: string;
}
export type BreadcrumbsClassKey = keyof BreadcrumbsClasses;
export declare function getBreadcrumbsUtilityClass(slot: string): string;
declare const breadcrumbsClasses: BreadcrumbsClasses;
export default breadcrumbsClasses;
+4
View File
@@ -0,0 +1,4 @@
export { default } from "./Breadcrumbs.js";
export * from "./Breadcrumbs.js";
export { default as breadcrumbsClasses } from "./breadcrumbsClasses.js";
export * from "./breadcrumbsClasses.js";
+130
View File
@@ -0,0 +1,130 @@
import * as React from 'react';
import { DistributiveOmit, OverridableStringUnion } from '@mui/types';
import { SxProps } from '@mui/system';
import { Theme } from "../styles/index.js";
import { ExtendButtonBase, ExtendButtonBaseTypeMap } from "../ButtonBase/index.js";
import { OverrideProps, OverridableComponent, OverridableTypeMap } from "../OverridableComponent/index.js";
import { ButtonClasses } from "./buttonClasses.js";
export interface ButtonPropsVariantOverrides {}
export interface ButtonPropsColorOverrides {}
export interface ButtonPropsSizeOverrides {}
export interface ButtonOwnProps {
/**
* The content of the component.
*/
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<ButtonClasses>;
/**
* 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<'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning', ButtonPropsColorOverrides>;
/**
* If `true`, the component is disabled.
* @default false
*/
disabled?: boolean;
/**
* If `true`, no elevation is used.
* @default false
*/
disableElevation?: boolean;
/**
* If `true`, the keyboard focus ripple is disabled.
* @default false
*/
disableFocusRipple?: boolean;
/**
* Element placed after the children.
*/
endIcon?: React.ReactNode;
/**
* If `true`, the button will take up the full width of its container.
* @default false
*/
fullWidth?: 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;
/**
* If `true`, the loading indicator is visible and the button is disabled.
* If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
* @default null
*/
loading?: boolean | null;
/**
* Element placed before the children if the button is in loading state.
* The node should contain an element with `role="progressbar"` with an accessible name.
* By default, it renders a `CircularProgress` that is labeled by the button itself.
* @default <CircularProgress color="inherit" size={16} />
*/
loadingIndicator?: React.ReactNode;
/**
* The loading indicator can be positioned on the start, end, or the center of the button.
* @default 'center'
*/
loadingPosition?: 'start' | 'end' | 'center';
/**
* The size of the component.
* `small` is equivalent to the dense button styling.
* @default 'medium'
*/
size?: OverridableStringUnion<'small' | 'medium' | 'large', ButtonPropsSizeOverrides>;
/**
* Element placed before the children.
*/
startIcon?: React.ReactNode;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
/**
* The variant to use.
* @default 'text'
*/
variant?: OverridableStringUnion<'text' | 'outlined' | 'contained', ButtonPropsVariantOverrides>;
}
export type ButtonTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'button'> = ExtendButtonBaseTypeMap<{
props: AdditionalProps & ButtonOwnProps;
defaultComponent: RootComponent;
}>;
/**
* utility to create component types that inherit props from ButtonBase.
* This component has an additional overload if the `href` prop is set which
* can make extension quite tricky
*/
export interface ExtendButtonTypeMap<TypeMap extends OverridableTypeMap> {
props: TypeMap['props'] & (TypeMap['props'] extends {
classes?: Record<string, string>;
} ? DistributiveOmit<ButtonTypeMap['props'], 'classes'> : ButtonTypeMap['props']);
defaultComponent: TypeMap['defaultComponent'];
}
export type ExtendButton<TypeMap extends OverridableTypeMap> = ((props: {
href: string;
} & OverrideProps<ExtendButtonBaseTypeMap<TypeMap>, 'a'>) => React.JSX.Element) & OverridableComponent<ExtendButtonBaseTypeMap<TypeMap>>;
/**
*
* Demos:
*
* - [Button Group](https://mui.com/material-ui/react-button-group/)
* - [Button](https://mui.com/material-ui/react-button/)
*
* API:
*
* - [Button API](https://mui.com/material-ui/api/button/)
* - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
*/
declare const Button: ExtendButtonBase<ButtonTypeMap>;
export type ButtonProps<RootComponent extends React.ElementType = ButtonTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<ButtonTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export default Button;
+194
View File
@@ -0,0 +1,194 @@
export interface ButtonClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the root element if `variant="text"`. */
text: string;
/** Styles applied to the root element if `variant="text"` and `color="inherit"`.
* @deprecated Combine the [.MuiButton-text](/material-ui/api/button/#button-classes-text) and [.MuiButton-colorInherit](/material-ui/api/button/#button-classes-colorInherit) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
textInherit: string;
/** Styles applied to the root element if `variant="text"` and `color="primary"`.
* @deprecated Combine the [.MuiButton-text](/material-ui/api/button/#button-classes-text) and [.MuiButton-colorPrimary](/material-ui/api/button/#button-classes-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
textPrimary: string;
/** Styles applied to the root element if `variant="text"` and `color="secondary"`.
* @deprecated Combine the [.MuiButton-text](/material-ui/api/button/#button-classes-text) and [.MuiButton-colorSecondary](/material-ui/api/button/#button-classes-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
textSecondary: string;
/** Styles applied to the root element if `variant="text"` and `color="success"`.
* @deprecated Combine the [.MuiButton-text](/material-ui/api/button/#button-classes-text) and [.MuiButton-colorSuccess](/material-ui/api/button/#button-classes-colorSuccess) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
textSuccess: string;
/** Styles applied to the root element if `variant="text"` and `color="error"`.
* @deprecated Combine the [.MuiButton-text](/material-ui/api/button/#button-classes-text) and [.MuiButton-colorError](/material-ui/api/button/#button-classes-colorError) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
textError: string;
/** Styles applied to the root element if `variant="text"` and `color="info"`.
* @deprecated Combine the [.MuiButton-text](/material-ui/api/button/#button-classes-text) and [.MuiButton-colorInfo](/material-ui/api/button/#button-classes-colorInfo) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
textInfo: string;
/** Styles applied to the root element if `variant="text"` and `color="warning"`.
* @deprecated Combine the [.MuiButton-text](/material-ui/api/button/#button-classes-text) and [.MuiButton-colorWarning](/material-ui/api/button/#button-classes-colorWarning) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
textWarning: string;
/** Styles applied to the root element if `variant="outlined"`. */
outlined: string;
/** Styles applied to the root element if `variant="outlined"` and `color="inherit"`.
* @deprecated Combine the [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) and [.MuiButton-colorInherit](/material-ui/api/button/#button-classes-colorInherit) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
outlinedInherit: string;
/** Styles applied to the root element if `variant="outlined"` and `color="primary"`.
* @deprecated Combine the [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) and [.MuiButton-colorPrimary](/material-ui/api/button/#button-classes-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
outlinedPrimary: string;
/** Styles applied to the root element if `variant="outlined"` and `color="secondary"`.
* @deprecated Combine the [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) and [.MuiButton-colorSecondary](/material-ui/api/button/#button-classes-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
outlinedSecondary: string;
/** Styles applied to the root element if `variant="outlined"` and `color="success"`.
* @deprecated Combine the [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) and [.MuiButton-colorSuccess](/material-ui/api/button/#button-classes-colorSuccess) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
outlinedSuccess: string;
/** Styles applied to the root element if `variant="outlined"` and `color="error"`.
* @deprecated Combine the [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) and [.MuiButton-colorError](/material-ui/api/button/#button-classes-colorError) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
outlinedError: string;
/** Styles applied to the root element if `variant="outlined"` and `color="info"`.
* @deprecated Combine the [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) and [.MuiButton-colorInfo](/material-ui/api/button/#button-classes-colorInfo) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
outlinedInfo: string;
/** Styles applied to the root element if `variant="outlined"` and `color="warning"`.
* @deprecated Combine the [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) and [.MuiButton-colorWarning](/material-ui/api/button/#button-classes-colorWarning) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
outlinedWarning: string;
/** Styles applied to the root element if `variant="contained"`. */
contained: string;
/** Styles applied to the root element if `variant="contained"` and `color="inherit"`.
* @deprecated Combine the [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) and [.MuiButton-colorInherit](/material-ui/api/button/#button-classes-colorInherit) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
containedInherit: string;
/** Styles applied to the root element if `variant="contained"` and `color="primary"`.
* @deprecated Combine the [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) and [.MuiButton-colorPrimary](/material-ui/api/button/#button-classes-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
containedPrimary: string;
/** Styles applied to the root element if `variant="contained"` and `color="secondary"`.
* @deprecated Combine the [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) and [.MuiButton-colorSecondary](/material-ui/api/button/#button-classes-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
containedSecondary: string;
/** Styles applied to the root element if `variant="contained"` and `color="success"`.
* @deprecated Combine the [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) and [.MuiButton-colorSuccess](/material-ui/api/button/#button-classes-colorSuccess) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
containedSuccess: string;
/** Styles applied to the root element if `variant="contained"` and `color="info"`.
* @deprecated Combine the [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) and [.MuiButton-colorInfo](/material-ui/api/button/#button-classes-colorInfo) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
containedInfo: string;
/** Styles applied to the root element if `variant="contained"` and `color="error"`.
* @deprecated Combine the [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) and [.MuiButton-colorError](/material-ui/api/button/#button-classes-colorError) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
containedError: string;
/** Styles applied to the root element if `variant="contained"` and `color="warning"`.
* @deprecated Combine the [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) and [.MuiButton-colorWarning](/material-ui/api/button/#button-classes-colorWarning) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
containedWarning: string;
/** Styles applied to the root element if `disableElevation={true}`. */
disableElevation: 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"` and `variant="text"`.
* @deprecated Combine the [.MuiButton-sizeSmall](/material-ui/api/button/#button-classes-sizeSmall) and [.MuiButton-text](/material-ui/api/button/#button-classes-text) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
textSizeSmall: string;
/** Styles applied to the root element if `size="medium"` and `variant="text"`.
* @deprecated Combine the [.MuiButton-sizeMedium](/material-ui/api/button/#button-classes-sizeMedium) and [.MuiButton-text](/material-ui/api/button/#button-classes-text) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
textSizeMedium: string;
/** Styles applied to the root element if `size="large"` and `variant="text"`.
* @deprecated Combine the [.MuiButton-sizeLarge](/material-ui/api/button/#button-classes-sizeLarge) and [.MuiButton-text](/material-ui/api/button/#button-classes-text) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
textSizeLarge: string;
/** Styles applied to the root element if `size="small"` and `variant="outlined"`.
* @deprecated Combine the [.MuiButton-sizeSmall](/material-ui/api/button/#button-classes-sizeSmall) and [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
outlinedSizeSmall: string;
/** Styles applied to the root element if `size="medium"` and `variant="outlined"`.
* @deprecated Combine the [.MuiButton-sizeMedium](/material-ui/api/button/#button-classes-sizeMedium) and [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
outlinedSizeMedium: string;
/** Styles applied to the root element if `size="large"` and `variant="outlined"`.
* @deprecated Combine the [.MuiButton-sizeLarge](/material-ui/api/button/#button-classes-sizeLarge) and [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
outlinedSizeLarge: string;
/** Styles applied to the root element if `size="small"` and `variant="contained"`.
* @deprecated Combine the [.MuiButton-sizeSmall](/material-ui/api/button/#button-classes-sizeSmall) and [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
containedSizeSmall: string;
/** Styles applied to the root element if `size="medium"` and `variant="contained"`.
* @deprecated Combine the [.MuiButton-sizeMedium](/material-ui/api/button/#button-classes-sizeMedium) and [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
containedSizeMedium: string;
/** Styles applied to the root element if `size="large"` and `variant="contained"`.
* @deprecated Combine the [.MuiButton-sizeLarge](/material-ui/api/button/#button-classes-sizeLarge) and [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
containedSizeLarge: string;
/** Styles applied to the root element if `size="small"`. */
sizeSmall: string;
/** Styles applied to the root element if `size="medium"`. */
sizeMedium: string;
/** Styles applied to the root element if `size="large"`. */
sizeLarge: string;
/** Styles applied to the root element if `fullWidth={true}`. */
fullWidth: string;
/** Styles applied to the icon element if supplied */
icon: string;
/** Styles applied to the startIcon element if supplied. */
startIcon: string;
/** Styles applied to the endIcon element if supplied. */
endIcon: string;
/** Styles applied to the icon element if supplied and `size="small"`.
* @deprecated Combine the [.MuiButton-icon](/material-ui/api/button/#button-classes-icon) and [.MuiButtonSizeSmall](/material-ui/api/button/#button-classes-sizeSmall) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
iconSizeSmall: string;
/** Styles applied to the icon element if supplied and `size="medium"`.
* @deprecated Combine the [.MuiButton-icon](/material-ui/api/button/#button-classes-icon) and [.MuiButtonSizeMedium](/material-ui/api/button/#button-classes-sizeMedium) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
iconSizeMedium: string;
/** Styles applied to the icon element if supplied and `size="large"`.
* @deprecated Combine the [.MuiButton-icon](/material-ui/api/button/#button-classes-icon) and [.MuiButtonSizeLarge](/material-ui/api/button/#button-classes-sizeLarge) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
iconSizeLarge: 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="success"`. */
colorSuccess: string;
/** Styles applied to the root element if `color="error"`. */
colorError: string;
/** Styles applied to the root element if `color="info"`. */
colorInfo: string;
/** Styles applied to the root element if `color="warning"`. */
colorWarning: string;
/** Styles applied to the root element if `loading={true}`. */
loading: string;
/** Styles applied to the loadingWrapper element. */
loadingWrapper: string;
/** Styles applied to the loadingIconPlaceholder element. */
loadingIconPlaceholder: string;
/** Styles applied to the loadingIndicator element. */
loadingIndicator: string;
/** Styles applied to the root element if `loadingPosition="center"`. */
loadingPositionCenter: string;
/** Styles applied to the root element if `loadingPosition="start"`. */
loadingPositionStart: string;
/** Styles applied to the root element if `loadingPosition="end"`. */
loadingPositionEnd: string;
}
export type ButtonClassKey = keyof ButtonClasses;
export declare function getButtonUtilityClass(slot: string): string;
declare const buttonClasses: ButtonClasses;
export default buttonClasses;
+4
View File
@@ -0,0 +1,4 @@
export { default } from "./Button.js";
export * from "./Button.js";
export { default as buttonClasses } from "./buttonClasses.js";
export * from "./buttonClasses.js";
+125
View File
@@ -0,0 +1,125 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { Theme } from "../styles/index.js";
import { TouchRippleActions, TouchRippleProps } from "./TouchRipple.js";
import { OverrideProps, OverridableComponent, OverridableTypeMap } from "../OverridableComponent/index.js";
import { ButtonBaseClasses } from "./buttonBaseClasses.js";
export { TouchRippleActions, TouchRippleProps };
export interface ButtonBaseOwnProps {
/**
* A ref for imperative actions.
* It currently only supports `focusVisible()` action.
*/
action?: React.Ref<ButtonBaseActions>;
/**
* If `true`, the ripples are centered.
* They won't start at the cursor interaction position.
* @default false
*/
centerRipple?: boolean;
/**
* The content of the component.
*/
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<ButtonBaseClasses>;
/**
* If `true`, the component is disabled.
* @default false
*/
disabled?: boolean;
/**
* If `true`, the ripple effect is disabled.
*
* ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
* to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
* @default false
*/
disableRipple?: boolean;
/**
* If `true`, the touch ripple effect is disabled.
* @default false
*/
disableTouchRipple?: boolean;
/**
* If `true`, the base button will have a keyboard focus ripple.
* @default false
*/
focusRipple?: boolean;
/**
* This prop can help identify which element has keyboard focus.
* The class name will be applied when the element gains the focus through keyboard interaction.
* It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
* The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
* A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
* if needed.
*/
focusVisibleClassName?: string;
/**
* The component used to render a link when the `href` prop is provided.
* @default 'a'
*/
LinkComponent?: React.ElementType;
/**
* Callback fired when the component is focused with a keyboard.
* We trigger a `onFocus` callback too.
*/
onFocusVisible?: React.FocusEventHandler<any>;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
/**
* @default 0
*/
tabIndex?: NonNullable<React.HTMLAttributes<any>['tabIndex']>;
/**
* Props applied to the `TouchRipple` element.
*/
TouchRippleProps?: Partial<TouchRippleProps>;
/**
* A ref that points to the `TouchRipple` element.
*/
touchRippleRef?: React.Ref<TouchRippleActions>;
}
export interface ButtonBaseTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'button'> {
props: AdditionalProps & ButtonBaseOwnProps;
defaultComponent: RootComponent;
}
/**
* utility to create component types that inherit props from ButtonBase.
* This component has an additional overload if the `href` prop is set which
* can make extension quite tricky
*/
export interface ExtendButtonBaseTypeMap<TypeMap extends OverridableTypeMap> {
props: TypeMap['props'] & Omit<ButtonBaseTypeMap['props'], 'classes'>;
defaultComponent: TypeMap['defaultComponent'];
}
export type ExtendButtonBase<TypeMap extends OverridableTypeMap> = ((props: {
href: string;
} & OverrideProps<ExtendButtonBaseTypeMap<TypeMap>, 'a'>) => React.JSX.Element) & OverridableComponent<ExtendButtonBaseTypeMap<TypeMap>>;
/**
* `ButtonBase` contains as few styles as possible.
* It aims to be a simple building block for creating a button.
* It contains a load of style reset and some focus/ripple logic.
*
* Demos:
*
* - [Button](https://mui.com/material-ui/react-button/)
*
* API:
*
* - [ButtonBase API](https://mui.com/material-ui/api/button-base/)
*/
declare const ButtonBase: ExtendButtonBase<ButtonBaseTypeMap>;
export type ButtonBaseProps<RootComponent extends React.ElementType = ButtonBaseTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<ButtonBaseTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export interface ButtonBaseActions {
focusVisible(): void;
}
export default ButtonBase;
+22
View File
@@ -0,0 +1,22 @@
import * as React from 'react';
import { InternalStandardProps as StandardProps } from "../index.js";
import { TouchRippleClasses, TouchRippleClassKey } from "./touchRippleClasses.js";
export { TouchRippleClassKey };
export interface StartActionOptions {
pulsate?: boolean;
center?: boolean;
}
export interface TouchRippleActions {
start: (event?: React.SyntheticEvent, options?: StartActionOptions, callback?: () => void) => void;
pulsate: (event?: React.SyntheticEvent) => void;
stop: (event?: React.SyntheticEvent, callback?: () => void) => void;
}
export type TouchRippleProps = StandardProps<React.HTMLAttributes<HTMLElement>> & {
center?: boolean;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<TouchRippleClasses>;
};
declare const TouchRipple: React.ForwardRefRenderFunction<TouchRippleActions, TouchRippleProps>;
export default TouchRipple;
+12
View File
@@ -0,0 +1,12 @@
export interface ButtonBaseClasses {
/** Styles applied to the root element. */
root: string;
/** State class applied to the root element if `disabled={true}`. */
disabled: string;
/** State class applied to the root element if keyboard focused. */
focusVisible: string;
}
export type ButtonBaseClassKey = keyof ButtonBaseClasses;
export declare function getButtonBaseUtilityClass(slot: string): string;
declare const buttonBaseClasses: ButtonBaseClasses;
export default buttonBaseClasses;
+6
View File
@@ -0,0 +1,6 @@
export { default } from "./ButtonBase.js";
export * from "./ButtonBase.js";
export { default as buttonBaseClasses } from "./buttonBaseClasses.js";
export * from "./buttonBaseClasses.js";
export { default as touchRippleClasses } from "./touchRippleClasses.js";
export * from "./touchRippleClasses.js";
+20
View File
@@ -0,0 +1,20 @@
export interface TouchRippleClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the internal `Ripple` components `ripple` class. */
ripple: string;
/** Styles applied to the internal `Ripple` components `rippleVisible` class. */
rippleVisible: string;
/** Styles applied to the internal `Ripple` components `ripplePulsate` class. */
ripplePulsate: string;
/** Styles applied to the internal `Ripple` components `child` class. */
child: string;
/** Styles applied to the internal `Ripple` components `childLeaving` class. */
childLeaving: string;
/** Styles applied to the internal `Ripple` components `childPulsate` class. */
childPulsate: string;
}
export type TouchRippleClassKey = keyof TouchRippleClasses;
export declare function getTouchRippleUtilityClass(slot: string): string;
declare const touchRippleClasses: TouchRippleClasses;
export default touchRippleClasses;
+91
View File
@@ -0,0 +1,91 @@
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 "../index.js";
import { ButtonGroupClasses } from "./buttonGroupClasses.js";
export interface ButtonGroupPropsColorOverrides {}
export interface ButtonGroupPropsVariantOverrides {}
export interface ButtonGroupPropsSizeOverrides {}
export interface ButtonGroupOwnProps {
/**
* The content of the component.
*/
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<ButtonGroupClasses>;
/**
* 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<'inherit' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', ButtonGroupPropsColorOverrides>;
/**
* If `true`, the component is disabled.
* @default false
*/
disabled?: boolean;
/**
* If `true`, no elevation is used.
* @default false
*/
disableElevation?: boolean;
/**
* If `true`, the button keyboard focus ripple is disabled.
* @default false
*/
disableFocusRipple?: boolean;
/**
* If `true`, the button ripple effect is disabled.
* @default false
*/
disableRipple?: boolean;
/**
* If `true`, the buttons will take up the full width of its container.
* @default false
*/
fullWidth?: boolean;
/**
* The component orientation (layout flow direction).
* @default 'horizontal'
*/
orientation?: 'vertical' | 'horizontal';
/**
* The size of the component.
* `small` is equivalent to the dense button styling.
* @default 'medium'
*/
size?: OverridableStringUnion<'small' | 'medium' | 'large', ButtonGroupPropsSizeOverrides>;
/**
* The variant to use.
* @default 'outlined'
*/
variant?: OverridableStringUnion<'text' | 'outlined' | 'contained', ButtonGroupPropsVariantOverrides>;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
}
export interface ButtonGroupTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
props: AdditionalProps & ButtonGroupOwnProps;
defaultComponent: RootComponent;
}
/**
*
* Demos:
*
* - [Button Group](https://mui.com/material-ui/react-button-group/)
*
* API:
*
* - [ButtonGroup API](https://mui.com/material-ui/api/button-group/)
*/
declare const ButtonGroup: OverridableComponent<ButtonGroupTypeMap>;
export type ButtonGroupProps<RootComponent extends React.ElementType = ButtonGroupTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<ButtonGroupTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export default ButtonGroup;
@@ -0,0 +1,6 @@
import * as React from 'react';
/**
* @ignore - internal component.
*/
declare const ButtonGroupButtonContext: React.Context<string | undefined>;
export default ButtonGroupButtonContext;
+18
View File
@@ -0,0 +1,18 @@
import * as React from 'react';
import type { ButtonGroupProps } from "./ButtonGroup.js";
interface ButtonGroupContextType {
className?: string;
color?: ButtonGroupProps['color'];
disabled?: boolean;
disableElevation?: boolean;
disableFocusRipple?: boolean;
disableRipple?: boolean;
fullWidth?: boolean;
size?: ButtonGroupProps['size'];
variant?: ButtonGroupProps['variant'];
}
/**
* @ignore - internal component.
*/
declare const ButtonGroupContext: React.Context<ButtonGroupContextType>;
export default ButtonGroupContext;
+104
View File
@@ -0,0 +1,104 @@
export interface ButtonGroupClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the root element if `variant="contained"`. */
contained: string;
/** Styles applied to the root element if `variant="outlined"`. */
outlined: string;
/** Styles applied to the root element if `variant="text"`. */
text: string;
/** Styles applied to the root element if `disableElevation={true}`. */
disableElevation: string;
/** State class applied to the child elements if `disabled={true}`. */
disabled: string;
/** Styles applied to the first button in the button group. */
firstButton: string;
/** Styles applied to the root element if `fullWidth={true}`. */
fullWidth: 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 children. */
grouped: 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 children if `orientation="horizontal"`.
* @deprecated Combine the [.MuiButtonGroup-horizontal](/material-ui/api/button-group/#button-group-classes-horizontal) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
groupedHorizontal: string;
/** Styles applied to the children if `orientation="vertical"`.
* @deprecated Combine the [.MuiButtonGroup-vertical](/material-ui/api/button-group/#button-group-classes-vertical) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
groupedVertical: string;
/** Styles applied to the children if `variant="text"`.
* @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
groupedText: string;
/** Styles applied to the children if `variant="text"` and `orientation="horizontal"`.
* @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) , [.MuiButtonGroup-horizontal](/material-ui/api/button-group/#button-group-classes-horizontal) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
groupedTextHorizontal: string;
/** Styles applied to the children if `variant="text"` and `orientation="vertical"`.
* @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) , [.MuiButtonGroup-vertical](/material-ui/api/button-group/#button-group-classes-vertical) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
groupedTextVertical: string;
/** Styles applied to the children if `variant="text"` and `color="primary"`.
* @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) , [.MuiButtonGroup-colorPrimary](/material-ui/api/button-group/#button-group-classes-colorPrimary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
groupedTextPrimary: string;
/** Styles applied to the children if `variant="text"` and `color="secondary"`.
* @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) , [.MuiButtonGroup-colorSecondary](/material-ui/api/button-group/#button-group-classes-colorSecondary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
groupedTextSecondary: string;
/** Styles applied to the children if `variant="outlined"`.
* @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
groupedOutlined: string;
/** Styles applied to the children if `variant="outlined"` and `orientation="horizontal"`.
* @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) , [.MuiButtonGroup-horizontal](/material-ui/api/button-group/#button-group-classes-horizontal) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
groupedOutlinedHorizontal: string;
/** Styles applied to the children if `variant="outlined"` and `orientation="vertical"`.
* @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) , [.MuiButtonGroup-vertical](/material-ui/api/button-group/#button-group-classes-vertical) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
groupedOutlinedVertical: string;
/** Styles applied to the children if `variant="outlined"` and `color="primary"`.
* @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) , [.MuiButtonGroup-colorPrimary](/material-ui/api/button-group/#button-group-classes-colorPrimary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
groupedOutlinedPrimary: string;
/** Styles applied to the children if `variant="outlined"` and `color="secondary"`.
* @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) , [.MuiButtonGroup-colorSecondary](/material-ui/api/button-group/#button-group-classes-colorSecondary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
groupedOutlinedSecondary: string;
/** Styles applied to the children if `variant="contained"`.
* @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
groupedContained: string;
/** Styles applied to the children if `variant="contained"` and `orientation="horizontal"`.
* @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) , [.MuiButtonGroup-horizontal](/material-ui/api/button-group/#button-group-classes-horizontal) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
groupedContainedHorizontal: string;
/** Styles applied to the children if `variant="contained"` and `orientation="vertical"`.
* @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) , [.MuiButtonGroup-vertical](/material-ui/api/button-group/#button-group-classes-vertical) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
groupedContainedVertical: string;
/** Styles applied to the children if `variant="contained"` and `color="primary"`.
* @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) , [.MuiButtonGroup-colorPrimary](/material-ui/api/button-group/#button-group-classes-colorPrimary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
groupedContainedPrimary: string;
/** Styles applied to the children if `variant="contained"` and `color="secondary"`.
* @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) , [.MuiButtonGroup-colorSecondary](/material-ui/api/button-group/#button-group-classes-colorSecondary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
groupedContainedSecondary: string;
/** Styles applied to the last button in the button group. */
lastButton: string;
/** Styles applied to buttons in the middle of the button group. */
middleButton: string;
}
export type ButtonGroupClassKey = keyof ButtonGroupClasses;
export declare function getButtonGroupUtilityClass(slot: string): string;
declare const buttonGroupClasses: ButtonGroupClasses;
export default buttonGroupClasses;
+6
View File
@@ -0,0 +1,6 @@
export { default } from "./ButtonGroup.js";
export * from "./ButtonGroup.js";
export { default as buttonGroupClasses } from "./buttonGroupClasses.js";
export * from "./buttonGroupClasses.js";
export { default as ButtonGroupContext } from "./ButtonGroupContext.js";
export { default as ButtonGroupButtonContext } from "./ButtonGroupButtonContext.js";
+47
View File
@@ -0,0 +1,47 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { DistributiveOmit } from '@mui/types';
import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
import { Theme } from "../index.js";
import { PaperOwnProps } from "../Paper/index.js";
import { CardClasses } from "./cardClasses.js";
// TODO: v6 remove this interface, it is not used
export interface CardPropsColorOverrides {}
export interface CardOwnProps extends DistributiveOmit<PaperOwnProps, 'classes'> {
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<CardClasses>;
/**
* If `true`, the card will use raised styling.
* @default false
*/
raised?: boolean;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
}
export interface CardTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
props: AdditionalProps & CardOwnProps;
defaultComponent: RootComponent;
}
/**
*
* Demos:
*
* - [Card](https://mui.com/material-ui/react-card/)
*
* API:
*
* - [Card API](https://mui.com/material-ui/api/card/)
* - inherits [Paper API](https://mui.com/material-ui/api/paper/)
*/
declare const Card: OverridableComponent<CardTypeMap>;
export type CardProps<RootComponent extends React.ElementType = CardTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<CardTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export default Card;
+8
View File
@@ -0,0 +1,8 @@
export interface CardClasses {
/** Styles applied to the root element. */
root: string;
}
export type CardClassKey = keyof CardClasses;
export declare function getCardUtilityClass(slot: string): string;
declare const cardClasses: CardClasses;
export default cardClasses;
+4
View File
@@ -0,0 +1,4 @@
export { default } from "./Card.js";
export * from "./Card.js";
export { default as cardClasses } from "./cardClasses.js";
export * from "./cardClasses.js";
+38
View File
@@ -0,0 +1,38 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { Theme } from "../index.js";
import { ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from "../ButtonBase/index.js";
import { OverrideProps } from "../OverridableComponent/index.js";
import { CardActionAreaClasses } from "./cardActionAreaClasses.js";
export interface CardActionAreaOwnProps {
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<CardActionAreaClasses>;
focusVisibleClassName?: string;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
}
export type CardActionAreaTypeMap<AdditionalProps, RootComponent extends React.ElementType> = ExtendButtonBaseTypeMap<{
props: AdditionalProps & CardActionAreaOwnProps;
defaultComponent: RootComponent;
}>;
/**
*
* Demos:
*
* - [Card](https://mui.com/material-ui/react-card/)
*
* API:
*
* - [CardActionArea API](https://mui.com/material-ui/api/card-action-area/)
* - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
*/
declare const CardActionArea: ExtendButtonBase<CardActionAreaTypeMap<{}, ButtonBaseTypeMap['defaultComponent']>>;
export type CardActionAreaProps<RootComponent extends React.ElementType = ButtonBaseTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<CardActionAreaTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export default CardActionArea;
@@ -0,0 +1,12 @@
export interface CardActionAreaClasses {
/** Styles applied to the root element. */
root: string;
/** State class applied to the ButtonBase root element if the action area is keyboard focused. */
focusVisible: string;
/** Styles applied to the overlay that covers the action area when it is keyboard focused. */
focusHighlight: string;
}
export type CardActionAreaClassKey = keyof CardActionAreaClasses;
export declare function getCardActionAreaUtilityClass(slot: string): string;
declare const cardActionAreaClasses: CardActionAreaClasses;
export default cardActionAreaClasses;
+4
View File
@@ -0,0 +1,4 @@
export { default } from "./CardActionArea.js";
export * from "./CardActionArea.js";
export { default as cardActionAreaClasses } from "./cardActionAreaClasses.js";
export * from "./cardActionAreaClasses.js";
+35
View File
@@ -0,0 +1,35 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { InternalStandardProps as StandardProps, Theme } from "../index.js";
import { CardActionsClasses } from "./cardActionsClasses.js";
export interface CardActionsProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
/**
* The content of the component.
*/
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<CardActionsClasses>;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
/**
* If `true`, the actions do not have additional margin.
* @default false
*/
disableSpacing?: boolean;
}
/**
*
* Demos:
*
* - [Card](https://mui.com/material-ui/react-card/)
*
* API:
*
* - [CardActions API](https://mui.com/material-ui/api/card-actions/)
*/
export default function CardActions(props: CardActionsProps): React.JSX.Element;
+10
View File
@@ -0,0 +1,10 @@
export interface CardActionsClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the root element unless `disableSpacing={true}`. */
spacing: string;
}
export type CardActionsClassKey = keyof CardActionsClasses;
export declare function getCardActionsUtilityClass(slot: string): string;
declare const cardActionsClasses: CardActionsClasses;
export default cardActionsClasses;
+4
View File
@@ -0,0 +1,4 @@
export { default } from "./CardActions.js";
export * from "./CardActions.js";
export { default as cardActionsClasses } from "./cardActionsClasses.js";
export * from "./cardActionsClasses.js";
+38
View File
@@ -0,0 +1,38 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
import { Theme } from "../index.js";
import { CardContentClasses } from "./cardContentClasses.js";
export interface CardContentOwnProps {
/**
* The content of the component.
*/
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<CardContentClasses>;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
}
export interface CardContentTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
props: AdditionalProps & CardContentOwnProps;
defaultComponent: RootComponent;
}
/**
*
* Demos:
*
* - [Card](https://mui.com/material-ui/react-card/)
*
* API:
*
* - [CardContent API](https://mui.com/material-ui/api/card-content/)
*/
declare const CardContent: OverridableComponent<CardContentTypeMap>;
export type CardContentProps<RootComponent extends React.ElementType = CardContentTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<CardContentTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export default CardContent;
@@ -0,0 +1,8 @@
export interface CardContentClasses {
/** Styles applied to the root element. */
root: string;
}
export type CardContentClassKey = keyof CardContentClasses;
export declare function getCardContentUtilityClass(slot: string): string;
declare const cardContentClasses: CardContentClasses;
export default cardContentClasses;
+4
View File
@@ -0,0 +1,4 @@
export { default } from "./CardContent.js";
export * from "./CardContent.js";
export { default as cardContentClasses } from "./cardContentClasses.js";
export * from "./cardContentClasses.js";
+157
View File
@@ -0,0 +1,157 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { TypographyProps } from "../Typography/index.js";
import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
import { Theme } from "../index.js";
import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
import { CardHeaderClasses } from "./cardHeaderClasses.js";
export interface CardHeaderRootSlotPropsOverrides {}
export interface CardHeaderAvatarSlotPropsOverrides {}
export interface CardHeaderActionSlotPropsOverrides {}
export interface CardHeaderContentSlotPropsOverrides {}
export interface CardHeaderTitleSlotPropsOverrides {}
export interface CardHeaderSubheaderSlotPropsOverrides {}
export interface CardHeaderSlots {
/**
* The component that renders the root slot.
* @default 'div'
*/
root: React.ElementType;
/**
* The component that renders the avatar slot.
* @default 'div'
*/
avatar: React.ElementType;
/**
* The component that renders the action slot.
* @default 'div'
*/
action: React.ElementType;
/**
* The component that renders the content slot.
* @default 'div'
*/
content: React.ElementType;
/**
* The component that renders the title slot (as long as disableTypography is not `true`).
* [Follow this guide](https://mui.com/material-ui/api/typography/#props) to learn more about the requirements for this component.
* @default Typography
*/
title: React.ElementType;
/**
* The component that renders the subheader slot (as long as disableTypography is not `true`).
* [Follow this guide](https://mui.com/material-ui/api/typography/#props) to learn more about the requirements for this component.
* @default Typography
*/
subheader: React.ElementType;
}
export type CardHeaderSlotsAndSlotProps = CreateSlotsAndSlotProps<CardHeaderSlots, {
/**
* Props forwarded to the root slot.
* By default, the avaible props are based on the div element.
*/
root: SlotProps<'div', CardHeaderRootSlotPropsOverrides, CardHeaderOwnerState>;
/**
* Props forwarded to the avatar slot.
* By default, the avaible props are based on the div element.
*/
avatar: SlotProps<'div', CardHeaderAvatarSlotPropsOverrides, CardHeaderOwnerState>;
/**
* Props forwarded to the action slot.
* By default, the avaible props are based on the div element.
*/
action: SlotProps<'div', CardHeaderActionSlotPropsOverrides, CardHeaderOwnerState>;
/**
* Props forwarded to the content slot.
* By default, the avaible props are based on the div element.
*/
content: SlotProps<'div', CardHeaderContentSlotPropsOverrides, CardHeaderOwnerState>;
/**
* Props forwarded to the title slot (as long as disableTypography is not `true`).
* By default, the avaible props are based on the [Typography](https://mui.com/material-ui/api/typography/#props) component.
*/
title: SlotProps<React.ElementType<TypographyProps>, CardHeaderTitleSlotPropsOverrides, CardHeaderOwnerState>;
/**
* Props forwarded to the subheader slot (as long as disableTypography is not `true`).
* By default, the avaible props are based on the [Typography](https://mui.com/material-ui/api/typography/#props) component.
*/
subheader: SlotProps<React.ElementType<TypographyProps>, CardHeaderSubheaderSlotPropsOverrides, CardHeaderOwnerState>;
}>;
export interface CardHeaderOwnProps<TitleTypographyComponent extends React.ElementType = 'span', SubheaderTypographyComponent extends React.ElementType = 'span'> {
/**
* The action to display in the card header.
*/
action?: React.ReactNode;
/**
* The Avatar element to display.
*/
avatar?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<CardHeaderClasses>;
/**
* If `true`, `subheader` and `title` won't be wrapped by a Typography component.
* This can be useful to render an alternative Typography variant by wrapping
* the `title` text, and optional `subheader` text
* with the Typography component.
* @default false
*/
disableTypography?: boolean;
/**
* The content of the component.
*/
subheader?: React.ReactNode;
/**
* These props will be forwarded to the subheader
* (as long as disableTypography is not `true`).
* @deprecated Use `slotProps.subheader` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
subheaderTypographyProps?: TypographyProps<SubheaderTypographyComponent, {
component?: SubheaderTypographyComponent;
}>;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
/**
* The content of the component.
*/
title?: React.ReactNode;
/**
* These props will be forwarded to the title
* (as long as disableTypography is not `true`).
* @deprecated Use `slotProps.title` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
titleTypographyProps?: TypographyProps<TitleTypographyComponent, {
component?: TitleTypographyComponent;
}>;
}
export interface CardHeaderOwnerState extends CardHeaderOwnProps {}
export interface CardHeaderTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div', TitleTypographyComponent extends React.ElementType = 'span', SubheaderTypographyComponent extends React.ElementType = 'span'> {
props: AdditionalProps & CardHeaderOwnProps<TitleTypographyComponent, SubheaderTypographyComponent> & CardHeaderSlotsAndSlotProps;
defaultComponent: RootComponent;
}
/**
*
* Demos:
*
* - [Card](https://mui.com/material-ui/react-card/)
*
* API:
*
* - [CardHeader API](https://mui.com/material-ui/api/card-header/)
*/
declare const CardHeader: OverridableCardHeader;
export interface OverridableCardHeader extends OverridableComponent<CardHeaderTypeMap> {
<RootComponent extends React.ElementType = CardHeaderTypeMap['defaultComponent'], AdditionalProps = {}, TitleTypographyComponent extends React.ElementType = 'span', SubheaderTypographyComponent extends React.ElementType = 'span'>(props: CardHeaderPropsWithComponent<RootComponent, AdditionalProps, TitleTypographyComponent, SubheaderTypographyComponent>): React.JSX.Element;
}
export type CardHeaderProps<RootComponent extends React.ElementType = CardHeaderTypeMap['defaultComponent'], AdditionalProps = {}, TitleTypographyComponent extends React.ElementType = 'span', SubheaderTypographyComponent extends React.ElementType = 'span'> = OverrideProps<CardHeaderTypeMap<AdditionalProps, RootComponent, TitleTypographyComponent, SubheaderTypographyComponent>, RootComponent>;
export type CardHeaderPropsWithComponent<RootComponent extends React.ElementType = CardHeaderTypeMap['defaultComponent'], AdditionalProps = {}, TitleTypographyComponent extends React.ElementType = 'span', SubheaderTypographyComponent extends React.ElementType = 'span'> = {
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component?: RootComponent;
} & CardHeaderProps<RootComponent, AdditionalProps, TitleTypographyComponent, SubheaderTypographyComponent>;
export default CardHeader;
+18
View File
@@ -0,0 +1,18 @@
export interface CardHeaderClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the avatar element. */
avatar: string;
/** Styles applied to the action element. */
action: string;
/** Styles applied to the content wrapper element. */
content: string;
/** Styles applied to the title Typography element. */
title: string;
/** Styles applied to the subheader Typography element. */
subheader: string;
}
export type CardHeaderClassKey = keyof CardHeaderClasses;
export declare function getCardHeaderUtilityClass(slot: string): string;
declare const cardHeaderClasses: CardHeaderClasses;
export default cardHeaderClasses;
+4
View File
@@ -0,0 +1,4 @@
export { default } from "./CardHeader.js";
export * from "./CardHeader.js";
export { default as cardHeaderClasses } from "./cardHeaderClasses.js";
export * from "./cardHeaderClasses.js";
+51
View File
@@ -0,0 +1,51 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { Theme } from "../index.js";
import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
import { CardMediaClasses } from "./cardMediaClasses.js";
export interface CardMediaOwnProps {
/**
* The content of the component.
*/
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<CardMediaClasses>;
/**
* Image to be displayed as a background image.
* Either `image` or `src` prop must be specified.
* Note that caller must specify height otherwise the image will not be visible.
*/
image?: string;
/**
* An alias for `image` property.
* Available only with media components.
* Media components: `video`, `audio`, `picture`, `iframe`, `img`.
*/
src?: string;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
}
export interface CardMediaTypeMap<AdditionalProps, RootComponent extends React.ElementType> {
props: AdditionalProps & CardMediaOwnProps;
defaultComponent: RootComponent;
}
/**
*
* Demos:
*
* - [Card](https://mui.com/material-ui/react-card/)
*
* API:
*
* - [CardMedia API](https://mui.com/material-ui/api/card-media/)
*/
declare const CardMedia: OverridableComponent<CardMediaTypeMap<{}, 'div'>>;
export type CardMediaProps<RootComponent extends React.ElementType = 'div', AdditionalProps = {}> = OverrideProps<CardMediaTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export default CardMedia;
+12
View File
@@ -0,0 +1,12 @@
export interface CardMediaClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the root element if `component="video, audio, picture, iframe, or img"`. */
media: string;
/** Styles applied to the root element if `component="picture or img"`. */
img: string;
}
export type CardMediaClassKey = keyof CardMediaClasses;
export declare function getCardMediaUtilityClass(slot: string): string;
declare const cardMediaClasses: CardMediaClasses;
export default cardMediaClasses;
+4
View File
@@ -0,0 +1,4 @@
export { default } from "./CardMedia.js";
export * from "./CardMedia.js";
export { default as cardMediaClasses } from "./cardMediaClasses.js";
export * from "./cardMediaClasses.js";
+131
View File
@@ -0,0 +1,131 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { OverridableStringUnion } from '@mui/types';
import { InternalStandardProps as StandardProps, Theme } from "../index.js";
import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
import { SwitchBaseProps } from "../internal/SwitchBase.js";
import { CheckboxClasses } from "./checkboxClasses.js";
export interface CheckboxPropsSizeOverrides {}
export interface CheckboxPropsColorOverrides {}
export interface CheckboxRootSlotPropsOverrides {}
export interface CheckboxInputSlotPropsOverrides {}
export interface CheckboxSlots {
/**
* The component that renders the root slot.
* @default SwitchBase
*/
root: React.ElementType;
/**
* The component that renders the input slot.
* @default SwitchBase's input
*/
input: React.ElementType;
}
export type CheckboxSlotsAndSlotProps = CreateSlotsAndSlotProps<CheckboxSlots, {
/**
* Props forwarded to the root slot.
* By default, the avaible props are based on the div element.
*/
root: SlotProps<React.ElementType<SwitchBaseProps>, CheckboxRootSlotPropsOverrides, CheckboxOwnerState>;
/**
* Props forwarded to the input slot.
* By default, the avaible props are based on the input element.
*/
input: SlotProps<'input', CheckboxInputSlotPropsOverrides, CheckboxOwnerState>;
}>;
export interface CheckboxProps extends StandardProps<SwitchBaseProps, 'checkedIcon' | 'color' | 'icon' | 'type' | 'slots' | 'slotProps'>, CheckboxSlotsAndSlotProps {
/**
* If `true`, the component is checked.
*/
checked?: SwitchBaseProps['checked'];
/**
* The icon to display when the component is checked.
* @default <CheckBoxIcon />
*/
checkedIcon?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<CheckboxClasses>;
/**
* 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', CheckboxPropsColorOverrides>;
/**
* If `true`, the component is disabled.
* @default false
*/
disabled?: SwitchBaseProps['disabled'];
/**
* If `true`, the ripple effect is disabled.
* @default false
*/
disableRipple?: SwitchBaseProps['disableRipple'];
/**
* The icon to display when the component is unchecked.
* @default <CheckBoxOutlineBlankIcon />
*/
icon?: React.ReactNode;
/**
* The id of the `input` element.
*/
id?: SwitchBaseProps['id'];
/**
* If `true`, the component appears indeterminate.
* This does not set the native input element to indeterminate due
* to inconsistent behavior across browsers.
* However, we set a `data-indeterminate` attribute on the `input`.
* @default false
*/
indeterminate?: boolean;
/**
* The icon to display when the component is indeterminate.
* @default <IndeterminateCheckBoxIcon />
*/
indeterminateIcon?: React.ReactNode;
/**
* Callback fired when the state is changed.
*
* @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
* You can pull out the new checked state by accessing `event.target.checked` (boolean).
*/
onChange?: SwitchBaseProps['onChange'];
/**
* If `true`, the `input` element is required.
* @default false
*/
required?: SwitchBaseProps['required'];
/**
* The size of the component.
* `small` is equivalent to the dense checkbox styling.
* @default 'medium'
*/
size?: OverridableStringUnion<'small' | 'medium' | 'large', CheckboxPropsSizeOverrides>;
/**
* 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?: SwitchBaseProps['value'];
}
export interface CheckboxOwnerState extends Omit<CheckboxProps, 'slots' | 'slotProps'> {}
/**
*
* Demos:
*
* - [Checkbox](https://mui.com/material-ui/react-checkbox/)
* - [Transfer List](https://mui.com/material-ui/react-transfer-list/)
*
* API:
*
* - [Checkbox API](https://mui.com/material-ui/api/checkbox/)
* - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
*/
export default function Checkbox(props: CheckboxProps): React.JSX.Element;
+22
View File
@@ -0,0 +1,22 @@
export interface CheckboxClasses {
/** Class name applied to the root element. */
root: string;
/** State class applied to the root element if `checked={true}`. */
checked: string;
/** State class applied to the root element if `disabled={true}`. */
disabled: string;
/** State class applied to the root element if `indeterminate={true}`. */
indeterminate: string;
/** State class applied to the root element if `color="primary"`. */
colorPrimary: string;
/** State class applied to the root element if `color="secondary"`. */
colorSecondary: string;
/** State class applied to the root element if `size="small"`. */
sizeSmall: string;
/** State class applied to the root element if `size="medium"`. */
sizeMedium: string;
}
export type CheckboxClassKey = keyof CheckboxClasses;
export declare function getCheckboxUtilityClass(slot: string): string;
declare const checkboxClasses: CheckboxClasses;
export default checkboxClasses;
+4
View File
@@ -0,0 +1,4 @@
export { default } from "./Checkbox.js";
export * from "./Checkbox.js";
export { default as checkboxClasses } from "./checkboxClasses.js";
export * from "./checkboxClasses.js";
+107
View File
@@ -0,0 +1,107 @@
import * as React from 'react';
import { OverridableStringUnion } from '@mui/types';
import { SxProps } from '@mui/system';
import { Theme } from "../index.js";
import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
import { ChipClasses } from "./chipClasses.js";
export interface ChipPropsVariantOverrides {}
export interface ChipPropsSizeOverrides {}
export interface ChipPropsColorOverrides {}
export interface ChipOwnProps {
/**
* The Avatar element to display.
*/
avatar?: React.ReactElement<unknown>;
/**
* 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<ChipClasses>;
/**
* If `true`, the chip will appear clickable, and will raise when pressed,
* even if the onClick prop is not defined.
* If `false`, the chip will not appear clickable, even if onClick prop is defined.
* This can be used, for example,
* along with the component prop to indicate an anchor Chip is clickable.
* Note: this controls the UI and does not affect the onClick event.
*/
clickable?: boolean;
/**
* 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<'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', ChipPropsColorOverrides>;
/**
* Override the default delete icon element. Shown only if `onDelete` is set.
*/
deleteIcon?: React.ReactElement<unknown>;
/**
* If `true`, the component is disabled.
* @default false
*/
disabled?: boolean;
/**
* Icon element.
*/
icon?: React.ReactElement<unknown>;
/**
* The content of the component.
*/
label?: React.ReactNode;
/**
* Callback fired when the delete icon is clicked.
* If set, the delete icon will be shown.
*/
onDelete?: React.EventHandler<any>;
/**
* The size of the component.
* @default 'medium'
*/
size?: OverridableStringUnion<'small' | 'medium', ChipPropsSizeOverrides>;
/**
* If `true`, allows the disabled chip to escape focus.
* If `false`, allows the disabled chip to receive focus.
* @default false
*/
skipFocusWhenDisabled?: boolean;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
/**
* @ignore
*/
tabIndex?: number;
/**
* The variant to use.
* @default 'filled'
*/
variant?: OverridableStringUnion<'filled' | 'outlined', ChipPropsVariantOverrides>;
}
export interface ChipTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
props: AdditionalProps & ChipOwnProps;
defaultComponent: RootComponent;
}
/**
* Chips represent complex entities in small blocks, such as a contact.
*
* Demos:
*
* - [Chip](https://mui.com/material-ui/react-chip/)
*
* API:
*
* - [Chip API](https://mui.com/material-ui/api/chip/)
*/
declare const Chip: OverridableComponent<ChipTypeMap>;
export type ChipProps<RootComponent extends React.ElementType = ChipTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<ChipTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export default Chip;
+150
View File
@@ -0,0 +1,150 @@
export interface ChipClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the root element if `size="small"`. */
sizeSmall: string;
/** Styles applied to the root element if `size="medium"`. */
sizeMedium: string;
/** Styles applied to the root element if `color="default"`. */
colorDefault: string;
/** Styles applied to the root element if `color="error"`. */
colorError: string;
/** Styles applied to the root element if `color="info"`. */
colorInfo: 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="success"`. */
colorSuccess: string;
/** Styles applied to the root element if `color="warning"`. */
colorWarning: string;
/** State class applied to the root element if `disabled={true}`. */
disabled: string;
/** Styles applied to the root element if `onClick` is defined or `clickable={true}`. */
clickable: string;
/** Styles applied to the root element if `onClick` and `color="primary"` is defined or `clickable={true}`.
* @deprecated Combine the [.MuiChip-clickable](/material-ui/api/chip/#chip-classes-clickable) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
clickableColorPrimary: string;
/** Styles applied to the root element if `onClick` and `color="secondary"` is defined or `clickable={true}`.
* @deprecated Combine the [.MuiChip-clickable](/material-ui/api/chip/#chip-classes-clickable) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
clickableColorSecondary: string;
/** Styles applied to the root element if `onDelete` is defined. */
deletable: string;
/** Styles applied to the root element if `onDelete` and `color="primary"` is defined.
* @deprecated Combine the [.MuiChip-deletable](/material-ui/api/chip/#chip-classes-deletable) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
deletableColorPrimary: string;
/** Styles applied to the root element if `onDelete` and `color="secondary"` is defined.
* @deprecated Combine the [.MuiChip-deletable](/material-ui/api/chip/#chip-classes-deletable) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
deletableColorSecondary: string;
/** Styles applied to the root element if `variant="outlined"`. */
outlined: string;
/** Styles applied to the root element if `variant="filled"`. */
filled: string;
/** Styles applied to the root element if `variant="outlined"` and `color="primary"`.
* @deprecated Combine the [.MuiChip-outlined](/material-ui/api/chip/#chip-classes-outlined) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
outlinedPrimary: string;
/** Styles applied to the root element if `variant="outlined"` and `color="secondary"`.
* @deprecated Combine the [.MuiChip-outlined](/material-ui/api/chip/#chip-classes-outlined) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
outlinedSecondary: string;
/** Styles applied to the root element if `variant="filled"` and `color="primary"`.
* @deprecated Combine the [.MuiChip-filled](/material-ui/api/chip/#chip-classes-filled) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
filledPrimary: string;
/** Styles applied to the root element if `variant="filled"` and `color="secondary"`.
* @deprecated Combine the [.MuiChip-filled](/material-ui/api/chip/#chip-classes-filled) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
filledSecondary: string;
/** Styles applied to the avatar element. */
avatar: string;
/** Styles applied to the avatar element if `size="small"`.
* @deprecated Combine the [.MuiChip-avatar](/material-ui/api/chip/#chip-classes-avatar) and [.MuiChip-sizeSmall](/material-ui/api/chip/#chip-classes-sizeSmall) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
avatarSmall: string;
/** Styles applied to the avatar element if `size="medium"`.
* @deprecated Combine the [.MuiChip-avatar](/material-ui/api/chip/#chip-classes-avatar) and [.MuiChip-sizeMedium](/material-ui/api/chip/#chip-classes-sizeMedium) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
avatarMedium: string;
/** Styles applied to the avatar element if `color="primary"`.
* @deprecated Combine the [.MuiChip-avatar](/material-ui/api/chip/#chip-classes-avatar) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
avatarColorPrimary: string;
/** Styles applied to the avatar element if `color="secondary"`.
* @deprecated Combine the [.MuiChip-avatar](/material-ui/api/chip/#chip-classes-avatar) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
avatarColorSecondary: string;
/** Styles applied to the icon element. */
icon: string;
/** Styles applied to the icon element if `size="small"`.
* @deprecated Combine the [.MuiChip-icon](/material-ui/api/chip/#chip-classes-icon) and [.MuiChip-sizeSmall](/material-ui/api/chip/#chip-classes-sizeSmall) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
iconSmall: string;
/** Styles applied to the icon element if `size="medium"`.
* @deprecated Combine the [.MuiChip-icon](/material-ui/api/chip/#chip-classes-icon) and [.MuiChip-sizeMedium](/material-ui/api/chip/#chip-classes-sizeMedium) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
iconMedium: string;
/** Styles applied to the icon element if `color="primary"`.
* @deprecated Combine the [.MuiChip-icon](/material-ui/api/chip/#chip-classes-icon) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
iconColorPrimary: string;
/** Styles applied to the icon element if `color="secondary"`.
* @deprecated Combine the [.MuiChip-icon](/material-ui/api/chip/#chip-classes-icon) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
iconColorSecondary: string;
/** Styles applied to the label `span` element. */
label: string;
/** Styles applied to the label `span` element if `size="small"`.
* @deprecated Combine the [.MuiChip-label](/material-ui/api/chip/#chip-classes-label) and [.MuiChip-sizeSmall](/material-ui/api/chip/#chip-classes-sizeSmall) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
labelSmall: string;
/** Styles applied to the label `span` element if `size="medium"`.
* @deprecated Combine the [.MuiChip-label](/material-ui/api/chip/#chip-classes-label) and [.MuiChip-sizeMedium](/material-ui/api/chip/#chip-classes-sizeMedium) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
labelMedium: string;
/** Styles applied to the deleteIcon element. */
deleteIcon: string;
/** Styles applied to the deleteIcon element if `size="small"`.
* @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) and [.MuiChip-sizeSmall](/material-ui/api/chip/#chip-classes-sizeSmall) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
deleteIconSmall: string;
/** Styles applied to the deleteIcon element if `size="medium"`.
* @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) and [.MuiChip-sizeMedium](/material-ui/api/chip/#chip-classes-sizeMedium) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
deleteIconMedium: string;
/** Styles applied to the deleteIcon element if `color="primary"`.
* @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
deleteIconColorPrimary: string;
/** Styles applied to the deleteIcon element if `color="secondary"`.
* @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
deleteIconColorSecondary: string;
/** Styles applied to the deleteIcon element if `color="primary"` and `variant="outlined"`.
* @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) , [.MuiChip-outlined](/material-ui/api/chip/#chip-classes-outlined) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
deleteIconOutlinedColorPrimary: string;
/** Styles applied to the deleteIcon element if `color="secondary"` and `variant="outlined"`.
* @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) , [.MuiChip-outlined](/material-ui/api/chip/#chip-classes-outlined) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
deleteIconOutlinedColorSecondary: string;
/** Styles applied to the deleteIcon element if `color="primary"` and `variant="filled"`.
* @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) , [.MuiChip-filled](/material-ui/api/chip/#chip-classes-filled) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
deleteIconFilledColorPrimary: string;
/** Styles applied to the deleteIcon element if `color="secondary"` and `variant="filled"`.
* @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) , [.MuiChip-filled](/material-ui/api/chip/#chip-classes-filled) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
deleteIconFilledColorSecondary: string;
/** State class applied to the root element if keyboard focused. */
focusVisible: string;
}
export type ChipClassKey = keyof ChipClasses;
export declare function getChipUtilityClass(slot: string): string;
declare const chipClasses: ChipClasses;
export default chipClasses;
+4
View File
@@ -0,0 +1,4 @@
export { default } from "./Chip.js";
export * from "./Chip.js";
export { default as chipClasses } from "./chipClasses.js";
export * from "./chipClasses.js";
@@ -0,0 +1,71 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { OverridableStringUnion } from '@mui/types';
import { InternalStandardProps as StandardProps, Theme } from "../index.js";
import { CircularProgressClasses } from "./circularProgressClasses.js";
export interface CircularProgressPropsColorOverrides {}
export interface CircularProgressPropsVariantOverrides {}
export interface CircularProgressProps extends StandardProps<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<CircularProgressClasses>;
/**
* 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' | 'inherit', CircularProgressPropsColorOverrides>;
/**
* If `true`, the shrink animation is disabled.
* This only works if variant is `indeterminate`.
* @default false
*/
disableShrink?: boolean;
/**
* The size of the component.
* If using a number, the pixel unit is assumed.
* If using a string, you need to provide the CSS unit, for example '3rem'.
* @default 40
*/
size?: number | string;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
/**
* The thickness of the circle.
* @default 3.6
*/
thickness?: number;
/**
* The value of the progress indicator for the determinate variant.
* Value between 0 and 100.
* @default 0
*/
value?: number;
/**
* The variant to use.
* Use indeterminate when there is no progress value.
* @default 'indeterminate'
*/
variant?: OverridableStringUnion<'determinate' | 'indeterminate', CircularProgressPropsVariantOverrides>;
}
/**
* ## ARIA
*
* If the progress bar is describing the loading progress of a particular region of a page,
* you should use `aria-describedby` to point to the progress bar, and set the `aria-busy`
* attribute to `true` on that region until it has finished loading.
*
* Demos:
*
* - [Progress](https://mui.com/material-ui/react-progress/)
*
* API:
*
* - [CircularProgress API](https://mui.com/material-ui/api/circular-progress/)
*/
export default function CircularProgress(props: CircularProgressProps): React.JSX.Element;
@@ -0,0 +1,30 @@
export interface CircularProgressClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the root element if `variant="determinate"`. */
determinate: string;
/** Styles applied to the root element if `variant="indeterminate"`. */
indeterminate: 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 svg element. */
svg: string;
/** Styles applied to the `circle` svg path. */
circle: string;
/** Styles applied to the `circle` svg path if `variant="determinate"`.
* @deprecated Combine the [.MuiCircularProgress-circle](/material-ui/api/circular-progress/#circular-progress-classes-circle) and [.MuiCircularProgress-determinate](/material-ui/api/circular-progress/#circular-progress-classes-determinate) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
circleDeterminate: string;
/** Styles applied to the `circle` svg path if `variant="indeterminate"`.
* @deprecated Combine the [.MuiCircularProgress-circle](/material-ui/api/circular-progress/#circular-progress-classes-circle) and [.MuiCircularProgress-indeterminate](/material-ui/api/circular-progress/#circular-progress-classes-indeterminate) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
circleIndeterminate: string;
/** Styles applied to the `circle` svg path if `disableShrink={true}`. */
circleDisableShrink: string;
}
export type CircularProgressClassKey = keyof CircularProgressClasses;
export declare function getCircularProgressUtilityClass(slot: string): string;
declare const circularProgressClasses: CircularProgressClasses;
export default circularProgressClasses;
+4
View File
@@ -0,0 +1,4 @@
export { default } from "./CircularProgress.js";
export * from "./CircularProgress.js";
export { default as circularProgressClasses } from "./circularProgressClasses.js";
export * from "./circularProgressClasses.js";
@@ -0,0 +1,47 @@
import * as React from 'react';
type ClickAwayMouseEventHandler = 'onClick' | 'onMouseDown' | 'onMouseUp' | 'onPointerDown' | 'onPointerUp';
type ClickAwayTouchEventHandler = 'onTouchStart' | 'onTouchEnd';
export interface ClickAwayListenerProps {
/**
* The wrapped element.
*/
children: React.ReactElement<any>;
/**
* If `true`, the React tree is ignored and only the DOM tree is considered.
* This prop changes how portaled elements are handled.
* @default false
*/
disableReactTree?: boolean;
/**
* The mouse event to listen to. You can disable the listener by providing `false`.
* @default 'onClick'
*/
mouseEvent?: ClickAwayMouseEventHandler | false;
/**
* Callback fired when a "click away" event is detected.
*/
onClickAway: (event: MouseEvent | TouchEvent) => void;
/**
* The touch event to listen to. You can disable the listener by providing `false`.
* @default 'onTouchEnd'
*/
touchEvent?: ClickAwayTouchEventHandler | false;
}
/**
* Listen for click events that occur somewhere in the document, outside of the element itself.
* For instance, if you need to hide a menu when people click anywhere else on your page.
*
* Demos:
*
* - [Click-Away Listener](https://mui.com/material-ui/react-click-away-listener/)
* - [Menu](https://mui.com/material-ui/react-menu/)
*
* API:
*
* - [ClickAwayListener API](https://mui.com/material-ui/api/click-away-listener/)
*/
declare function ClickAwayListener(props: ClickAwayListenerProps): React.JSX.Element;
declare namespace ClickAwayListener {
var propTypes: any;
}
export { ClickAwayListener };
+2
View File
@@ -0,0 +1,2 @@
export { ClickAwayListener as default } from "./ClickAwayListener.js";
export type { ClickAwayListenerProps } from "./ClickAwayListener.js";
+71
View File
@@ -0,0 +1,71 @@
import * as React from 'react';
import { SxProps } from '@mui/system';
import { InternalStandardProps as StandardProps, Theme } from "../index.js";
import { TransitionProps } from "../transitions/transition.js";
import { CollapseClasses } from "./collapseClasses.js";
export interface CollapseProps extends StandardProps<TransitionProps, 'timeout'> {
/**
* The content node to be collapsed.
*/
children?: React.ReactNode;
className?: string;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<CollapseClasses>;
/**
* The width (horizontal) or height (vertical) of the container when collapsed.
* @default '0px'
*/
collapsedSize?: string | number;
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component?: React.ElementType<TransitionProps>;
/**
* 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;
/**
* The transition orientation.
* @default 'vertical'
*/
orientation?: 'horizontal' | 'vertical';
/**
* The duration for the transition, in milliseconds.
* You may specify a single timeout for all transitions, or individually with an object.
*
* Set to 'auto' to automatically calculate transition time based on height.
* @default duration.standard
*/
timeout?: TransitionProps['timeout'] | 'auto';
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
}
/**
* The Collapse transition is used by the
* [Vertical Stepper](https://mui.com/material-ui/react-stepper/#vertical-stepper) StepContent component.
* It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
*
* Demos:
*
* - [Card](https://mui.com/material-ui/react-card/)
* - [Lists](https://mui.com/material-ui/react-list/)
* - [Transitions](https://mui.com/material-ui/transitions/)
*
* API:
*
* - [Collapse API](https://mui.com/material-ui/api/collapse/)
* - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props)
*/
export default function Collapse(props: CollapseProps): React.JSX.Element;
+18
View File
@@ -0,0 +1,18 @@
export interface CollapseClasses {
/** Styles applied to the root element. */
root: string;
/** State class applied to the root element if `orientation="horizontal"`. */
horizontal: string;
/** Styles applied to the root element when the transition has entered. */
entered: string;
/** Styles applied to the root element when the transition has exited and `collapsedSize` = 0px. */
hidden: string;
/** Styles applied to the outer wrapper element. */
wrapper: string;
/** Styles applied to the inner wrapper element. */
wrapperInner: string;
}
export type CollapseClassKey = keyof CollapseClasses;
export declare function getCollapseUtilityClass(slot: string): string;
declare const collapseClasses: CollapseClasses;
export default collapseClasses;
+4
View File
@@ -0,0 +1,4 @@
export { default } from "./Collapse.js";
export * from "./Collapse.js";
export { default as collapseClasses } from "./collapseClasses.js";
export * from "./collapseClasses.js";
+55
View File
@@ -0,0 +1,55 @@
import * as React from 'react';
import { SxProps, Breakpoint } from '@mui/system';
import { Theme } from "../styles/index.js";
import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
import { ContainerClasses } from "./containerClasses.js";
export interface ContainerOwnProps {
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<ContainerClasses>;
/**
* If `true`, the left and right padding is removed.
* @default false
*/
disableGutters?: boolean;
/**
* Set the max-width to match the min-width of the current breakpoint.
* This is useful if you'd prefer to design for a fixed set of sizes
* instead of trying to accommodate a fully fluid viewport.
* It's fluid by default.
* @default false
*/
fixed?: boolean;
/**
* Determine the max-width of the container.
* The container width grows with the size of the screen.
* Set to `false` to disable `maxWidth`.
* @default 'lg'
*/
maxWidth?: Breakpoint | false;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
}
export interface ContainerTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
props: AdditionalProps & ContainerOwnProps;
defaultComponent: RootComponent;
}
/**
*
* Demos:
*
* - [Container](https://mui.com/material-ui/react-container/)
*
* API:
*
* - [Container API](https://mui.com/material-ui/api/container/)
*/
declare const Container: OverridableComponent<ContainerTypeMap>;
export type ContainerProps<RootComponent extends React.ElementType = ContainerTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<ContainerTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export default Container;
+6
View File
@@ -0,0 +1,6 @@
import { ContainerClasses } from '@mui/system';
export type { ContainerClassKey } from '@mui/system';
export type { ContainerClasses };
export declare function getContainerUtilityClass(slot: string): string;
declare const containerClasses: ContainerClasses;
export default containerClasses;
+4
View File
@@ -0,0 +1,4 @@
export { default } from "./Container.js";
export * from "./Container.js";
export { default as containerClasses } from "./containerClasses.js";
export * from "./containerClasses.js";
+28
View File
@@ -0,0 +1,28 @@
import * as React from 'react';
import { StyledComponentProps } from "../styles/index.js";
export interface CssBaselineProps extends StyledComponentProps<never> {
/**
* You can wrap a node.
*/
children?: React.ReactNode;
/**
* Enable `color-scheme` CSS property to use `theme.palette.mode`.
* For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
* For browser support, check out https://caniuse.com/?search=color-scheme
* @default false
*/
enableColorScheme?: boolean;
}
/**
* Kickstart an elegant, consistent, and simple baseline to build upon.
*
* Demos:
*
* - [CSS Baseline](https://mui.com/material-ui/react-css-baseline/)
*
* API:
*
* - [CssBaseline API](https://mui.com/material-ui/api/css-baseline/)
*/
export default function CssBaseline(props: CssBaselineProps): React.JSX.Element;
+2
View File
@@ -0,0 +1,2 @@
export { default } from "./CssBaseline.js";
export * from "./CssBaseline.js";
Loaded 100 of 56062 files, more files were not shown because too many files have changed in this diff. Show more