Initial commit: Crypto trader application

This commit is contained in:
2025-12-25 20:20:40 -05:00
commit 07a04c1bb8
47895 changed files with 2042266 additions and 0 deletions
+228
View File
@@ -0,0 +1,228 @@
import * as React from 'react';
import { OverridableComponent, OverrideProps } from '@mui/types';
import { Theme as SystemTheme } from '../createTheme';
import {
SxProps,
AllSystemCSSProperties,
ResponsiveStyleValue,
OverwriteCSSProperties,
AliasesCSSProperties,
} from '../styleFunctionSx';
export type PropsFor<SomeStyleFunction> =
SomeStyleFunction extends StyleFunction<infer Props> ? Props : never;
export type StyleFunction<Props> = (props: Props) => any;
export type SimpleStyleFunction<PropKey extends keyof any> = StyleFunction<
Partial<Record<PropKey, any>>
> & { filterProps: string[] };
// borders.js
export declare const borders: SimpleStyleFunction<
| 'border'
| 'borderTop'
| 'borderRight'
| 'borderBottom'
| 'borderLeft'
| 'borderColor'
| 'borderRadius'
>;
export declare const display: SimpleStyleFunction<
'display' | 'displayPrint' | 'overflow' | 'textOverflow' | 'visibility' | 'whiteSpace'
>;
export declare const flexbox: SimpleStyleFunction<
| 'flexBasis'
| 'flexDirection'
| 'flexWrap'
| 'justifyContent'
| 'alignItems'
| 'alignContent'
| 'order'
| 'flex'
| 'flexGrow'
| 'flexShrink'
| 'alignSelf'
| 'justifyItems'
| 'justifySelf'
>;
export declare const grid: SimpleStyleFunction<
| 'gap'
| 'columnGap'
| 'rowGap'
| 'gridColumn'
| 'gridRow'
| 'gridAutoFlow'
| 'gridAutoColumns'
| 'gridAutoRows'
| 'gridTemplateColumns'
| 'gridTemplateRows'
| 'gridTemplateAreas'
| 'gridArea'
>;
export declare const palette: SimpleStyleFunction<'bgcolor' | 'color'>;
export declare const positions: SimpleStyleFunction<
'zIndex' | 'position' | 'top' | 'right' | 'bottom' | 'left'
>;
export declare const shadows: SimpleStyleFunction<'boxShadow'>;
export declare const sizing: SimpleStyleFunction<
| 'width'
| 'maxWidth'
| 'minWidth'
| 'height'
| 'maxHeight'
| 'minHeight'
| 'sizeWidth'
| 'sizeHeight'
| 'boxSizing'
>;
export declare const spacing: SimpleStyleFunction<
| 'm'
| 'mt'
| 'mr'
| 'mb'
| 'ml'
| 'mx'
| 'my'
| 'p'
| 'pt'
| 'pr'
| 'pb'
| 'pl'
| 'px'
| 'py'
| 'margin'
| 'marginTop'
| 'marginRight'
| 'marginBottom'
| 'marginLeft'
| 'marginX'
| 'marginY'
| 'marginInline'
| 'marginInlineStart'
| 'marginInlineEnd'
| 'marginBlock'
| 'marginBlockStart'
| 'marginBlockEnd'
| 'padding'
| 'paddingTop'
| 'paddingRight'
| 'paddingBottom'
| 'paddingLeft'
| 'paddingX'
| 'paddingY'
| 'paddingInline'
| 'paddingInlineStart'
| 'paddingInlineEnd'
| 'paddingBlock'
| 'paddingBlockStart'
| 'paddingBlockEnd'
>;
export declare const typography: SimpleStyleFunction<
| 'typography'
| 'fontFamily'
| 'fontSize'
| 'fontStyle'
| 'fontWeight'
| 'letterSpacing'
| 'lineHeight'
| 'textAlign'
| 'textTransform'
>;
// compose.js
/**
* given a list of StyleFunction return the intersection of the props each individual
* StyleFunction requires.
*
* If `firstFn` requires { color: string } and `secondFn` requires { spacing: number }
* their composed function requires { color: string, spacing: number }
*/
type ComposedArg<T> = T extends Array<(arg: infer P) => any> ? P : never;
type ComposedOwnerState<T> = ComposedArg<T>;
export type ComposedStyleFunction<T extends Array<StyleFunction<any>>> = StyleFunction<
ComposedOwnerState<T>
> & { filterProps: string[] };
export interface CustomSystemProps extends AliasesCSSProperties, OverwriteCSSProperties {}
export type SimpleSystemKeys = keyof PropsFor<
ComposedStyleFunction<
[
typeof borders,
typeof display,
typeof flexbox,
typeof grid,
typeof palette,
typeof positions,
typeof shadows,
typeof sizing,
typeof spacing,
typeof typography,
]
>
>;
// The SimpleSystemKeys are subset of the AllSystemCSSProperties, so this should be ok
// This is needed as these are used as keys inside AllSystemCSSProperties
type StandardSystemKeys = Extract<SimpleSystemKeys, keyof AllSystemCSSProperties>;
export type SystemProps<Theme extends object = {}> = {
[K in StandardSystemKeys]?:
| ResponsiveStyleValue<AllSystemCSSProperties[K]>
| ((theme: Theme) => ResponsiveStyleValue<AllSystemCSSProperties[K]>);
};
export interface BoxOwnProps<Theme extends object = SystemTheme> extends SystemProps<Theme> {
children?: React.ReactNode;
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component?: React.ElementType;
ref?: React.Ref<unknown>;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
}
export interface BoxTypeMap<
AdditionalProps = {},
RootComponent extends React.ElementType = 'div',
Theme extends object = SystemTheme,
> {
props: AdditionalProps & BoxOwnProps<Theme>;
defaultComponent: RootComponent;
}
/**
*
* Demos:
*
* - [Box (Joy UI)](https://mui.com/joy-ui/react-box/)
* - [Box (Material UI)](https://mui.com/material-ui/react-box/)
* - [Box (MUI System)](https://mui.com/system/react-box/)
*
* API:
*
* - [Box API](https://mui.com/system/api/box/)
*/
declare const Box: OverridableComponent<BoxTypeMap>;
export type BoxProps<
RootComponent extends React.ElementType = BoxTypeMap['defaultComponent'],
AdditionalProps = {},
> = OverrideProps<BoxTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export default Box;
+36
View File
@@ -0,0 +1,36 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _ClassNameGenerator = _interopRequireDefault(require("@mui/utils/ClassNameGenerator"));
var _createBox = _interopRequireDefault(require("../createBox"));
var _boxClasses = _interopRequireDefault(require("./boxClasses"));
const Box = (0, _createBox.default)({
defaultClassName: _boxClasses.default.root,
generateClassName: _ClassNameGenerator.default.generate
});
process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* @ignore
*/
children: _propTypes.default.node,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: _propTypes.default.elementType,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
} : void 0;
var _default = exports.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;
+10
View File
@@ -0,0 +1,10 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
const boxClasses = (0, _generateUtilityClasses.default)('MuiBox', ['root']);
var _default = exports.default = boxClasses;
+5
View File
@@ -0,0 +1,5 @@
export { default } from './Box';
export * from './Box';
export { default as boxClasses } from './boxClasses';
export * from './boxClasses';
+37
View File
@@ -0,0 +1,37 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {
boxClasses: true
};
Object.defineProperty(exports, "boxClasses", {
enumerable: true,
get: function () {
return _boxClasses.default;
}
});
Object.defineProperty(exports, "default", {
enumerable: true,
get: function () {
return _Box.default;
}
});
var _Box = _interopRequireDefault(require("./Box"));
var _boxClasses = _interopRequireWildcard(require("./boxClasses"));
Object.keys(_boxClasses).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _boxClasses[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _boxClasses[key];
}
});
});
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "../esm/Box/index.js",
"main": "./index.js",
"types": "./index.d.ts"
}
+15374
View File
File diff suppressed because it is too large Load Diff
+9
View File
@@ -0,0 +1,9 @@
import * as CSS from 'csstype';
/**
* All non-vendor-prefixed CSS properties. (Also allows `number` in order to support CSS-in-JS libs,
* since they are converted to `px`.)
*/
export interface CSSProperties
extends CSS.StandardProperties<number | string>,
CSS.SvgProperties<number | string> {}
+13
View File
@@ -0,0 +1,13 @@
/**
*
* Demos:
*
* - [Container (Material UI)](https://mui.com/material-ui/react-container/)
* - [Container (MUI System)](https://mui.com/system/react-container/)
*
* API:
*
* - [Container API](https://mui.com/system/api/container/)
*/
declare const Container: import("@mui/types").OverridableComponent<import("./ContainerProps").ContainerTypeMap<{}, "div">>;
export default Container;
+66
View File
@@ -0,0 +1,66 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _createContainer = _interopRequireDefault(require("./createContainer"));
/**
*
* Demos:
*
* - [Container (Material UI)](https://mui.com/material-ui/react-container/)
* - [Container (MUI System)](https://mui.com/system/react-container/)
*
* API:
*
* - [Container API](https://mui.com/system/api/container/)
*/
const Container = (0, _createContainer.default)();
process.env.NODE_ENV !== "production" ? Container.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* @ignore
*/
children: _propTypes.default.node,
/**
* Override or extend the styles applied to the component.
*/
classes: _propTypes.default.object,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: _propTypes.default.elementType,
/**
* If `true`, the left and right padding is removed.
* @default false
*/
disableGutters: _propTypes.default.bool,
/**
* 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: _propTypes.default.bool,
/**
* 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: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), _propTypes.default.string]),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
} : void 0;
var _default = exports.default = Container;
+40
View File
@@ -0,0 +1,40 @@
import * as React from 'react';
import { OverrideProps } from '@mui/types';
import { SxProps } from '../styleFunctionSx';
import { Theme, Breakpoint } from '../createTheme';
import { ContainerClasses } from './containerClasses';
export interface ContainerTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
props: AdditionalProps & {
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>;
};
defaultComponent: DefaultComponent;
}
export type ContainerProps<RootComponent extends React.ElementType = ContainerTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<ContainerTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+5
View File
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
+22
View File
@@ -0,0 +1,22 @@
export interface ContainerClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the root element if `disableGutters={true}`. */
disableGutters: string;
/** Styles applied to the root element if `fixed={true}`. */
fixed: string;
/** Styles applied to the root element if `maxWidth="xs"`. */
maxWidthXs: string;
/** Styles applied to the root element if `maxWidth="sm"`. */
maxWidthSm: string;
/** Styles applied to the root element if `maxWidth="md"`. */
maxWidthMd: string;
/** Styles applied to the root element if `maxWidth="lg"`. */
maxWidthLg: string;
/** Styles applied to the root element if `maxWidth="xl"`. */
maxWidthXl: string;
}
export type ContainerClassKey = keyof ContainerClasses;
export declare function getContainerUtilityClass(slot: string): string;
declare const containerClasses: ContainerClasses;
export default containerClasses;
+15
View File
@@ -0,0 +1,15 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
exports.getContainerUtilityClass = getContainerUtilityClass;
var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
function getContainerUtilityClass(slot) {
return (0, _generateUtilityClass.default)('MuiContainer', slot);
}
const containerClasses = (0, _generateUtilityClasses.default)('MuiContainer', ['root', 'disableGutters', 'fixed', 'maxWidthXs', 'maxWidthSm', 'maxWidthMd', 'maxWidthLg', 'maxWidthXl']);
var _default = exports.default = containerClasses;
+18
View File
@@ -0,0 +1,18 @@
import * as React from 'react';
import { Interpolation, MUIStyledComponent as StyledComponent } from '@mui/styled-engine';
import { OverridableComponent } from '@mui/types';
import { ContainerProps, ContainerTypeMap } from './ContainerProps';
import { Theme as DefaultTheme } from '../createTheme';
interface StyleFnProps<Theme> extends ContainerProps {
theme: Theme;
ownerState: ContainerProps;
}
type RequiredThemeStructure = Pick<DefaultTheme, 'breakpoints' | 'spacing'>;
export default function createContainer<Theme extends RequiredThemeStructure = DefaultTheme>(options?: {
createStyledComponent?: (...styles: Array<Interpolation<StyleFnProps<Theme>>>) => StyledComponent<ContainerProps>;
useThemeProps?: (inProps: ContainerProps) => ContainerProps & {
component?: React.ElementType;
};
componentName?: string;
}): OverridableComponent<ContainerTypeMap<{}, "div">>;
export {};
+152
View File
@@ -0,0 +1,152 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = createContainer;
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _clsx = _interopRequireDefault(require("clsx"));
var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
var _useThemeProps = _interopRequireDefault(require("../useThemeProps"));
var _styled = _interopRequireDefault(require("../styled"));
var _createTheme = _interopRequireDefault(require("../createTheme"));
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const defaultTheme = (0, _createTheme.default)();
const defaultCreateStyledComponent = (0, _styled.default)('div', {
name: 'MuiContainer',
slot: 'Root',
overridesResolver: (props, styles) => {
const {
ownerState
} = props;
return [styles.root, styles[`maxWidth${(0, _capitalize.default)(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
}
});
const useThemePropsDefault = inProps => (0, _useThemeProps.default)({
props: inProps,
name: 'MuiContainer',
defaultTheme
});
const useUtilityClasses = (ownerState, componentName) => {
const getContainerUtilityClass = slot => {
return (0, _generateUtilityClass.default)(componentName, slot);
};
const {
classes,
fixed,
disableGutters,
maxWidth
} = ownerState;
const slots = {
root: ['root', maxWidth && `maxWidth${(0, _capitalize.default)(String(maxWidth))}`, fixed && 'fixed', disableGutters && 'disableGutters']
};
return (0, _composeClasses.default)(slots, getContainerUtilityClass, classes);
};
function createContainer(options = {}) {
const {
// This will allow adding custom styled fn (for example for custom sx style function)
createStyledComponent = defaultCreateStyledComponent,
useThemeProps = useThemePropsDefault,
componentName = 'MuiContainer'
} = options;
const ContainerRoot = createStyledComponent(({
theme,
ownerState
}) => (0, _extends2.default)({
width: '100%',
marginLeft: 'auto',
boxSizing: 'border-box',
marginRight: 'auto',
display: 'block'
}, !ownerState.disableGutters && {
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(2),
// @ts-ignore module augmentation fails if custom breakpoints are used
[theme.breakpoints.up('sm')]: {
paddingLeft: theme.spacing(3),
paddingRight: theme.spacing(3)
}
}), ({
theme,
ownerState
}) => ownerState.fixed && Object.keys(theme.breakpoints.values).reduce((acc, breakpointValueKey) => {
const breakpoint = breakpointValueKey;
const value = theme.breakpoints.values[breakpoint];
if (value !== 0) {
// @ts-ignore
acc[theme.breakpoints.up(breakpoint)] = {
maxWidth: `${value}${theme.breakpoints.unit}`
};
}
return acc;
}, {}), ({
theme,
ownerState
}) => (0, _extends2.default)({}, ownerState.maxWidth === 'xs' && {
// @ts-ignore module augmentation fails if custom breakpoints are used
[theme.breakpoints.up('xs')]: {
// @ts-ignore module augmentation fails if custom breakpoints are used
maxWidth: Math.max(theme.breakpoints.values.xs, 444)
}
}, ownerState.maxWidth &&
// @ts-ignore module augmentation fails if custom breakpoints are used
ownerState.maxWidth !== 'xs' && {
// @ts-ignore module augmentation fails if custom breakpoints are used
[theme.breakpoints.up(ownerState.maxWidth)]: {
// @ts-ignore module augmentation fails if custom breakpoints are used
maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`
}
}));
const Container = /*#__PURE__*/React.forwardRef(function Container(inProps, ref) {
const props = useThemeProps(inProps);
const {
className,
component = 'div',
disableGutters = false,
fixed = false,
maxWidth = 'lg'
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const ownerState = (0, _extends2.default)({}, props, {
component,
disableGutters,
fixed,
maxWidth
});
// @ts-ignore module augmentation fails if custom breakpoints are used
const classes = useUtilityClasses(ownerState, componentName);
return (
/*#__PURE__*/
// @ts-ignore theme is injected by the styled util
(0, _jsxRuntime.jsx)(ContainerRoot, (0, _extends2.default)({
as: component
// @ts-ignore module augmentation fails if custom breakpoints are used
,
ownerState: ownerState,
className: (0, _clsx.default)(classes.root, className),
ref: ref
}, other))
);
});
process.env.NODE_ENV !== "production" ? Container.propTypes /* remove-proptypes */ = {
children: _propTypes.default.node,
classes: _propTypes.default.object,
className: _propTypes.default.string,
component: _propTypes.default.elementType,
disableGutters: _propTypes.default.bool,
fixed: _propTypes.default.bool,
maxWidth: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), _propTypes.default.string]),
sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
} : void 0;
return Container;
}
+5
View File
@@ -0,0 +1,5 @@
export { default } from './Container';
export * from './ContainerProps';
export { default as containerClasses } from './containerClasses';
export * from './containerClasses';
+37
View File
@@ -0,0 +1,37 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {
containerClasses: true
};
Object.defineProperty(exports, "containerClasses", {
enumerable: true,
get: function () {
return _containerClasses.default;
}
});
Object.defineProperty(exports, "default", {
enumerable: true,
get: function () {
return _Container.default;
}
});
var _Container = _interopRequireDefault(require("./Container"));
var _containerClasses = _interopRequireWildcard(require("./containerClasses"));
Object.keys(_containerClasses).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _containerClasses[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _containerClasses[key];
}
});
});
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "../esm/Container/index.js",
"main": "./index.js",
"types": "./index.d.ts"
}
@@ -0,0 +1,12 @@
import * as React from 'react';
declare function DefaultPropsProvider({ value, children, }: React.PropsWithChildren<{
value: Record<string, any> | undefined;
}>): React.JSX.Element;
declare namespace DefaultPropsProvider {
var propTypes: any;
}
export declare function useDefaultProps<Props>({ props, name }: {
props: Props;
name: string;
}): Props;
export default DefaultPropsProvider;
@@ -0,0 +1,73 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
exports.useDefaultProps = useDefaultProps;
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _resolveProps = _interopRequireDefault(require("@mui/utils/resolveProps"));
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const PropsContext = /*#__PURE__*/React.createContext(undefined);
function DefaultPropsProvider({
value,
children
}) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(PropsContext.Provider, {
value: value,
children: children
});
}
process.env.NODE_ENV !== "production" ? DefaultPropsProvider.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* @ignore
*/
children: _propTypes.default.node,
/**
* @ignore
*/
value: _propTypes.default.object
} : void 0;
function getThemeProps(params) {
const {
theme,
name,
props
} = params;
if (!theme || !theme.components || !theme.components[name]) {
return props;
}
const config = theme.components[name];
if (config.defaultProps) {
// compatible with v5 signature
return (0, _resolveProps.default)(config.defaultProps, props);
}
if (!config.styleOverrides && !config.variants) {
// v6 signature, no property 'defaultProps'
return (0, _resolveProps.default)(config, props);
}
return props;
}
function useDefaultProps({
props,
name
}) {
const ctx = React.useContext(PropsContext);
return getThemeProps({
props,
name,
theme: {
components: ctx
}
});
}
var _default = exports.default = DefaultPropsProvider;
+1
View File
@@ -0,0 +1 @@
export { default, useDefaultProps } from './DefaultPropsProvider';
+20
View File
@@ -0,0 +1,20 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "default", {
enumerable: true,
get: function () {
return _DefaultPropsProvider.default;
}
});
Object.defineProperty(exports, "useDefaultProps", {
enumerable: true,
get: function () {
return _DefaultPropsProvider.useDefaultProps;
}
});
var _DefaultPropsProvider = _interopRequireWildcard(require("./DefaultPropsProvider"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "../esm/DefaultPropsProvider/index.js",
"main": "./index.js",
"types": "./index.d.ts"
}
+13
View File
@@ -0,0 +1,13 @@
import * as React from 'react';
import { Interpolation } from '@mui/styled-engine';
import { Theme as SystemTheme } from '../createTheme';
export interface GlobalStylesProps<Theme = SystemTheme> {
styles: Interpolation<Theme>;
defaultTheme?: object;
themeId?: string;
}
declare function GlobalStyles<Theme = SystemTheme>({ styles, themeId, defaultTheme, }: GlobalStylesProps<Theme>): React.JSX.Element;
declare namespace GlobalStyles {
var propTypes: any;
}
export default GlobalStyles;
+69
View File
@@ -0,0 +1,69 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledEngine = require("@mui/styled-engine");
var _useTheme = _interopRequireDefault(require("../useTheme"));
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function wrapGlobalLayer(styles) {
const serialized = (0, _styledEngine.internal_serializeStyles)(styles);
if (styles !== serialized && serialized.styles) {
if (!serialized.styles.match(/^@layer\s+[^{]*$/)) {
// If the styles are not already wrapped in a layer, wrap them in a global layer.
serialized.styles = `@layer global{${serialized.styles}}`;
}
return serialized;
}
return styles;
}
function GlobalStyles({
styles,
themeId,
defaultTheme = {}
}) {
const upperTheme = (0, _useTheme.default)(defaultTheme);
const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
let globalStyles = typeof styles === 'function' ? styles(resolvedTheme) : styles;
if (resolvedTheme.modularCssLayers) {
if (Array.isArray(globalStyles)) {
globalStyles = globalStyles.map(styleArg => {
if (typeof styleArg === 'function') {
return wrapGlobalLayer(styleArg(resolvedTheme));
}
return wrapGlobalLayer(styleArg);
});
} else {
globalStyles = wrapGlobalLayer(globalStyles);
}
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
styles: globalStyles
});
}
process.env.NODE_ENV !== "production" ? GlobalStyles.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* @ignore
*/
defaultTheme: _propTypes.default.object,
/**
* @ignore
*/
styles: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.array, _propTypes.default.func, _propTypes.default.number, _propTypes.default.object, _propTypes.default.string, _propTypes.default.bool]),
/**
* @ignore
*/
themeId: _propTypes.default.string
} : void 0;
var _default = exports.default = GlobalStyles;
+2
View File
@@ -0,0 +1,2 @@
export { default } from './GlobalStyles';
export * from './GlobalStyles';
+27
View File
@@ -0,0 +1,27 @@
"use strict";
'use client';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {};
Object.defineProperty(exports, "default", {
enumerable: true,
get: function () {
return _GlobalStyles.default;
}
});
var _GlobalStyles = _interopRequireWildcard(require("./GlobalStyles"));
Object.keys(_GlobalStyles).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _GlobalStyles[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _GlobalStyles[key];
}
});
});
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "../esm/GlobalStyles/index.js",
"main": "./index.js",
"types": "./index.d.ts"
}
@@ -0,0 +1,49 @@
/**
* Split this component for RSC import
*/
import * as React from 'react';
export declare const DEFAULT_MODE_STORAGE_KEY = "mode";
export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "color-scheme";
export declare const DEFAULT_ATTRIBUTE = "data-color-scheme";
export interface InitColorSchemeScriptProps {
/**
* The mode to be used for the first visit
* @default 'light'
*/
defaultMode?: 'light' | 'dark' | 'system';
/**
* The default color scheme to be used on the light mode
* @default 'light'
*/
defaultLightColorScheme?: string;
/**
* The default color scheme to be used on the dark mode
* * @default 'dark'
*/
defaultDarkColorScheme?: string;
/**
* The node (provided as string) used to attach the color-scheme attribute
* @default 'document.documentElement'
*/
colorSchemeNode?: string;
/**
* localStorage key used to store `mode`
* @default 'mode'
*/
modeStorageKey?: string;
/**
* localStorage key used to store `colorScheme`
* @default 'color-scheme'
*/
colorSchemeStorageKey?: string;
/**
* DOM attribute for applying color scheme
* @default 'data-color-scheme'
*/
attribute?: string;
/**
* Nonce string to pass to the inline script for CSP headers
*/
nonce?: string | undefined;
}
export default function InitColorSchemeScript(options?: InitColorSchemeScriptProps): React.JSX.Element;
@@ -0,0 +1,61 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DEFAULT_MODE_STORAGE_KEY = exports.DEFAULT_COLOR_SCHEME_STORAGE_KEY = exports.DEFAULT_ATTRIBUTE = void 0;
exports.default = InitColorSchemeScript;
var React = _interopRequireWildcard(require("react"));
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
* Split this component for RSC import
*/
const DEFAULT_MODE_STORAGE_KEY = exports.DEFAULT_MODE_STORAGE_KEY = 'mode';
const DEFAULT_COLOR_SCHEME_STORAGE_KEY = exports.DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
const DEFAULT_ATTRIBUTE = exports.DEFAULT_ATTRIBUTE = 'data-color-scheme';
function InitColorSchemeScript(options) {
const {
defaultMode = 'light',
defaultLightColorScheme = 'light',
defaultDarkColorScheme = 'dark',
modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
attribute = DEFAULT_ATTRIBUTE,
colorSchemeNode = 'document.documentElement',
nonce
} = options || {};
return /*#__PURE__*/(0, _jsxRuntime.jsx)("script", {
suppressHydrationWarning: true,
nonce: typeof window === 'undefined' ? nonce : ''
// eslint-disable-next-line react/no-danger
,
dangerouslySetInnerHTML: {
__html: `(function() {
try {
var mode = localStorage.getItem('${modeStorageKey}') || '${defaultMode}';
var colorScheme = '';
if (mode === 'system') {
// handle system mode
var mql = window.matchMedia('(prefers-color-scheme: dark)');
if (mql.matches) {
colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
} else {
colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
}
}
if (mode === 'light') {
colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
}
if (mode === 'dark') {
colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
}
if (colorScheme) {
${colorSchemeNode}.setAttribute('${attribute}', colorScheme);
}
} catch(e){}})();`
}
}, "mui-color-scheme-init");
}
+2
View File
@@ -0,0 +1,2 @@
export { default } from './InitColorSchemeScript';
export type { InitColorSchemeScriptProps } from './InitColorSchemeScript';
+13
View File
@@ -0,0 +1,13 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "default", {
enumerable: true,
get: function () {
return _InitColorSchemeScript.default;
}
});
var _InitColorSchemeScript = _interopRequireDefault(require("./InitColorSchemeScript"));
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "../esm/InitColorSchemeScript/index.js",
"main": "./index.js",
"types": "./index.d.ts"
}
+21
View File
@@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2014 Call-Em-All
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
+19
View File
@@ -0,0 +1,19 @@
# MUI System
MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.
## Installation
Install the package in your project directory with:
<!-- #default-branch-switch -->
```bash
npm install @mui/system @emotion/react @emotion/styled
```
## Documentation
<!-- #default-branch-switch -->
Visit [https://v5.mui.com/system/getting-started/](https://v5.mui.com/system/getting-started/) to view the full documentation.
+11
View File
@@ -0,0 +1,11 @@
import * as React from 'react';
interface RtlProviderProps {
children?: React.ReactNode;
value?: boolean;
}
declare const RtlProvider: React.FC<RtlProviderProps>;
export const useRtl: () => boolean;
export default RtlProvider;
+35
View File
@@ -0,0 +1,35 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useRtl = exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["value"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const RtlContext = /*#__PURE__*/React.createContext();
function RtlProvider(_ref) {
let {
value
} = _ref,
props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(RtlContext.Provider, (0, _extends2.default)({
value: value != null ? value : true
}, props));
}
process.env.NODE_ENV !== "production" ? RtlProvider.propTypes = {
children: _propTypes.default.node,
value: _propTypes.default.bool
} : void 0;
const useRtl = () => {
const value = React.useContext(RtlContext);
return value != null ? value : false;
};
exports.useRtl = useRtl;
var _default = exports.default = RtlProvider;
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "../esm/RtlProvider/index.js",
"main": "./index.js",
"types": "./index.d.ts"
}
+14
View File
@@ -0,0 +1,14 @@
/**
*
* Demos:
*
* - [Stack (Joy UI)](https://mui.com/joy-ui/react-stack/)
* - [Stack (Material UI)](https://mui.com/material-ui/react-stack/)
* - [Stack (MUI System)](https://mui.com/system/react-stack/)
*
* API:
*
* - [Stack API](https://mui.com/system/api/stack/)
*/
declare const Stack: import("@mui/types").OverridableComponent<import("./StackProps").StackTypeMap<{}, "div">>;
export default Stack;
+68
View File
@@ -0,0 +1,68 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _createStack = _interopRequireDefault(require("./createStack"));
/**
*
* Demos:
*
* - [Stack (Joy UI)](https://mui.com/joy-ui/react-stack/)
* - [Stack (Material UI)](https://mui.com/material-ui/react-stack/)
* - [Stack (MUI System)](https://mui.com/system/react-stack/)
*
* API:
*
* - [Stack API](https://mui.com/system/api/stack/)
*/
const Stack = (0, _createStack.default)();
process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content of the component.
*/
children: _propTypes.default.node,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: _propTypes.default.elementType,
/**
* Defines the `flex-direction` style property.
* It is applied for all screen sizes.
* @default 'column'
*/
direction: _propTypes.default.oneOfType([_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), _propTypes.default.object]),
/**
* Add an element between each child.
*/
divider: _propTypes.default.node,
/**
* Defines the space between immediate children.
* @default 0
*/
spacing: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string]),
/**
* The system prop, which allows defining system overrides as well as additional CSS styles.
*/
sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
/**
* If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
*
* While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
* it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
*
* To enable this flag globally, follow the theme's default props configuration.
* @default false
*/
useFlexGap: _propTypes.default.bool
} : void 0;
var _default = exports.default = Stack;
+53
View File
@@ -0,0 +1,53 @@
import * as React from 'react';
import { OverrideProps } from '@mui/types';
import { ResponsiveStyleValue, SxProps } from '../styleFunctionSx';
import { SystemProps } from '../Box';
import { Theme } from '../createTheme';
export interface StackBaseProps {
/**
* The content of the component.
*/
children?: React.ReactNode;
/**
* Defines the `flex-direction` style property.
* It is applied for all screen sizes.
* @default 'column'
*/
direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'>;
/**
* Defines the space between immediate children.
* @default 0
*/
spacing?: ResponsiveStyleValue<number | string>;
/**
* Add an element between each child.
*/
divider?: React.ReactNode;
/**
* If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
*
* While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
* it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
*
* To enable this flag globally, follow the theme's default props configuration.
* @default false
*/
useFlexGap?: boolean;
}
export interface StackTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
props: AdditionalProps & StackBaseProps & {
/**
* The system prop, which allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
} & SystemProps<Theme>;
defaultComponent: DefaultComponent;
}
export type StackProps<RootComponent extends React.ElementType = StackTypeMap['defaultComponent'], AdditionalProps = {
component?: React.ElementType;
}> = OverrideProps<StackTypeMap<AdditionalProps, RootComponent>, RootComponent>;
export interface StackOwnerState {
direction: StackProps['direction'];
spacing: StackProps['spacing'];
useFlexGap: boolean;
}
+5
View File
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
+21
View File
@@ -0,0 +1,21 @@
import * as React from 'react';
import { OverridableComponent } from '@mui/types';
import { StackTypeMap, StackOwnerState } from './StackProps';
import { Breakpoints } from '../createTheme/createBreakpoints';
import { Spacing } from '../createTheme/createSpacing';
interface StyleFunctionProps {
theme: {
breakpoints: Breakpoints;
spacing: Spacing;
};
ownerState: StackOwnerState;
}
declare const defaultCreateStyledComponent: import("@mui/styled-engine").CreateStyledComponent<import("../createStyled").MUIStyledCommonProps<any>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}, any>;
declare function useThemePropsDefault<T extends {}>(props: T): T;
export declare const style: ({ ownerState, theme }: StyleFunctionProps) => any;
export default function createStack(options?: {
createStyledComponent?: typeof defaultCreateStyledComponent;
useThemeProps?: typeof useThemePropsDefault;
componentName?: string;
}): OverridableComponent<StackTypeMap<{}, "div">>;
export {};
+184
View File
@@ -0,0 +1,184 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = createStack;
exports.style = void 0;
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _clsx = _interopRequireDefault(require("clsx"));
var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
var _styled = _interopRequireDefault(require("../styled"));
var _useThemeProps = _interopRequireDefault(require("../useThemeProps"));
var _styleFunctionSx = require("../styleFunctionSx");
var _createTheme = _interopRequireDefault(require("../createTheme"));
var _breakpoints = require("../breakpoints");
var _spacing = require("../spacing");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const defaultTheme = (0, _createTheme.default)();
// widening Theme to any so that the consumer can own the theme structure.
const defaultCreateStyledComponent = (0, _styled.default)('div', {
name: 'MuiStack',
slot: 'Root',
overridesResolver: (props, styles) => styles.root
});
function useThemePropsDefault(props) {
return (0, _useThemeProps.default)({
props,
name: 'MuiStack',
defaultTheme
});
}
/**
* Return an array with the separator React element interspersed between
* each React node of the input children.
*
* > joinChildren([1,2,3], 0)
* [1,0,2,0,3]
*/
function joinChildren(children, separator) {
const childrenArray = React.Children.toArray(children).filter(Boolean);
return childrenArray.reduce((output, child, index) => {
output.push(child);
if (index < childrenArray.length - 1) {
output.push( /*#__PURE__*/React.cloneElement(separator, {
key: `separator-${index}`
}));
}
return output;
}, []);
}
const getSideFromDirection = direction => {
return {
row: 'Left',
'row-reverse': 'Right',
column: 'Top',
'column-reverse': 'Bottom'
}[direction];
};
const style = ({
ownerState,
theme
}) => {
let styles = (0, _extends2.default)({
display: 'flex',
flexDirection: 'column'
}, (0, _breakpoints.handleBreakpoints)({
theme
}, (0, _breakpoints.resolveBreakpointValues)({
values: ownerState.direction,
breakpoints: theme.breakpoints.values
}), propValue => ({
flexDirection: propValue
})));
if (ownerState.spacing) {
const transformer = (0, _spacing.createUnarySpacing)(theme);
const base = Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
if (typeof ownerState.spacing === 'object' && ownerState.spacing[breakpoint] != null || typeof ownerState.direction === 'object' && ownerState.direction[breakpoint] != null) {
acc[breakpoint] = true;
}
return acc;
}, {});
const directionValues = (0, _breakpoints.resolveBreakpointValues)({
values: ownerState.direction,
base
});
const spacingValues = (0, _breakpoints.resolveBreakpointValues)({
values: ownerState.spacing,
base
});
if (typeof directionValues === 'object') {
Object.keys(directionValues).forEach((breakpoint, index, breakpoints) => {
const directionValue = directionValues[breakpoint];
if (!directionValue) {
const previousDirectionValue = index > 0 ? directionValues[breakpoints[index - 1]] : 'column';
directionValues[breakpoint] = previousDirectionValue;
}
});
}
const styleFromPropValue = (propValue, breakpoint) => {
if (ownerState.useFlexGap) {
return {
gap: (0, _spacing.getValue)(transformer, propValue)
};
}
return {
// The useFlexGap={false} implement relies on each child to give up control of the margin.
// We need to reset the margin to avoid double spacing.
'& > :not(style):not(style)': {
margin: 0
},
'& > :not(style) ~ :not(style)': {
[`margin${getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)}`]: (0, _spacing.getValue)(transformer, propValue)
}
};
};
styles = (0, _deepmerge.default)(styles, (0, _breakpoints.handleBreakpoints)({
theme
}, spacingValues, styleFromPropValue));
}
styles = (0, _breakpoints.mergeBreakpointsInOrder)(theme.breakpoints, styles);
return styles;
};
exports.style = style;
function createStack(options = {}) {
const {
// This will allow adding custom styled fn (for example for custom sx style function)
createStyledComponent = defaultCreateStyledComponent,
useThemeProps = useThemePropsDefault,
componentName = 'MuiStack'
} = options;
const useUtilityClasses = () => {
const slots = {
root: ['root']
};
return (0, _composeClasses.default)(slots, slot => (0, _generateUtilityClass.default)(componentName, slot), {});
};
const StackRoot = createStyledComponent(style);
const Stack = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
const themeProps = useThemeProps(inProps);
const props = (0, _styleFunctionSx.extendSxProp)(themeProps); // `color` type conflicts with html color attribute.
const {
component = 'div',
direction = 'column',
spacing = 0,
divider,
children,
className,
useFlexGap = false
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const ownerState = {
direction,
spacing,
useFlexGap
};
const classes = useUtilityClasses();
return /*#__PURE__*/(0, _jsxRuntime.jsx)(StackRoot, (0, _extends2.default)({
as: component,
ownerState: ownerState,
ref: ref,
className: (0, _clsx.default)(classes.root, className)
}, other, {
children: divider ? joinChildren(children, divider) : children
}));
});
process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
children: _propTypes.default.node,
direction: _propTypes.default.oneOfType([_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), _propTypes.default.object]),
divider: _propTypes.default.node,
spacing: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string]),
sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
} : void 0;
return Stack;
}
+5
View File
@@ -0,0 +1,5 @@
export { default } from './Stack';
export { default as createStack } from './createStack';
export * from './StackProps';
export { default as stackClasses } from './stackClasses';
export * from './stackClasses';
+57
View File
@@ -0,0 +1,57 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {
createStack: true,
stackClasses: true
};
Object.defineProperty(exports, "createStack", {
enumerable: true,
get: function () {
return _createStack.default;
}
});
Object.defineProperty(exports, "default", {
enumerable: true,
get: function () {
return _Stack.default;
}
});
Object.defineProperty(exports, "stackClasses", {
enumerable: true,
get: function () {
return _stackClasses.default;
}
});
var _Stack = _interopRequireDefault(require("./Stack"));
var _createStack = _interopRequireDefault(require("./createStack"));
var _StackProps = require("./StackProps");
Object.keys(_StackProps).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _StackProps[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _StackProps[key];
}
});
});
var _stackClasses = _interopRequireWildcard(require("./stackClasses"));
Object.keys(_stackClasses).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _stackClasses[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _stackClasses[key];
}
});
});
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "../esm/Stack/index.js",
"main": "./index.js",
"types": "./index.d.ts"
}
+8
View File
@@ -0,0 +1,8 @@
export interface StackClasses {
/** Styles applied to the root element. */
root: string;
}
export type StackClassKey = keyof StackClasses;
export declare function getStackUtilityClass(slot: string): string;
declare const stackClasses: StackClasses;
export default stackClasses;
+15
View File
@@ -0,0 +1,15 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
exports.getStackUtilityClass = getStackUtilityClass;
var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
function getStackUtilityClass(slot) {
return (0, _generateUtilityClass.default)('MuiStack', slot);
}
const stackClasses = (0, _generateUtilityClasses.default)('MuiStack', ['root']);
var _default = exports.default = stackClasses;
+27
View File
@@ -0,0 +1,27 @@
import { DefaultTheme } from '@mui/private-theming';
export interface ThemeProviderProps<Theme = DefaultTheme> {
/**
* Your component tree.
*/
children?: React.ReactNode;
/**
* The design system's unique id for getting the corresponded theme when there are multiple design systems.
*/
themeId?: string;
/**
* A theme object. You can provide a function to extend the outer theme.
*/
theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
}
/**
* This component makes the `theme` available down the React tree.
* It should preferably be used at **the root of your component tree**.
* API:
*
* - [ThemeProvider API](https://mui.com/material-ui/customization/theming/#themeprovider)
*/
export default function ThemeProvider<T = DefaultTheme>(
props: ThemeProviderProps<T>,
): React.ReactElement<ThemeProviderProps<T>>;
+103
View File
@@ -0,0 +1,103 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _privateTheming = require("@mui/private-theming");
var _exactProp = _interopRequireDefault(require("@mui/utils/exactProp"));
var _styledEngine = require("@mui/styled-engine");
var _useThemeWithoutDefault = _interopRequireDefault(require("../useThemeWithoutDefault"));
var _RtlProvider = _interopRequireDefault(require("../RtlProvider"));
var _DefaultPropsProvider = _interopRequireDefault(require("../DefaultPropsProvider"));
var _useLayerOrder = _interopRequireDefault(require("./useLayerOrder"));
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const EMPTY_THEME = {};
function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
return React.useMemo(() => {
const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
if (typeof localTheme === 'function') {
const mergedTheme = localTheme(resolvedTheme);
const result = themeId ? (0, _extends2.default)({}, upperTheme, {
[themeId]: mergedTheme
}) : mergedTheme;
// must return a function for the private theme to NOT merge with the upper theme.
// see the test case "use provided theme from a callback" in ThemeProvider.test.js
if (isPrivate) {
return () => result;
}
return result;
}
return themeId ? (0, _extends2.default)({}, upperTheme, {
[themeId]: localTheme
}) : (0, _extends2.default)({}, upperTheme, localTheme);
}, [themeId, upperTheme, localTheme, isPrivate]);
}
/**
* This component makes the `theme` available down the React tree.
* It should preferably be used at **the root of your component tree**.
*
* <ThemeProvider theme={theme}> // existing use case
* <ThemeProvider theme={{ id: theme }}> // theme scoping
*/
function ThemeProvider(props) {
const {
children,
theme: localTheme,
themeId
} = props;
const upperTheme = (0, _useThemeWithoutDefault.default)(EMPTY_THEME);
const upperPrivateTheme = (0, _privateTheming.useTheme)() || EMPTY_THEME;
if (process.env.NODE_ENV !== 'production') {
if (upperTheme === null && typeof localTheme === 'function' || themeId && upperTheme && !upperTheme[themeId] && typeof localTheme === 'function') {
console.error(['MUI: You are providing a theme function prop to the ThemeProvider component:', '<ThemeProvider theme={outerTheme => outerTheme} />', '', 'However, no outer theme is present.', 'Make sure a theme is already injected higher in the React tree ' + 'or provide a theme object.'].join('\n'));
}
}
const engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
const privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
const rtlValue = engineTheme.direction === 'rtl';
const layerOrder = (0, _useLayerOrder.default)(engineTheme);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_privateTheming.ThemeProvider, {
theme: privateTheme,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.ThemeContext.Provider, {
value: engineTheme,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RtlProvider.default, {
value: rtlValue,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DefaultPropsProvider.default, {
value: engineTheme == null ? void 0 : engineTheme.components,
children: [layerOrder, children]
})
})
})
});
}
process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* Your component tree.
*/
children: _propTypes.default.node,
/**
* A theme object. You can provide a function to extend the outer theme.
*/
theme: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]).isRequired,
/**
* The design system's unique id for getting the corresponded theme when there are multiple design systems.
*/
themeId: _propTypes.default.string
} : void 0;
if (process.env.NODE_ENV !== 'production') {
process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = (0, _exactProp.default)(ThemeProvider.propTypes) : void 0;
}
var _default = exports.default = ThemeProvider;
+2
View File
@@ -0,0 +1,2 @@
export { default } from './ThemeProvider';
export * from './ThemeProvider';
+14
View File
@@ -0,0 +1,14 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "default", {
enumerable: true,
get: function () {
return _ThemeProvider.default;
}
});
var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "../esm/ThemeProvider/index.js",
"main": "./index.js",
"types": "./index.d.ts"
}
+8
View File
@@ -0,0 +1,8 @@
import * as React from 'react';
/**
* This hook returns a `GlobalStyles` component that sets the CSS layer order (for server-side rendering).
* Then on client-side, it injects the CSS layer order into the document head to ensure that the layer order is always present first before other Emotion styles.
*/
export default function useLayerOrder(theme: {
modularCssLayers?: boolean | string;
}): React.JSX.Element | null;
+62
View File
@@ -0,0 +1,62 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = useLayerOrder;
var React = _interopRequireWildcard(require("react"));
var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
var _useId = _interopRequireDefault(require("@mui/utils/useId"));
var _GlobalStyles = _interopRequireDefault(require("../GlobalStyles"));
var _useThemeWithoutDefault = _interopRequireDefault(require("../useThemeWithoutDefault"));
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
* This hook returns a `GlobalStyles` component that sets the CSS layer order (for server-side rendering).
* Then on client-side, it injects the CSS layer order into the document head to ensure that the layer order is always present first before other Emotion styles.
*/function useLayerOrder(theme) {
const upperTheme = (0, _useThemeWithoutDefault.default)();
const id = (0, _useId.default)() || '';
const {
modularCssLayers
} = theme;
let layerOrder = 'mui.global, mui.components, mui.theme, mui.custom, mui.sx';
if (!modularCssLayers || upperTheme !== null) {
// skip this hook if upper theme exists.
layerOrder = '';
} else if (typeof modularCssLayers === 'string') {
layerOrder = modularCssLayers.replace(/mui(?!\.)/g, layerOrder);
} else {
layerOrder = `@layer ${layerOrder};`;
}
(0, _useEnhancedEffect.default)(() => {
const head = document.querySelector('head');
if (!head) {
return;
}
const firstChild = head.firstChild;
if (layerOrder) {
var _firstChild$hasAttrib;
// Only insert if first child doesn't have data-mui-layer-order attribute
if (firstChild && (_firstChild$hasAttrib = firstChild.hasAttribute) != null && _firstChild$hasAttrib.call(firstChild, 'data-mui-layer-order') && firstChild.getAttribute('data-mui-layer-order') === id) {
return;
}
const styleElement = document.createElement('style');
styleElement.setAttribute('data-mui-layer-order', id);
styleElement.textContent = layerOrder;
head.prepend(styleElement);
} else {
var _head$querySelector;
(_head$querySelector = head.querySelector(`style[data-mui-layer-order="${id}"]`)) == null || _head$querySelector.remove();
}
}, [layerOrder, id]);
if (!layerOrder) {
return null;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlobalStyles.default, {
styles: layerOrder
});
}
+13
View File
@@ -0,0 +1,13 @@
/**
*
* Demos:
*
* - [Grid (Joy UI)](https://mui.com/joy-ui/react-grid/)
* - [Grid (Material UI)](https://mui.com/material-ui/react-grid/)
*
* API:
*
* - [Grid API](https://mui.com/system/api/grid/)
*/
declare const Grid: import("@mui/types").OverridableComponent<import("./GridProps").GridTypeMap<{}, "div">>;
export default Grid;
+183
View File
@@ -0,0 +1,183 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _createGrid = _interopRequireDefault(require("./createGrid"));
/**
*
* Demos:
*
* - [Grid (Joy UI)](https://mui.com/joy-ui/react-grid/)
* - [Grid (Material UI)](https://mui.com/material-ui/react-grid/)
*
* API:
*
* - [Grid API](https://mui.com/system/api/grid/)
*/
const Grid = (0, _createGrid.default)();
process.env.NODE_ENV !== "production" ? Grid.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content of the component.
*/
children: _propTypes.default.node,
/**
* The number of columns.
* @default 12
*/
columns: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.number, _propTypes.default.object]),
/**
* Defines the horizontal space between the type `item` components.
* It overrides the value of the `spacing` prop.
*/
columnSpacing: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string]),
/**
* If `true`, the component will have the flex *container* behavior.
* You should be wrapping *items* with a *container*.
* @default false
*/
container: _propTypes.default.bool,
/**
* Defines the `flex-direction` style property.
* It is applied for all screen sizes.
* @default 'row'
*/
direction: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), _propTypes.default.object]),
/**
* If `true`, the negative margin and padding are apply only to the top and left sides of the grid.
*/
disableEqualOverflow: _propTypes.default.bool,
/**
* If a number, it sets the number of columns the grid item uses.
* It can't be greater than the total number of columns of the container (12 by default).
* If 'auto', the grid item's width matches its content.
* If false, the prop is ignored.
* If true, the grid item's width grows to use the space available in the grid container.
* The value is applied for the `lg` breakpoint and wider screens if not overridden.
* @default false
*/
lg: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number, _propTypes.default.bool]),
/**
* If a number, it sets the margin-left equals to the number of columns the grid item uses.
* If 'auto', the grid item push itself to the right-end of the container.
* The value is applied for the `lg` breakpoint and wider screens if not overridden.
*/
lgOffset: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
/**
* If a number, it sets the number of columns the grid item uses.
* It can't be greater than the total number of columns of the container (12 by default).
* If 'auto', the grid item's width matches its content.
* If false, the prop is ignored.
* If true, the grid item's width grows to use the space available in the grid container.
* The value is applied for the `md` breakpoint and wider screens if not overridden.
* @default false
*/
md: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number, _propTypes.default.bool]),
/**
* If a number, it sets the margin-left equals to the number of columns the grid item uses.
* If 'auto', the grid item push itself to the right-end of the container.
* The value is applied for the `md` breakpoint and wider screens if not overridden.
*/
mdOffset: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
/**
* Defines the vertical space between the type `item` components.
* It overrides the value of the `spacing` prop.
*/
rowSpacing: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string]),
/**
* If a number, it sets the number of columns the grid item uses.
* It can't be greater than the total number of columns of the container (12 by default).
* If 'auto', the grid item's width matches its content.
* If false, the prop is ignored.
* If true, the grid item's width grows to use the space available in the grid container.
* The value is applied for the `sm` breakpoint and wider screens if not overridden.
* @default false
*/
sm: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number, _propTypes.default.bool]),
/**
* If a number, it sets the margin-left equals to the number of columns the grid item uses.
* If 'auto', the grid item push itself to the right-end of the container.
* The value is applied for the `sm` breakpoint and wider screens if not overridden.
*/
smOffset: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
/**
* Defines the space between the type `item` components.
* It can only be used on a type `container` component.
* @default 0
*/
spacing: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string]),
/**
* @ignore
*/
sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
/**
* @internal
* The level of the grid starts from `0`
* and increases when the grid nests inside another grid regardless of container or item.
*
* ```js
* <Grid> // level 0
* <Grid> // level 1
* <Grid> // level 2
* <Grid> // level 1
* ```
*
* Only consecutive grid is considered nesting.
* A grid container will start at `0` if there are non-Grid element above it.
*
* ```js
* <Grid> // level 0
* <div>
* <Grid> // level 0
* <Grid> // level 1
* ```
*/
unstable_level: _propTypes.default.number,
/**
* Defines the `flex-wrap` style property.
* It's applied for all screen sizes.
* @default 'wrap'
*/
wrap: _propTypes.default.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
/**
* If a number, it sets the number of columns the grid item uses.
* It can't be greater than the total number of columns of the container (12 by default).
* If 'auto', the grid item's width matches its content.
* If false, the prop is ignored.
* If true, the grid item's width grows to use the space available in the grid container.
* The value is applied for the `xl` breakpoint and wider screens if not overridden.
* @default false
*/
xl: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number, _propTypes.default.bool]),
/**
* If a number, it sets the margin-left equals to the number of columns the grid item uses.
* If 'auto', the grid item push itself to the right-end of the container.
* The value is applied for the `xl` breakpoint and wider screens if not overridden.
*/
xlOffset: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
/**
* If a number, it sets the number of columns the grid item uses.
* It can't be greater than the total number of columns of the container (12 by default).
* If 'auto', the grid item's width matches its content.
* If false, the prop is ignored.
* If true, the grid item's width grows to use the space available in the grid container.
* The value is applied for all the screen sizes with the lowest priority.
* @default false
*/
xs: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number, _propTypes.default.bool]),
/**
* If a number, it sets the margin-left equals to the number of columns the grid item uses.
* If 'auto', the grid item push itself to the right-end of the container.
* The value is applied for the `xs` breakpoint and wider screens if not overridden.
*/
xsOffset: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
} : void 0;
var _default = exports.default = Grid;
+185
View File
@@ -0,0 +1,185 @@
import * as React from 'react';
import { OverrideProps, IfEquals } from '@mui/types';
import { SxProps } from '../styleFunctionSx';
import { Theme, Breakpoint, BreakpointOverrides } from '../createTheme';
import { SystemProps } from '../Box';
type ResponsiveStyleValue<T> = T | Array<T | null> | {
[key in Breakpoint]?: T | null;
};
export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
export type GridSpacing = number | string;
export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
export type GridSize = 'auto' | number;
export interface GridDefaultBreakpoints {
/**
* If a number, it sets the number of columns the grid item uses.
* It can't be greater than the total number of columns of the container (12 by default).
* If 'auto', the grid item's width matches its content.
* If false, the prop is ignored.
* If true, the grid item's width grows to use the space available in the grid container.
* The value is applied for the `lg` breakpoint and wider screens if not overridden.
* @default false
*/
lg?: boolean | GridSize;
/**
* If a number, it sets the margin-left equals to the number of columns the grid item uses.
* If 'auto', the grid item push itself to the right-end of the container.
* The value is applied for the `lg` breakpoint and wider screens if not overridden.
*/
lgOffset?: GridSize;
/**
* If a number, it sets the number of columns the grid item uses.
* It can't be greater than the total number of columns of the container (12 by default).
* If 'auto', the grid item's width matches its content.
* If false, the prop is ignored.
* If true, the grid item's width grows to use the space available in the grid container.
* The value is applied for the `md` breakpoint and wider screens if not overridden.
* @default false
*/
md?: boolean | GridSize;
/**
* If a number, it sets the margin-left equals to the number of columns the grid item uses.
* If 'auto', the grid item push itself to the right-end of the container.
* The value is applied for the `md` breakpoint and wider screens if not overridden.
*/
mdOffset?: GridSize;
/**
* If a number, it sets the number of columns the grid item uses.
* It can't be greater than the total number of columns of the container (12 by default).
* If 'auto', the grid item's width matches its content.
* If false, the prop is ignored.
* If true, the grid item's width grows to use the space available in the grid container.
* The value is applied for the `sm` breakpoint and wider screens if not overridden.
* @default false
*/
sm?: boolean | GridSize;
/**
* If a number, it sets the margin-left equals to the number of columns the grid item uses.
* If 'auto', the grid item push itself to the right-end of the container.
* The value is applied for the `sm` breakpoint and wider screens if not overridden.
*/
smOffset?: GridSize;
/**
* If a number, it sets the number of columns the grid item uses.
* It can't be greater than the total number of columns of the container (12 by default).
* If 'auto', the grid item's width matches its content.
* If false, the prop is ignored.
* If true, the grid item's width grows to use the space available in the grid container.
* The value is applied for the `xl` breakpoint and wider screens if not overridden.
* @default false
*/
xl?: boolean | GridSize;
/**
* If a number, it sets the margin-left equals to the number of columns the grid item uses.
* If 'auto', the grid item push itself to the right-end of the container.
* The value is applied for the `xl` breakpoint and wider screens if not overridden.
*/
xlOffset?: GridSize;
/**
* If a number, it sets the number of columns the grid item uses.
* It can't be greater than the total number of columns of the container (12 by default).
* If 'auto', the grid item's width matches its content.
* If false, the prop is ignored.
* If true, the grid item's width grows to use the space available in the grid container.
* The value is applied for all the screen sizes with the lowest priority.
* @default false
*/
xs?: boolean | GridSize;
/**
* If a number, it sets the margin-left equals to the number of columns the grid item uses.
* If 'auto', the grid item push itself to the right-end of the container.
* The value is applied for the `xs` breakpoint and wider screens if not overridden.
*/
xsOffset?: GridSize;
}
type CustomBreakpoints = Partial<Record<Breakpoint, boolean | GridSize> & Record<`${Breakpoint}Offset`, GridSize>>;
interface BreakpointOverridesEmpty {
}
type Breakpoints = IfEquals<BreakpointOverrides, BreakpointOverridesEmpty, GridDefaultBreakpoints, CustomBreakpoints>;
export interface GridBaseProps extends Breakpoints {
/**
* The content of the component.
*/
children?: React.ReactNode;
/**
* The number of columns.
* @default 12
*/
columns?: ResponsiveStyleValue<number>;
/**
* Defines the horizontal space between the type `item` components.
* It overrides the value of the `spacing` prop.
*/
columnSpacing?: ResponsiveStyleValue<GridSpacing>;
/**
* If `true`, the component will have the flex *container* behavior.
* You should be wrapping *items* with a *container*.
* @default false
*/
container?: boolean;
/**
* Defines the `flex-direction` style property.
* It is applied for all screen sizes.
* @default 'row'
*/
direction?: ResponsiveStyleValue<GridDirection>;
/**
* If `true`, the negative margin and padding are apply only to the top and left sides of the grid.
*/
disableEqualOverflow?: boolean;
/**
* @internal
* The level of the grid starts from `0`
* and increases when the grid nests inside another grid regardless of container or item.
*
* ```js
* <Grid> // level 0
* <Grid> // level 1
* <Grid> // level 2
* <Grid> // level 1
* ```
*
* Only consecutive grid is considered nesting.
* A grid container will start at `0` if there are non-Grid element above it.
*
* ```js
* <Grid> // level 0
* <div>
* <Grid> // level 0
* <Grid> // level 1
* ```
*/
unstable_level?: number;
/**
* Defines the vertical space between the type `item` components.
* It overrides the value of the `spacing` prop.
*/
rowSpacing?: ResponsiveStyleValue<GridSpacing>;
/**
* Defines the space between the type `item` components.
* It can only be used on a type `container` component.
* @default 0
*/
spacing?: ResponsiveStyleValue<GridSpacing> | undefined;
/**
* Defines the `flex-wrap` style property.
* It's applied for all screen sizes.
* @default 'wrap'
*/
wrap?: GridWrap;
}
export interface GridOwnerState extends GridBaseProps {
unstable_level: number;
gridSize: Partial<Record<Breakpoint, GridSize | boolean>>;
gridOffset: Partial<Record<Breakpoint, GridSize>>;
}
export interface GridTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
props: AdditionalProps & GridBaseProps & {
sx?: SxProps<Theme>;
} & SystemProps<Theme>;
defaultComponent: DefaultComponent;
}
export type GridProps<RootComponent extends React.ElementType = GridTypeMap['defaultComponent'], AdditionalProps = {
component?: React.ElementType;
}> = OverrideProps<GridTypeMap<AdditionalProps, RootComponent>, RootComponent>;
export {};
+5
View File
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
+11
View File
@@ -0,0 +1,11 @@
import * as React from 'react';
import { OverridableComponent } from '@mui/types';
import { GridTypeMap } from './GridProps';
declare const defaultCreateStyledComponent: import("@mui/styled-engine").CreateStyledComponent<import("../createStyled").MUIStyledCommonProps<any>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}, any>;
declare function useThemePropsDefault<T extends {}>(props: T): T;
export default function createGrid(options?: {
createStyledComponent?: typeof defaultCreateStyledComponent;
useThemeProps?: typeof useThemePropsDefault;
componentName?: string;
}): OverridableComponent<GridTypeMap<{}, "div">>;
export {};
+180
View File
@@ -0,0 +1,180 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = createGrid;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _clsx = _interopRequireDefault(require("clsx"));
var _isMuiElement = _interopRequireDefault(require("@mui/utils/isMuiElement"));
var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
var _styled = _interopRequireDefault(require("../styled"));
var _useThemeProps = _interopRequireDefault(require("../useThemeProps"));
var _useTheme = _interopRequireDefault(require("../useTheme"));
var _styleFunctionSx = require("../styleFunctionSx");
var _createTheme = _interopRequireDefault(require("../createTheme"));
var _gridGenerator = require("./gridGenerator");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["className", "children", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow", "unstable_level"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const defaultTheme = (0, _createTheme.default)();
// widening Theme to any so that the consumer can own the theme structure.
const defaultCreateStyledComponent = (0, _styled.default)('div', {
name: 'MuiGrid',
slot: 'Root',
overridesResolver: (props, styles) => styles.root
});
function useThemePropsDefault(props) {
return (0, _useThemeProps.default)({
props,
name: 'MuiGrid',
defaultTheme
});
}
function createGrid(options = {}) {
const {
// This will allow adding custom styled fn (for example for custom sx style function)
createStyledComponent = defaultCreateStyledComponent,
useThemeProps = useThemePropsDefault,
componentName = 'MuiGrid'
} = options;
const GridOverflowContext = /*#__PURE__*/React.createContext(undefined);
if (process.env.NODE_ENV !== 'production') {
GridOverflowContext.displayName = 'GridOverflowContext';
}
const useUtilityClasses = (ownerState, theme) => {
const {
container,
direction,
spacing,
wrap,
gridSize
} = ownerState;
const slots = {
root: ['root', container && 'container', wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, ...(0, _gridGenerator.generateDirectionClasses)(direction), ...(0, _gridGenerator.generateSizeClassNames)(gridSize), ...(container ? (0, _gridGenerator.generateSpacingClassNames)(spacing, theme.breakpoints.keys[0]) : [])]
};
return (0, _composeClasses.default)(slots, slot => (0, _generateUtilityClass.default)(componentName, slot), {});
};
const GridRoot = createStyledComponent(_gridGenerator.generateGridColumnsStyles, _gridGenerator.generateGridColumnSpacingStyles, _gridGenerator.generateGridRowSpacingStyles, _gridGenerator.generateGridSizeStyles, _gridGenerator.generateGridDirectionStyles, _gridGenerator.generateGridStyles, _gridGenerator.generateGridOffsetStyles);
const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
var _inProps$columns, _inProps$spacing, _ref, _inProps$rowSpacing, _ref2, _inProps$columnSpacin, _ref3, _disableEqualOverflow;
const theme = (0, _useTheme.default)();
const themeProps = useThemeProps(inProps);
const props = (0, _styleFunctionSx.extendSxProp)(themeProps); // `color` type conflicts with html color attribute.
const overflow = React.useContext(GridOverflowContext);
const {
className,
children,
columns: columnsProp = 12,
container = false,
component = 'div',
direction = 'row',
wrap = 'wrap',
spacing: spacingProp = 0,
rowSpacing: rowSpacingProp = spacingProp,
columnSpacing: columnSpacingProp = spacingProp,
disableEqualOverflow: themeDisableEqualOverflow,
unstable_level: level = 0
} = props,
rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
// Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
let disableEqualOverflow = themeDisableEqualOverflow;
if (level && themeDisableEqualOverflow !== undefined) {
disableEqualOverflow = inProps.disableEqualOverflow;
}
// collect breakpoints related props because they can be customized from the theme.
const gridSize = {};
const gridOffset = {};
const other = {};
Object.entries(rest).forEach(([key, val]) => {
if (theme.breakpoints.values[key] !== undefined) {
gridSize[key] = val;
} else if (theme.breakpoints.values[key.replace('Offset', '')] !== undefined) {
gridOffset[key.replace('Offset', '')] = val;
} else {
other[key] = val;
}
});
const columns = (_inProps$columns = inProps.columns) != null ? _inProps$columns : level ? undefined : columnsProp;
const spacing = (_inProps$spacing = inProps.spacing) != null ? _inProps$spacing : level ? undefined : spacingProp;
const rowSpacing = (_ref = (_inProps$rowSpacing = inProps.rowSpacing) != null ? _inProps$rowSpacing : inProps.spacing) != null ? _ref : level ? undefined : rowSpacingProp;
const columnSpacing = (_ref2 = (_inProps$columnSpacin = inProps.columnSpacing) != null ? _inProps$columnSpacin : inProps.spacing) != null ? _ref2 : level ? undefined : columnSpacingProp;
const ownerState = (0, _extends2.default)({}, props, {
level,
columns,
container,
direction,
wrap,
spacing,
rowSpacing,
columnSpacing,
gridSize,
gridOffset,
disableEqualOverflow: (_ref3 = (_disableEqualOverflow = disableEqualOverflow) != null ? _disableEqualOverflow : overflow) != null ? _ref3 : false,
// use context value if exists.
parentDisableEqualOverflow: overflow // for nested grid
});
const classes = useUtilityClasses(ownerState, theme);
let result = /*#__PURE__*/(0, _jsxRuntime.jsx)(GridRoot, (0, _extends2.default)({
ref: ref,
as: component,
ownerState: ownerState,
className: (0, _clsx.default)(classes.root, className)
}, other, {
children: React.Children.map(children, child => {
if ( /*#__PURE__*/React.isValidElement(child) && (0, _isMuiElement.default)(child, ['Grid'])) {
var _unstable_level, _child$props;
return /*#__PURE__*/React.cloneElement(child, {
unstable_level: (_unstable_level = (_child$props = child.props) == null ? void 0 : _child$props.unstable_level) != null ? _unstable_level : level + 1
});
}
return child;
})
}));
if (disableEqualOverflow !== undefined && disableEqualOverflow !== (overflow != null ? overflow : false)) {
// There are 2 possibilities that should wrap with the GridOverflowContext to communicate with the nested grids:
// 1. It is the root grid with `disableEqualOverflow`.
// 2. It is a nested grid with different `disableEqualOverflow` from the context.
result = /*#__PURE__*/(0, _jsxRuntime.jsx)(GridOverflowContext.Provider, {
value: disableEqualOverflow,
children: result
});
}
return result;
});
process.env.NODE_ENV !== "production" ? Grid.propTypes /* remove-proptypes */ = {
children: _propTypes.default.node,
className: _propTypes.default.string,
columns: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.number, _propTypes.default.object]),
columnSpacing: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string]),
component: _propTypes.default.elementType,
container: _propTypes.default.bool,
direction: _propTypes.default.oneOfType([_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), _propTypes.default.object]),
disableEqualOverflow: _propTypes.default.bool,
lg: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number, _propTypes.default.bool]),
lgOffset: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
md: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number, _propTypes.default.bool]),
mdOffset: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
rowSpacing: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string]),
sm: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number, _propTypes.default.bool]),
smOffset: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
spacing: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string]),
sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
wrap: _propTypes.default.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
xl: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number, _propTypes.default.bool]),
xlOffset: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
xs: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number, _propTypes.default.bool]),
xsOffset: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
} : void 0;
// @ts-ignore internal logic for nested grid
Grid.muiName = 'Grid';
return Grid;
}
+20
View File
@@ -0,0 +1,20 @@
export interface GridClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the root element if `container={true}`. */
container: string;
/** Styles applied to the root element if `direction="column"`. */
'direction-xs-column': string;
/** Styles applied to the root element if `direction="column-reverse"`. */
'direction-xs-column-reverse': string;
/** Styles applied to the root element if `direction="row-reverse"`. */
'direction-xs-row-reverse': string;
/** Styles applied to the root element if `wrap="nowrap"`. */
'wrap-xs-nowrap': string;
/** Styles applied to the root element if `wrap="reverse"`. */
'wrap-xs-wrap-reverse': string;
}
export type GridClassKey = keyof GridClasses;
export declare function getGridUtilityClass(slot: string): string;
declare const gridClasses: GridClasses;
export default gridClasses;
+27
View File
@@ -0,0 +1,27 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
exports.getGridUtilityClass = getGridUtilityClass;
var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
function getGridUtilityClass(slot) {
return (0, _generateUtilityClass.default)('MuiGrid', slot);
}
const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'];
const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'];
const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const gridClasses = (0, _generateUtilityClasses.default)('MuiGrid', ['root', 'container', 'item',
// spacings
...SPACINGS.map(spacing => `spacing-xs-${spacing}`),
// direction values
...DIRECTIONS.map(direction => `direction-xs-${direction}`),
// wrap values
...WRAPS.map(wrap => `wrap-xs-${wrap}`),
// grid sizes for all breakpoints
...GRID_SIZES.map(size => `grid-xs-${size}`), ...GRID_SIZES.map(size => `grid-sm-${size}`), ...GRID_SIZES.map(size => `grid-md-${size}`), ...GRID_SIZES.map(size => `grid-lg-${size}`), ...GRID_SIZES.map(size => `grid-xl-${size}`)]);
var _default = exports.default = gridClasses;
+33
View File
@@ -0,0 +1,33 @@
import { Breakpoints } from '../createTheme/createBreakpoints';
import { Spacing } from '../createTheme/createSpacing';
import { ResponsiveStyleValue } from '../styleFunctionSx';
import { GridDirection, GridOwnerState } from './GridProps';
interface Props {
theme: {
breakpoints: Breakpoints;
spacing?: Spacing;
};
ownerState: GridOwnerState & {
parentDisableEqualOverflow?: boolean;
};
}
export declare const generateGridSizeStyles: ({ theme, ownerState }: Props) => {};
export declare const generateGridOffsetStyles: ({ theme, ownerState }: Props) => {};
export declare const generateGridColumnsStyles: ({ theme, ownerState }: Props) => {
[x: string]: string;
'--Grid-columns'?: undefined;
} | {
'--Grid-columns': number;
};
export declare const generateGridRowSpacingStyles: ({ theme, ownerState }: Props) => {
[x: string]: string;
};
export declare const generateGridColumnSpacingStyles: ({ theme, ownerState }: Props) => {
[x: string]: string;
};
export declare const generateGridDirectionStyles: ({ theme, ownerState }: Props) => {};
export declare const generateGridStyles: ({ ownerState }: Props) => {};
export declare const generateSizeClassNames: (gridSize: GridOwnerState["gridSize"]) => string[];
export declare const generateSpacingClassNames: (spacing: GridOwnerState["spacing"], smallestBreakpoint?: string) => string[];
export declare const generateDirectionClasses: (direction: ResponsiveStyleValue<GridDirection> | undefined) => string[];
export {};
+241
View File
@@ -0,0 +1,241 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.generateSpacingClassNames = exports.generateSizeClassNames = exports.generateGridStyles = exports.generateGridSizeStyles = exports.generateGridRowSpacingStyles = exports.generateGridOffsetStyles = exports.generateGridDirectionStyles = exports.generateGridColumnsStyles = exports.generateGridColumnSpacingStyles = exports.generateDirectionClasses = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _traverseBreakpoints = require("./traverseBreakpoints");
function appendLevel(level) {
if (!level) {
return '';
}
return `Level${level}`;
}
function isNestedContainer(ownerState) {
return ownerState.unstable_level > 0 && ownerState.container;
}
function createGetSelfSpacing(ownerState) {
return function getSelfSpacing(axis) {
return `var(--Grid-${axis}Spacing${appendLevel(ownerState.unstable_level)})`;
};
}
function createGetParentSpacing(ownerState) {
return function getParentSpacing(axis) {
if (ownerState.unstable_level === 0) {
return `var(--Grid-${axis}Spacing)`;
}
return `var(--Grid-${axis}Spacing${appendLevel(ownerState.unstable_level - 1)})`;
};
}
function getParentColumns(ownerState) {
if (ownerState.unstable_level === 0) {
return `var(--Grid-columns)`;
}
return `var(--Grid-columns${appendLevel(ownerState.unstable_level - 1)})`;
}
const generateGridSizeStyles = ({
theme,
ownerState
}) => {
const getSelfSpacing = createGetSelfSpacing(ownerState);
const styles = {};
(0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.gridSize, (appendStyle, value) => {
let style = {};
if (value === true) {
style = {
flexBasis: 0,
flexGrow: 1,
maxWidth: '100%'
};
}
if (value === 'auto') {
style = {
flexBasis: 'auto',
flexGrow: 0,
flexShrink: 0,
maxWidth: 'none',
width: 'auto'
};
}
if (typeof value === 'number') {
style = {
flexGrow: 0,
flexBasis: 'auto',
width: `calc(100% * ${value} / ${getParentColumns(ownerState)}${isNestedContainer(ownerState) ? ` + ${getSelfSpacing('column')}` : ''})`
};
}
appendStyle(styles, style);
});
return styles;
};
exports.generateGridSizeStyles = generateGridSizeStyles;
const generateGridOffsetStyles = ({
theme,
ownerState
}) => {
const styles = {};
(0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.gridOffset, (appendStyle, value) => {
let style = {};
if (value === 'auto') {
style = {
marginLeft: 'auto'
};
}
if (typeof value === 'number') {
style = {
marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / ${getParentColumns(ownerState)})`
};
}
appendStyle(styles, style);
});
return styles;
};
exports.generateGridOffsetStyles = generateGridOffsetStyles;
const generateGridColumnsStyles = ({
theme,
ownerState
}) => {
if (!ownerState.container) {
return {};
}
const styles = isNestedContainer(ownerState) ? {
[`--Grid-columns${appendLevel(ownerState.unstable_level)}`]: getParentColumns(ownerState)
} : {
'--Grid-columns': 12
};
(0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.columns, (appendStyle, value) => {
appendStyle(styles, {
[`--Grid-columns${appendLevel(ownerState.unstable_level)}`]: value
});
});
return styles;
};
exports.generateGridColumnsStyles = generateGridColumnsStyles;
const generateGridRowSpacingStyles = ({
theme,
ownerState
}) => {
if (!ownerState.container) {
return {};
}
const getParentSpacing = createGetParentSpacing(ownerState);
const styles = isNestedContainer(ownerState) ? {
// Set the default spacing as its parent spacing.
// It will be overridden if spacing props are provided
[`--Grid-rowSpacing${appendLevel(ownerState.unstable_level)}`]: getParentSpacing('row')
} : {};
(0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
var _theme$spacing;
appendStyle(styles, {
[`--Grid-rowSpacing${appendLevel(ownerState.unstable_level)}`]: typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)
});
});
return styles;
};
exports.generateGridRowSpacingStyles = generateGridRowSpacingStyles;
const generateGridColumnSpacingStyles = ({
theme,
ownerState
}) => {
if (!ownerState.container) {
return {};
}
const getParentSpacing = createGetParentSpacing(ownerState);
const styles = isNestedContainer(ownerState) ? {
// Set the default spacing as its parent spacing.
// It will be overridden if spacing props are provided
[`--Grid-columnSpacing${appendLevel(ownerState.unstable_level)}`]: getParentSpacing('column')
} : {};
(0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
var _theme$spacing2;
appendStyle(styles, {
[`--Grid-columnSpacing${appendLevel(ownerState.unstable_level)}`]: typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)
});
});
return styles;
};
exports.generateGridColumnSpacingStyles = generateGridColumnSpacingStyles;
const generateGridDirectionStyles = ({
theme,
ownerState
}) => {
if (!ownerState.container) {
return {};
}
const styles = {};
(0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.direction, (appendStyle, value) => {
appendStyle(styles, {
flexDirection: value
});
});
return styles;
};
exports.generateGridDirectionStyles = generateGridDirectionStyles;
const generateGridStyles = ({
ownerState
}) => {
const getSelfSpacing = createGetSelfSpacing(ownerState);
const getParentSpacing = createGetParentSpacing(ownerState);
return (0, _extends2.default)({
minWidth: 0,
boxSizing: 'border-box'
}, ownerState.container && (0, _extends2.default)({
display: 'flex',
flexWrap: 'wrap'
}, ownerState.wrap && ownerState.wrap !== 'wrap' && {
flexWrap: ownerState.wrap
}, {
margin: `calc(${getSelfSpacing('row')} / -2) calc(${getSelfSpacing('column')} / -2)`
}, ownerState.disableEqualOverflow && {
margin: `calc(${getSelfSpacing('row')} * -1) 0px 0px calc(${getSelfSpacing('column')} * -1)`
}), (!ownerState.container || isNestedContainer(ownerState)) && (0, _extends2.default)({
padding: `calc(${getParentSpacing('row')} / 2) calc(${getParentSpacing('column')} / 2)`
}, (ownerState.disableEqualOverflow || ownerState.parentDisableEqualOverflow) && {
padding: `${getParentSpacing('row')} 0px 0px ${getParentSpacing('column')}`
}));
};
exports.generateGridStyles = generateGridStyles;
const generateSizeClassNames = gridSize => {
const classNames = [];
Object.entries(gridSize).forEach(([key, value]) => {
if (value !== false && value !== undefined) {
classNames.push(`grid-${key}-${String(value)}`);
}
});
return classNames;
};
exports.generateSizeClassNames = generateSizeClassNames;
const generateSpacingClassNames = (spacing, smallestBreakpoint = 'xs') => {
function isValidSpacing(val) {
if (val === undefined) {
return false;
}
return typeof val === 'string' && !Number.isNaN(Number(val)) || typeof val === 'number' && val > 0;
}
if (isValidSpacing(spacing)) {
return [`spacing-${smallestBreakpoint}-${String(spacing)}`];
}
if (typeof spacing === 'object' && !Array.isArray(spacing)) {
const classNames = [];
Object.entries(spacing).forEach(([key, value]) => {
if (isValidSpacing(value)) {
classNames.push(`spacing-${key}-${String(value)}`);
}
});
return classNames;
}
return [];
};
exports.generateSpacingClassNames = generateSpacingClassNames;
const generateDirectionClasses = direction => {
if (direction === undefined) {
return [];
}
if (typeof direction === 'object') {
return Object.entries(direction).map(([key, value]) => `direction-${key}-${value}`);
}
return [`direction-xs-${String(direction)}`];
};
exports.generateDirectionClasses = generateDirectionClasses;
+6
View File
@@ -0,0 +1,6 @@
export { default } from './Grid';
export { default as createGrid } from './createGrid';
export * from './GridProps';
export { default as gridClasses } from './gridClasses';
export * from './gridClasses';
export { traverseBreakpoints as unstable_traverseBreakpoints } from './traverseBreakpoints';
+65
View File
@@ -0,0 +1,65 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {
createGrid: true,
gridClasses: true,
unstable_traverseBreakpoints: true
};
Object.defineProperty(exports, "createGrid", {
enumerable: true,
get: function () {
return _createGrid.default;
}
});
Object.defineProperty(exports, "default", {
enumerable: true,
get: function () {
return _Grid.default;
}
});
Object.defineProperty(exports, "gridClasses", {
enumerable: true,
get: function () {
return _gridClasses.default;
}
});
Object.defineProperty(exports, "unstable_traverseBreakpoints", {
enumerable: true,
get: function () {
return _traverseBreakpoints.traverseBreakpoints;
}
});
var _Grid = _interopRequireDefault(require("./Grid"));
var _createGrid = _interopRequireDefault(require("./createGrid"));
var _GridProps = require("./GridProps");
Object.keys(_GridProps).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _GridProps[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _GridProps[key];
}
});
});
var _gridClasses = _interopRequireWildcard(require("./gridClasses"));
Object.keys(_gridClasses).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _gridClasses[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _gridClasses[key];
}
});
});
var _traverseBreakpoints = require("./traverseBreakpoints");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "../esm/Unstable_Grid/index.js",
"main": "./index.js",
"types": "./index.d.ts"
}
@@ -0,0 +1,7 @@
import { Breakpoints, Breakpoint } from '../createTheme/createBreakpoints';
export declare const filterBreakpointKeys: (breakpointsKeys: Breakpoint[], responsiveKeys: string[]) => Breakpoint[];
interface Iterator<T> {
(appendStyle: (responsiveStyles: Record<string, any>, style: object) => void, value: T): void;
}
export declare const traverseBreakpoints: <T = unknown>(breakpoints: Breakpoints, responsive: T | T[] | Record<string, any> | undefined, iterator: Iterator<T>) => void;
export {};
+50
View File
@@ -0,0 +1,50 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.traverseBreakpoints = exports.filterBreakpointKeys = void 0;
const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter(key => responsiveKeys.includes(key));
exports.filterBreakpointKeys = filterBreakpointKeys;
const traverseBreakpoints = (breakpoints, responsive, iterator) => {
const smallestBreakpoint = breakpoints.keys[0]; // the keys is sorted from smallest to largest by `createBreakpoints`.
if (Array.isArray(responsive)) {
responsive.forEach((breakpointValue, index) => {
iterator((responsiveStyles, style) => {
if (index <= breakpoints.keys.length - 1) {
if (index === 0) {
Object.assign(responsiveStyles, style);
} else {
responsiveStyles[breakpoints.up(breakpoints.keys[index])] = style;
}
}
}, breakpointValue);
});
} else if (responsive && typeof responsive === 'object') {
// prevent null
// responsive could be a very big object, pick the smallest responsive values
const keys = Object.keys(responsive).length > breakpoints.keys.length ? breakpoints.keys : filterBreakpointKeys(breakpoints.keys, Object.keys(responsive));
keys.forEach(key => {
if (breakpoints.keys.indexOf(key) !== -1) {
// @ts-ignore already checked that responsive is an object
const breakpointValue = responsive[key];
if (breakpointValue !== undefined) {
iterator((responsiveStyles, style) => {
if (smallestBreakpoint === key) {
Object.assign(responsiveStyles, style);
} else {
responsiveStyles[breakpoints.up(key)] = style;
}
}, breakpointValue);
}
}
});
} else if (typeof responsive === 'number' || typeof responsive === 'string') {
iterator((responsiveStyles, style) => {
Object.assign(responsiveStyles, style);
}, responsive);
}
};
exports.traverseBreakpoints = traverseBreakpoints;
+59
View File
@@ -0,0 +1,59 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.borderTopColor = exports.borderTop = exports.borderRightColor = exports.borderRight = exports.borderRadius = exports.borderLeftColor = exports.borderLeft = exports.borderColor = exports.borderBottomColor = exports.borderBottom = exports.border = void 0;
exports.borderTransform = borderTransform;
exports.outlineColor = exports.outline = exports.default = void 0;
var _responsivePropType = _interopRequireDefault(require("./responsivePropType"));
var _style = _interopRequireDefault(require("./style"));
var _compose = _interopRequireDefault(require("./compose"));
var _spacing = require("./spacing");
var _breakpoints = require("./breakpoints");
function borderTransform(value) {
if (typeof value !== 'number') {
return value;
}
return `${value}px solid`;
}
function createBorderStyle(prop, transform) {
return (0, _style.default)({
prop,
themeKey: 'borders',
transform
});
}
const border = exports.border = createBorderStyle('border', borderTransform);
const borderTop = exports.borderTop = createBorderStyle('borderTop', borderTransform);
const borderRight = exports.borderRight = createBorderStyle('borderRight', borderTransform);
const borderBottom = exports.borderBottom = createBorderStyle('borderBottom', borderTransform);
const borderLeft = exports.borderLeft = createBorderStyle('borderLeft', borderTransform);
const borderColor = exports.borderColor = createBorderStyle('borderColor');
const borderTopColor = exports.borderTopColor = createBorderStyle('borderTopColor');
const borderRightColor = exports.borderRightColor = createBorderStyle('borderRightColor');
const borderBottomColor = exports.borderBottomColor = createBorderStyle('borderBottomColor');
const borderLeftColor = exports.borderLeftColor = createBorderStyle('borderLeftColor');
const outline = exports.outline = createBorderStyle('outline', borderTransform);
const outlineColor = exports.outlineColor = createBorderStyle('outlineColor');
// false positive
// eslint-disable-next-line react/function-component-definition
const borderRadius = props => {
if (props.borderRadius !== undefined && props.borderRadius !== null) {
const transformer = (0, _spacing.createUnaryUnit)(props.theme, 'shape.borderRadius', 4, 'borderRadius');
const styleFromPropValue = propValue => ({
borderRadius: (0, _spacing.getValue)(transformer, propValue)
});
return (0, _breakpoints.handleBreakpoints)(props, props.borderRadius, styleFromPropValue);
}
return null;
};
exports.borderRadius = borderRadius;
borderRadius.propTypes = process.env.NODE_ENV !== 'production' ? {
borderRadius: _responsivePropType.default
} : {};
borderRadius.filterProps = ['borderRadius'];
const borders = (0, _compose.default)(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius, outline, outlineColor);
var _default = exports.default = borders;
+21
View File
@@ -0,0 +1,21 @@
import { CSSObject } from '@mui/styled-engine';
import { Breakpoints } from './createTheme/createBreakpoints';
import type { Breakpoint } from './createTheme';
import { ResponsiveStyleValue } from './styleFunctionSx';
export interface ResolveBreakpointValuesOptions<T> {
values: ResponsiveStyleValue<T>;
breakpoints?: Breakpoints['values'];
base?: Record<string, boolean>;
}
export function resolveBreakpointValues<T>(
options: ResolveBreakpointValuesOptions<T>,
): Record<string, T>;
export function mergeBreakpointsInOrder(breakpoints: Breakpoints, styles: CSSObject[]): CSSObject;
export function handleBreakpoints<Props>(
props: Props,
propValue: any,
styleFromPropValue: (value: any, breakpoint?: Breakpoint) => any,
): any;
+166
View File
@@ -0,0 +1,166 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.computeBreakpointsBase = computeBreakpointsBase;
exports.createEmptyBreakpointObject = createEmptyBreakpointObject;
exports.default = void 0;
exports.handleBreakpoints = handleBreakpoints;
exports.mergeBreakpointsInOrder = mergeBreakpointsInOrder;
exports.removeUnusedBreakpoints = removeUnusedBreakpoints;
exports.resolveBreakpointValues = resolveBreakpointValues;
exports.values = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
var _merge = _interopRequireDefault(require("./merge"));
// The breakpoint **start** at this value.
// For instance with the first breakpoint xs: [xs, sm[.
const values = exports.values = {
xs: 0,
// phone
sm: 600,
// tablet
md: 900,
// small laptop
lg: 1200,
// desktop
xl: 1536 // large screen
};
const defaultBreakpoints = {
// Sorted ASC by size. That's important.
// It can't be configured as it's used statically for propTypes.
keys: ['xs', 'sm', 'md', 'lg', 'xl'],
up: key => `@media (min-width:${values[key]}px)`
};
function handleBreakpoints(props, propValue, styleFromPropValue) {
const theme = props.theme || {};
if (Array.isArray(propValue)) {
const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
return propValue.reduce((acc, item, index) => {
acc[themeBreakpoints.up(themeBreakpoints.keys[index])] = styleFromPropValue(propValue[index]);
return acc;
}, {});
}
if (typeof propValue === 'object') {
const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
return Object.keys(propValue).reduce((acc, breakpoint) => {
// key is breakpoint
if (Object.keys(themeBreakpoints.values || values).indexOf(breakpoint) !== -1) {
const mediaKey = themeBreakpoints.up(breakpoint);
acc[mediaKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
} else {
const cssKey = breakpoint;
acc[cssKey] = propValue[cssKey];
}
return acc;
}, {});
}
const output = styleFromPropValue(propValue);
return output;
}
function breakpoints(styleFunction) {
// false positive
// eslint-disable-next-line react/function-component-definition
const newStyleFunction = props => {
const theme = props.theme || {};
const base = styleFunction(props);
const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
const extended = themeBreakpoints.keys.reduce((acc, key) => {
if (props[key]) {
acc = acc || {};
acc[themeBreakpoints.up(key)] = styleFunction((0, _extends2.default)({
theme
}, props[key]));
}
return acc;
}, null);
return (0, _merge.default)(base, extended);
};
newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? (0, _extends2.default)({}, styleFunction.propTypes, {
xs: _propTypes.default.object,
sm: _propTypes.default.object,
md: _propTypes.default.object,
lg: _propTypes.default.object,
xl: _propTypes.default.object
}) : {};
newStyleFunction.filterProps = ['xs', 'sm', 'md', 'lg', 'xl', ...styleFunction.filterProps];
return newStyleFunction;
}
function createEmptyBreakpointObject(breakpointsInput = {}) {
var _breakpointsInput$key;
const breakpointsInOrder = (_breakpointsInput$key = breakpointsInput.keys) == null ? void 0 : _breakpointsInput$key.reduce((acc, key) => {
const breakpointStyleKey = breakpointsInput.up(key);
acc[breakpointStyleKey] = {};
return acc;
}, {});
return breakpointsInOrder || {};
}
function removeUnusedBreakpoints(breakpointKeys, style) {
return breakpointKeys.reduce((acc, key) => {
const breakpointOutput = acc[key];
const isBreakpointUnused = !breakpointOutput || Object.keys(breakpointOutput).length === 0;
if (isBreakpointUnused) {
delete acc[key];
}
return acc;
}, style);
}
function mergeBreakpointsInOrder(breakpointsInput, ...styles) {
const emptyBreakpoints = createEmptyBreakpointObject(breakpointsInput);
const mergedOutput = [emptyBreakpoints, ...styles].reduce((prev, next) => (0, _deepmerge.default)(prev, next), {});
return removeUnusedBreakpoints(Object.keys(emptyBreakpoints), mergedOutput);
}
// compute base for responsive values; e.g.,
// [1,2,3] => {xs: true, sm: true, md: true}
// {xs: 1, sm: 2, md: 3} => {xs: true, sm: true, md: true}
function computeBreakpointsBase(breakpointValues, themeBreakpoints) {
// fixed value
if (typeof breakpointValues !== 'object') {
return {};
}
const base = {};
const breakpointsKeys = Object.keys(themeBreakpoints);
if (Array.isArray(breakpointValues)) {
breakpointsKeys.forEach((breakpoint, i) => {
if (i < breakpointValues.length) {
base[breakpoint] = true;
}
});
} else {
breakpointsKeys.forEach(breakpoint => {
if (breakpointValues[breakpoint] != null) {
base[breakpoint] = true;
}
});
}
return base;
}
function resolveBreakpointValues({
values: breakpointValues,
breakpoints: themeBreakpoints,
base: customBase
}) {
const base = customBase || computeBreakpointsBase(breakpointValues, themeBreakpoints);
const keys = Object.keys(base);
if (keys.length === 0) {
return breakpointValues;
}
let previous;
return keys.reduce((acc, breakpoint, i) => {
if (Array.isArray(breakpointValues)) {
acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
previous = i;
} else if (typeof breakpointValues === 'object') {
acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
previous = breakpoint;
} else {
acc[breakpoint] = breakpointValues;
}
return acc;
}, {});
}
var _default = exports.default = breakpoints;
+30
View File
@@ -0,0 +1,30 @@
/* eslint-disable @typescript-eslint/naming-convention */
export type ColorFormat = 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'color';
export interface ColorObject {
type: ColorFormat;
values: [number, number, number] | [number, number, number, number];
colorSpace?: 'srgb' | 'display-p3' | 'a98-rgb' | 'prophoto-rgb' | 'rec-2020';
}
export function hexToRgb(hex: string): string;
export function rgbToHex(color: string): string;
export function hslToRgb(color: string): string;
export function decomposeColor(color: string): ColorObject;
export function colorChannel(color: string): string;
export function private_safeColorChannel(color: string, warning?: string): string;
export function recomposeColor(color: ColorObject): string;
export function getContrastRatio(foreground: string, background: string): number;
export function getLuminance(color: string): number;
export function emphasize(color: string, coefficient?: number): string;
export function private_safeEmphasize(
color: string,
coefficient?: number,
warning?: string,
): string;
export function alpha(color: string, value: number): string;
export function private_safeAlpha(color: string, value: number, warning?: string): string;
export function darken(color: string, coefficient: number): string;
export function private_safeDarken(color: string, coefficient: number, warning?: string): string;
export function lighten(color: string, coefficient: number): string;
export function private_safeLighten(color: string, coefficient: number, warning?: string): string;
export function blend(background: string, overlay: string, opacity: number, gamma?: number): string;
+372
View File
@@ -0,0 +1,372 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.alpha = alpha;
exports.blend = blend;
exports.colorChannel = void 0;
exports.darken = darken;
exports.decomposeColor = decomposeColor;
exports.emphasize = emphasize;
exports.getContrastRatio = getContrastRatio;
exports.getLuminance = getLuminance;
exports.hexToRgb = hexToRgb;
exports.hslToRgb = hslToRgb;
exports.lighten = lighten;
exports.private_safeAlpha = private_safeAlpha;
exports.private_safeColorChannel = void 0;
exports.private_safeDarken = private_safeDarken;
exports.private_safeEmphasize = private_safeEmphasize;
exports.private_safeLighten = private_safeLighten;
exports.recomposeColor = recomposeColor;
exports.rgbToHex = rgbToHex;
var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
var _clamp = _interopRequireDefault(require("@mui/utils/clamp"));
/* eslint-disable @typescript-eslint/naming-convention */
/**
* Returns a number whose value is limited to the given range.
* @param {number} value The value to be clamped
* @param {number} min The lower boundary of the output range
* @param {number} max The upper boundary of the output range
* @returns {number} A number in the range [min, max]
*/
function clampWrapper(value, min = 0, max = 1) {
if (process.env.NODE_ENV !== 'production') {
if (value < min || value > max) {
console.error(`MUI: The value provided ${value} is out of range [${min}, ${max}].`);
}
}
return (0, _clamp.default)(value, min, max);
}
/**
* Converts a color from CSS hex format to CSS rgb format.
* @param {string} color - Hex color, i.e. #nnn or #nnnnnn
* @returns {string} A CSS rgb color string
*/
function hexToRgb(color) {
color = color.slice(1);
const re = new RegExp(`.{1,${color.length >= 6 ? 2 : 1}}`, 'g');
let colors = color.match(re);
if (colors && colors[0].length === 1) {
colors = colors.map(n => n + n);
}
return colors ? `rgb${colors.length === 4 ? 'a' : ''}(${colors.map((n, index) => {
return index < 3 ? parseInt(n, 16) : Math.round(parseInt(n, 16) / 255 * 1000) / 1000;
}).join(', ')})` : '';
}
function intToHex(int) {
const hex = int.toString(16);
return hex.length === 1 ? `0${hex}` : hex;
}
/**
* Returns an object with the type and values of a color.
*
* Note: Does not support rgb % values.
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
* @returns {object} - A MUI color object: {type: string, values: number[]}
*/
function decomposeColor(color) {
// Idempotent
if (color.type) {
return color;
}
if (color.charAt(0) === '#') {
return decomposeColor(hexToRgb(color));
}
const marker = color.indexOf('(');
const type = color.substring(0, marker);
if (['rgb', 'rgba', 'hsl', 'hsla', 'color'].indexOf(type) === -1) {
throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Unsupported \`${color}\` color.
The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` : (0, _formatMuiErrorMessage2.default)(9, color));
}
let values = color.substring(marker + 1, color.length - 1);
let colorSpace;
if (type === 'color') {
values = values.split(' ');
colorSpace = values.shift();
if (values.length === 4 && values[3].charAt(0) === '/') {
values[3] = values[3].slice(1);
}
if (['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].indexOf(colorSpace) === -1) {
throw new Error(process.env.NODE_ENV !== "production" ? `MUI: unsupported \`${colorSpace}\` color space.
The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.` : (0, _formatMuiErrorMessage2.default)(10, colorSpace));
}
} else {
values = values.split(',');
}
values = values.map(value => parseFloat(value));
return {
type,
values,
colorSpace
};
}
/**
* Returns a channel created from the input color.
*
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
* @returns {string} - The channel for the color, that can be used in rgba or hsla colors
*/
const colorChannel = color => {
const decomposedColor = decomposeColor(color);
return decomposedColor.values.slice(0, 3).map((val, idx) => decomposedColor.type.indexOf('hsl') !== -1 && idx !== 0 ? `${val}%` : val).join(' ');
};
exports.colorChannel = colorChannel;
const private_safeColorChannel = (color, warning) => {
try {
return colorChannel(color);
} catch (error) {
if (warning && process.env.NODE_ENV !== 'production') {
console.warn(warning);
}
return color;
}
};
/**
* Converts a color object with type and values to a string.
* @param {object} color - Decomposed color
* @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla', 'color'
* @param {array} color.values - [n,n,n] or [n,n,n,n]
* @returns {string} A CSS color string
*/
exports.private_safeColorChannel = private_safeColorChannel;
function recomposeColor(color) {
const {
type,
colorSpace
} = color;
let {
values
} = color;
if (type.indexOf('rgb') !== -1) {
// Only convert the first 3 values to int (i.e. not alpha)
values = values.map((n, i) => i < 3 ? parseInt(n, 10) : n);
} else if (type.indexOf('hsl') !== -1) {
values[1] = `${values[1]}%`;
values[2] = `${values[2]}%`;
}
if (type.indexOf('color') !== -1) {
values = `${colorSpace} ${values.join(' ')}`;
} else {
values = `${values.join(', ')}`;
}
return `${type}(${values})`;
}
/**
* Converts a color from CSS rgb format to CSS hex format.
* @param {string} color - RGB color, i.e. rgb(n, n, n)
* @returns {string} A CSS rgb color string, i.e. #nnnnnn
*/
function rgbToHex(color) {
// Idempotent
if (color.indexOf('#') === 0) {
return color;
}
const {
values
} = decomposeColor(color);
return `#${values.map((n, i) => intToHex(i === 3 ? Math.round(255 * n) : n)).join('')}`;
}
/**
* Converts a color from hsl format to rgb format.
* @param {string} color - HSL color values
* @returns {string} rgb color values
*/
function hslToRgb(color) {
color = decomposeColor(color);
const {
values
} = color;
const h = values[0];
const s = values[1] / 100;
const l = values[2] / 100;
const a = s * Math.min(l, 1 - l);
const f = (n, k = (n + h / 30) % 12) => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
let type = 'rgb';
const rgb = [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];
if (color.type === 'hsla') {
type += 'a';
rgb.push(values[3]);
}
return recomposeColor({
type,
values: rgb
});
}
/**
* The relative brightness of any point in a color space,
* normalized to 0 for darkest black and 1 for lightest white.
*
* Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
* @returns {number} The relative brightness of the color in the range 0 - 1
*/
function getLuminance(color) {
color = decomposeColor(color);
let rgb = color.type === 'hsl' || color.type === 'hsla' ? decomposeColor(hslToRgb(color)).values : color.values;
rgb = rgb.map(val => {
if (color.type !== 'color') {
val /= 255; // normalized
}
return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4;
});
// Truncate at 3 digits
return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
}
/**
* Calculates the contrast ratio between two colors.
*
* Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
* @param {string} foreground - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
* @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
* @returns {number} A contrast ratio value in the range 0 - 21.
*/
function getContrastRatio(foreground, background) {
const lumA = getLuminance(foreground);
const lumB = getLuminance(background);
return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
}
/**
* Sets the absolute transparency of a color.
* Any existing alpha values are overwritten.
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
* @param {number} value - value to set the alpha channel to in the range 0 - 1
* @returns {string} A CSS color string. Hex input values are returned as rgb
*/
function alpha(color, value) {
color = decomposeColor(color);
value = clampWrapper(value);
if (color.type === 'rgb' || color.type === 'hsl') {
color.type += 'a';
}
if (color.type === 'color') {
color.values[3] = `/${value}`;
} else {
color.values[3] = value;
}
return recomposeColor(color);
}
function private_safeAlpha(color, value, warning) {
try {
return alpha(color, value);
} catch (error) {
if (warning && process.env.NODE_ENV !== 'production') {
console.warn(warning);
}
return color;
}
}
/**
* Darkens a color.
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
* @param {number} coefficient - multiplier in the range 0 - 1
* @returns {string} A CSS color string. Hex input values are returned as rgb
*/
function darken(color, coefficient) {
color = decomposeColor(color);
coefficient = clampWrapper(coefficient);
if (color.type.indexOf('hsl') !== -1) {
color.values[2] *= 1 - coefficient;
} else if (color.type.indexOf('rgb') !== -1 || color.type.indexOf('color') !== -1) {
for (let i = 0; i < 3; i += 1) {
color.values[i] *= 1 - coefficient;
}
}
return recomposeColor(color);
}
function private_safeDarken(color, coefficient, warning) {
try {
return darken(color, coefficient);
} catch (error) {
if (warning && process.env.NODE_ENV !== 'production') {
console.warn(warning);
}
return color;
}
}
/**
* Lightens a color.
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
* @param {number} coefficient - multiplier in the range 0 - 1
* @returns {string} A CSS color string. Hex input values are returned as rgb
*/
function lighten(color, coefficient) {
color = decomposeColor(color);
coefficient = clampWrapper(coefficient);
if (color.type.indexOf('hsl') !== -1) {
color.values[2] += (100 - color.values[2]) * coefficient;
} else if (color.type.indexOf('rgb') !== -1) {
for (let i = 0; i < 3; i += 1) {
color.values[i] += (255 - color.values[i]) * coefficient;
}
} else if (color.type.indexOf('color') !== -1) {
for (let i = 0; i < 3; i += 1) {
color.values[i] += (1 - color.values[i]) * coefficient;
}
}
return recomposeColor(color);
}
function private_safeLighten(color, coefficient, warning) {
try {
return lighten(color, coefficient);
} catch (error) {
if (warning && process.env.NODE_ENV !== 'production') {
console.warn(warning);
}
return color;
}
}
/**
* Darken or lighten a color, depending on its luminance.
* Light colors are darkened, dark colors are lightened.
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
* @param {number} coefficient=0.15 - multiplier in the range 0 - 1
* @returns {string} A CSS color string. Hex input values are returned as rgb
*/
function emphasize(color, coefficient = 0.15) {
return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
}
function private_safeEmphasize(color, coefficient, warning) {
try {
return emphasize(color, coefficient);
} catch (error) {
if (warning && process.env.NODE_ENV !== 'production') {
console.warn(warning);
}
return color;
}
}
/**
* Blend a transparent overlay color with a background color, resulting in a single
* RGB color.
* @param {string} background - CSS color
* @param {string} overlay - CSS color
* @param {number} opacity - Opacity multiplier in the range 0 - 1
* @param {number} [gamma=1.0] - Gamma correction factor. For gamma-correct blending, 2.2 is usual.
*/
function blend(background, overlay, opacity, gamma = 1.0) {
const blendChannel = (b, o) => Math.round((b ** (1 / gamma) * (1 - opacity) + o ** (1 / gamma) * opacity) ** gamma);
const backgroundColor = decomposeColor(background);
const overlayColor = decomposeColor(overlay);
const rgb = [blendChannel(backgroundColor.values[0], overlayColor.values[0]), blendChannel(backgroundColor.values[1], overlayColor.values[1]), blendChannel(backgroundColor.values[2], overlayColor.values[2])];
return recomposeColor({
type: 'rgb',
values: rgb
});
}
+31
View File
@@ -0,0 +1,31 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _merge = _interopRequireDefault(require("./merge"));
function compose(...styles) {
const handlers = styles.reduce((acc, style) => {
style.filterProps.forEach(prop => {
acc[prop] = style;
});
return acc;
}, {});
// false positive
// eslint-disable-next-line react/function-component-definition
const fn = props => {
return Object.keys(props).reduce((acc, prop) => {
if (handlers[prop]) {
return (0, _merge.default)(acc, handlers[prop](props));
}
return acc;
}, {});
};
fn.propTypes = process.env.NODE_ENV !== 'production' ? styles.reduce((acc, style) => Object.assign(acc, style.propTypes), {}) : {};
fn.filterProps = styles.reduce((acc, style) => acc.concat(style.filterProps), []);
return fn;
}
var _default = exports.default = compose;
+13
View File
@@ -0,0 +1,13 @@
import { OverridableComponent } from '@mui/types';
import { BoxTypeMap } from './Box';
import { Theme as SystemTheme } from './createTheme';
export default function createBox<
T extends object = SystemTheme,
AdditionalProps extends Record<string, unknown> = {},
>(options?: {
themeId?: string;
defaultTheme: T;
defaultClassName?: string;
generateClassName?: (componentName: string) => string;
}): OverridableComponent<BoxTypeMap<AdditionalProps, 'div', T>>;
+46
View File
@@ -0,0 +1,46 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = createBox;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _styledEngine = _interopRequireDefault(require("@mui/styled-engine"));
var _styleFunctionSx = _interopRequireWildcard(require("./styleFunctionSx"));
var _useTheme = _interopRequireDefault(require("./useTheme"));
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["className", "component"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function createBox(options = {}) {
const {
themeId,
defaultTheme,
defaultClassName = 'MuiBox-root',
generateClassName
} = options;
const BoxRoot = (0, _styledEngine.default)('div', {
shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
})(_styleFunctionSx.default);
const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
const theme = (0, _useTheme.default)(defaultTheme);
const _extendSxProp = (0, _styleFunctionSx.extendSxProp)(inProps),
{
className,
component = 'div'
} = _extendSxProp,
other = (0, _objectWithoutPropertiesLoose2.default)(_extendSxProp, _excluded);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(BoxRoot, (0, _extends2.default)({
as: component,
ref: ref,
className: (0, _clsx.default)(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
theme: themeId ? theme[themeId] || theme : theme
}, other));
});
return Box;
}
+39
View File
@@ -0,0 +1,39 @@
import * as React from 'react';
import {
CreateMUIStyled as CreateMUIStyledStyledEngine,
CSSInterpolation,
} from '@mui/styled-engine';
import styleFunctionSx, { SxProps } from './styleFunctionSx';
import { Theme as DefaultTheme } from './createTheme';
export function shouldForwardProp(propName: PropertyKey): boolean;
export interface MUIStyledCommonProps<Theme extends object = DefaultTheme> {
theme?: Theme;
as?: React.ElementType;
sx?: SxProps<Theme>;
}
export interface MuiStyledOptions {
name?: string;
slot?: string;
// The difference between Interpolation and CSSInterpolation is that the former supports functions based on props
// If we want to support props in the overrides, we will need to change the CSSInterpolation to Interpolation<Props>
overridesResolver?: (props: any, styles: Record<string, CSSInterpolation>) => CSSInterpolation;
skipVariantsResolver?: boolean;
skipSx?: boolean;
}
export type CreateMUIStyled<Theme extends object = DefaultTheme> = CreateMUIStyledStyledEngine<
MUIStyledCommonProps<Theme>,
MuiStyledOptions,
Theme
>;
export default function createStyled<Theme extends object = DefaultTheme>(options?: {
themeId?: string;
defaultTheme?: Theme;
rootShouldForwardProp?: (prop: PropertyKey) => boolean;
slotShouldForwardProp?: (prop: PropertyKey) => boolean;
styleFunctionSx?: typeof styleFunctionSx;
}): CreateMUIStyled<Theme>;
+263
View File
@@ -0,0 +1,263 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = createStyled;
exports.shouldForwardProp = shouldForwardProp;
exports.systemDefaultTheme = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _styledEngine = _interopRequireWildcard(require("@mui/styled-engine"));
var _deepmerge = require("@mui/utils/deepmerge");
var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
var _getDisplayName = _interopRequireDefault(require("@mui/utils/getDisplayName"));
var _createTheme = _interopRequireDefault(require("./createTheme"));
var _styleFunctionSx = _interopRequireDefault(require("./styleFunctionSx"));
const _excluded = ["ownerState"],
_excluded2 = ["variants"],
_excluded3 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
/* eslint-disable no-underscore-dangle */
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function isEmpty(obj) {
return Object.keys(obj).length === 0;
}
// https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
function isStringTag(tag) {
return typeof tag === 'string' &&
// 96 is one less than the char code
// for "a" so this is checking that
// it's a lowercase character
tag.charCodeAt(0) > 96;
}
// Update /system/styled/#api in case if this changes
function shouldForwardProp(prop) {
return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
}
function shallowLayer(serialized, layerName) {
if (layerName && serialized && typeof serialized === 'object' && serialized.styles && !serialized.styles.startsWith('@layer') // only add the layer if it is not already there.
) {
serialized.styles = `@layer ${layerName}{${String(serialized.styles)}}`;
}
return serialized;
}
const systemDefaultTheme = exports.systemDefaultTheme = (0, _createTheme.default)();
const lowercaseFirstLetter = string => {
if (!string) {
return string;
}
return string.charAt(0).toLowerCase() + string.slice(1);
};
function resolveTheme({
defaultTheme,
theme,
themeId
}) {
return isEmpty(theme) ? defaultTheme : theme[themeId] || theme;
}
function defaultOverridesResolver(slot) {
if (!slot) {
return null;
}
return (props, styles) => styles[slot];
}
function processStyleArg(callableStyle, _ref, layerName) {
let {
ownerState
} = _ref,
props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
const resolvedStylesArg = typeof callableStyle === 'function' ? callableStyle((0, _extends2.default)({
ownerState
}, props)) : callableStyle;
if (Array.isArray(resolvedStylesArg)) {
return resolvedStylesArg.flatMap(resolvedStyle => processStyleArg(resolvedStyle, (0, _extends2.default)({
ownerState
}, props), layerName));
}
if (!!resolvedStylesArg && typeof resolvedStylesArg === 'object' && Array.isArray(resolvedStylesArg.variants)) {
const {
variants = []
} = resolvedStylesArg,
otherStyles = (0, _objectWithoutPropertiesLoose2.default)(resolvedStylesArg, _excluded2);
let result = otherStyles;
variants.forEach(variant => {
let isMatch = true;
if (typeof variant.props === 'function') {
isMatch = variant.props((0, _extends2.default)({
ownerState
}, props, ownerState));
} else {
Object.keys(variant.props).forEach(key => {
if ((ownerState == null ? void 0 : ownerState[key]) !== variant.props[key] && props[key] !== variant.props[key]) {
isMatch = false;
}
});
}
if (isMatch) {
if (!Array.isArray(result)) {
result = [result];
}
const variantStyle = typeof variant.style === 'function' ? variant.style((0, _extends2.default)({
ownerState
}, props, ownerState)) : variant.style;
result.push(layerName ? shallowLayer((0, _styledEngine.internal_serializeStyles)(variantStyle), layerName) : variantStyle);
}
});
return result;
}
return layerName ? shallowLayer((0, _styledEngine.internal_serializeStyles)(resolvedStylesArg), layerName) : resolvedStylesArg;
}
function createStyled(input = {}) {
const {
themeId,
defaultTheme = systemDefaultTheme,
rootShouldForwardProp = shouldForwardProp,
slotShouldForwardProp = shouldForwardProp
} = input;
const systemSx = props => {
return (0, _styleFunctionSx.default)((0, _extends2.default)({}, props, {
theme: resolveTheme((0, _extends2.default)({}, props, {
defaultTheme,
themeId
}))
}));
};
systemSx.__mui_systemSx = true;
return (tag, inputOptions = {}) => {
// Filter out the `sx` style function from the previous styled component to prevent unnecessary styles generated by the composite components.
(0, _styledEngine.internal_processStyles)(tag, styles => styles.filter(style => !(style != null && style.__mui_systemSx)));
const {
name: componentName,
slot: componentSlot,
skipVariantsResolver: inputSkipVariantsResolver,
skipSx: inputSkipSx,
// TODO v6: remove `lowercaseFirstLetter()` in the next major release
// For more details: https://github.com/mui/material-ui/pull/37908
overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
} = inputOptions,
options = (0, _objectWithoutPropertiesLoose2.default)(inputOptions, _excluded3);
const layerName = componentName && componentName.startsWith('Mui') || !!componentSlot ? 'components' : 'custom';
// if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
// TODO v6: remove `Root` in the next major release
// For more details: https://github.com/mui/material-ui/pull/37908
componentSlot && componentSlot !== 'Root' && componentSlot !== 'root' || false;
const skipSx = inputSkipSx || false;
let label;
if (process.env.NODE_ENV !== 'production') {
if (componentName) {
// TODO v6: remove `lowercaseFirstLetter()` in the next major release
// For more details: https://github.com/mui/material-ui/pull/37908
label = `${componentName}-${lowercaseFirstLetter(componentSlot || 'Root')}`;
}
}
let shouldForwardPropOption = shouldForwardProp;
// TODO v6: remove `Root` in the next major release
// For more details: https://github.com/mui/material-ui/pull/37908
if (componentSlot === 'Root' || componentSlot === 'root') {
shouldForwardPropOption = rootShouldForwardProp;
} else if (componentSlot) {
// any other slot specified
shouldForwardPropOption = slotShouldForwardProp;
} else if (isStringTag(tag)) {
// for string (html) tag, preserve the behavior in emotion & styled-components.
shouldForwardPropOption = undefined;
}
const defaultStyledResolver = (0, _styledEngine.default)(tag, (0, _extends2.default)({
shouldForwardProp: shouldForwardPropOption,
label
}, options));
const transformStyleArg = stylesArg => {
// On the server Emotion doesn't use React.forwardRef for creating components, so the created
// component stays as a function. This condition makes sure that we do not interpolate functions
// which are basically components used as a selectors.
if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg || (0, _deepmerge.isPlainObject)(stylesArg)) {
return props => {
const theme = resolveTheme({
theme: props.theme,
defaultTheme,
themeId
});
return processStyleArg(stylesArg, (0, _extends2.default)({}, props, {
theme
}), theme.modularCssLayers ? layerName : undefined);
};
}
return stylesArg;
};
const muiStyledResolver = (styleArg, ...expressions) => {
let transformedStyleArg = transformStyleArg(styleArg);
const expressionsWithDefaultTheme = expressions ? expressions.map(transformStyleArg) : [];
if (componentName && overridesResolver) {
expressionsWithDefaultTheme.push(props => {
const theme = resolveTheme((0, _extends2.default)({}, props, {
defaultTheme,
themeId
}));
if (!theme.components || !theme.components[componentName] || !theme.components[componentName].styleOverrides) {
return null;
}
const styleOverrides = theme.components[componentName].styleOverrides;
const resolvedStyleOverrides = {};
// TODO: v7 remove iteration and use `resolveStyleArg(styleOverrides[slot])` directly
Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, (0, _extends2.default)({}, props, {
theme
}), theme.modularCssLayers ? 'theme' : undefined);
});
return overridesResolver(props, resolvedStyleOverrides);
});
}
if (componentName && !skipVariantsResolver) {
expressionsWithDefaultTheme.push(props => {
var _theme$components;
const theme = resolveTheme((0, _extends2.default)({}, props, {
defaultTheme,
themeId
}));
const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[componentName]) == null ? void 0 : _theme$components.variants;
return processStyleArg({
variants: themeVariants
}, (0, _extends2.default)({}, props, {
theme
}), theme.modularCssLayers ? 'theme' : undefined);
});
}
if (!skipSx) {
expressionsWithDefaultTheme.push(systemSx);
}
const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {
const placeholders = new Array(numOfCustomFnsApplied).fill('');
// If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles.
transformedStyleArg = [...styleArg, ...placeholders];
transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
}
const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme);
if (process.env.NODE_ENV !== 'production') {
let displayName;
if (componentName) {
displayName = `${componentName}${(0, _capitalize.default)(componentSlot || '')}`;
}
if (displayName === undefined) {
displayName = `Styled(${(0, _getDisplayName.default)(tag)})`;
}
Component.displayName = displayName;
}
if (tag.muiName) {
Component.muiName = tag.muiName;
}
return Component;
};
if (defaultStyledResolver.withConfig) {
muiStyledResolver.withConfig = defaultStyledResolver.withConfig;
}
return muiStyledResolver;
};
}
+63
View File
@@ -0,0 +1,63 @@
import { CSSObject } from '@mui/styled-engine';
export interface ApplyStyles<K extends string> {
(key: K, styles: CSSObject): CSSObject;
}
/**
* A universal utility to style components with multiple color modes. Always use it from the theme object.
* It works with:
* - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
* - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
* - Zero-runtime engine
*
* Tips: Use an array over object spread and place `theme.applyStyles()` last.
*
* ✅ [{ background: '#e5e5e5' }, theme.applyStyles('dark', { background: '#1c1c1c' })]
*
* 🚫 { background: '#e5e5e5', ...theme.applyStyles('dark', { background: '#1c1c1c' })}
*
* @example
* 1. using with `styled`:
* ```jsx
* const Component = styled('div')(({ theme }) => [
* { background: '#e5e5e5' },
* theme.applyStyles('dark', {
* background: '#1c1c1c',
* color: '#fff',
* }),
* ]);
* ```
*
* @example
* 2. using with `sx` prop:
* ```jsx
* <Box sx={theme => [
* { background: '#e5e5e5' },
* theme.applyStyles('dark', {
* background: '#1c1c1c',
* color: '#fff',
* }),
* ]}
* />
* ```
*
* @example
* 3. theming a component:
* ```jsx
* extendTheme({
* components: {
* MuiButton: {
* styleOverrides: {
* root: ({ theme }) => [
* { background: '#e5e5e5' },
* theme.applyStyles('dark', {
* background: '#1c1c1c',
* color: '#fff',
* }),
* ],
* },
* }
* }
* })
*```
*/
export default function applyStyles<K extends string>(key: K, styles: CSSObject): CSSObject;
+80
View File
@@ -0,0 +1,80 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = applyStyles;
/**
* A universal utility to style components with multiple color modes. Always use it from the theme object.
* It works with:
* - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
* - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
* - Zero-runtime engine
*
* Tips: Use an array over object spread and place `theme.applyStyles()` last.
*
* ✅ [{ background: '#e5e5e5' }, theme.applyStyles('dark', { background: '#1c1c1c' })]
*
* 🚫 { background: '#e5e5e5', ...theme.applyStyles('dark', { background: '#1c1c1c' })}
*
* @example
* 1. using with `styled`:
* ```jsx
* const Component = styled('div')(({ theme }) => [
* { background: '#e5e5e5' },
* theme.applyStyles('dark', {
* background: '#1c1c1c',
* color: '#fff',
* }),
* ]);
* ```
*
* @example
* 2. using with `sx` prop:
* ```jsx
* <Box sx={theme => [
* { background: '#e5e5e5' },
* theme.applyStyles('dark', {
* background: '#1c1c1c',
* color: '#fff',
* }),
* ]}
* />
* ```
*
* @example
* 3. theming a component:
* ```jsx
* extendTheme({
* components: {
* MuiButton: {
* styleOverrides: {
* root: ({ theme }) => [
* { background: '#e5e5e5' },
* theme.applyStyles('dark', {
* background: '#1c1c1c',
* color: '#fff',
* }),
* ],
* },
* }
* }
* })
*```
*/
function applyStyles(key, styles) {
// @ts-expect-error this is 'any' type
const theme = this;
if (theme.vars && typeof theme.getColorSchemeSelector === 'function') {
// If CssVarsProvider is used as a provider,
// returns '* :where([data-mui-color-scheme="light|dark"]) &'
const selector = theme.getColorSchemeSelector(key).replace(/(\[[^\]]+\])/, '*:where($1)');
return {
[selector]: styles
};
}
if (theme.palette.mode === key) {
return styles;
}
return {};
}
+85
View File
@@ -0,0 +1,85 @@
import { OverridableStringUnion } from '@mui/types';
export interface BreakpointOverrides {}
export type Breakpoint = OverridableStringUnion<
'xs' | 'sm' | 'md' | 'lg' | 'xl',
BreakpointOverrides
>;
export const keys: Breakpoint[];
// Keep in sync with docs/src/pages/customization/breakpoints/breakpoints.md
// #default-branch-switch
export interface Breakpoints {
keys: Breakpoint[];
/**
* Each breakpoint (a key) matches with a fixed screen width (a value).
* @default {
* // extra-small
* xs: 0,
* // small
* sm: 600,
* // medium
* md: 900,
* // large
* lg: 1200,
* // extra-large
* xl: 1536,
* }
*/
values: { [key in Breakpoint]: number };
/**
* @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
* @returns A media query string ready to be used with most styling solutions, which matches screen widths greater than the screen size given by the breakpoint key (inclusive).
* @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-up-key-media-query)
*/
up: (key: Breakpoint | number) => string;
/**
* @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
* @returns A media query string ready to be used with most styling solutions, which matches screen widths less than the screen size given by the breakpoint key (exclusive).
* @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-down-key-media-query)
*/
down: (key: Breakpoint | number) => string;
/**
* @param start - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
* @param end - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
* @returns A media query string ready to be used with most styling solutions, which matches screen widths greater than
* the screen size given by the breakpoint key in the first argument (inclusive) and less than the screen size given by the breakpoint key in the second argument (exclusive).
* @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-between-start-end-media-query)
*/
between: (start: Breakpoint | number, end: Breakpoint | number) => string;
/**
* @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
* @returns A media query string ready to be used with most styling solutions, which matches screen widths starting from
* the screen size given by the breakpoint key (inclusive) and stopping at the screen size given by the next breakpoint key (exclusive).
* @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-only-key-media-query)
*/
only: (key: Breakpoint) => string;
/**
* @param key - A breakpoint key (`xs`, `sm`, etc.).
* @returns A media query string ready to be used with most styling solutions, which matches screen widths stopping at
* the screen size given by the breakpoint key (exclusive) and starting at the screen size given by the next breakpoint key (inclusive).
*/
not: (key: Breakpoint) => string;
/**
* The unit used for the breakpoint's values.
* @default 'px'
*/
unit?: string | undefined;
}
export interface BreakpointsOptions extends Partial<Breakpoints> {
/**
* The increment divided by 100 used to implement exclusive breakpoints.
* For example, `step: 5` means that `down(500)` will result in `'(max-width: 499.95px)'`.
* @default 5
*/
step?: number | undefined;
/**
* The unit used for the breakpoint's values.
* @default 'px'
*/
unit?: string | undefined;
}
export default function createBreakpoints(options: BreakpointsOptions): Breakpoints;
+90
View File
@@ -0,0 +1,90 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.breakpointKeys = void 0;
exports.default = createBreakpoints;
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
const _excluded = ["values", "unit", "step"];
// Sorted ASC by size. That's important.
// It can't be configured as it's used statically for propTypes.
const breakpointKeys = exports.breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
const sortBreakpointsValues = values => {
const breakpointsAsArray = Object.keys(values).map(key => ({
key,
val: values[key]
})) || [];
// Sort in ascending order
breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
return breakpointsAsArray.reduce((acc, obj) => {
return (0, _extends2.default)({}, acc, {
[obj.key]: obj.val
});
}, {});
};
// Keep in mind that @media is inclusive by the CSS specification.
function createBreakpoints(breakpoints) {
const {
// The breakpoint **start** at this value.
// For instance with the first breakpoint xs: [xs, sm).
values = {
xs: 0,
// phone
sm: 600,
// tablet
md: 900,
// small laptop
lg: 1200,
// desktop
xl: 1536 // large screen
},
unit = 'px',
step = 5
} = breakpoints,
other = (0, _objectWithoutPropertiesLoose2.default)(breakpoints, _excluded);
const sortedValues = sortBreakpointsValues(values);
const keys = Object.keys(sortedValues);
function up(key) {
const value = typeof values[key] === 'number' ? values[key] : key;
return `@media (min-width:${value}${unit})`;
}
function down(key) {
const value = typeof values[key] === 'number' ? values[key] : key;
return `@media (max-width:${value - step / 100}${unit})`;
}
function between(start, end) {
const endIndex = keys.indexOf(end);
return `@media (min-width:${typeof values[start] === 'number' ? values[start] : start}${unit}) and ` + `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100}${unit})`;
}
function only(key) {
if (keys.indexOf(key) + 1 < keys.length) {
return between(key, keys[keys.indexOf(key) + 1]);
}
return up(key);
}
function not(key) {
// handle first and last key separately, for better readability
const keyIndex = keys.indexOf(key);
if (keyIndex === 0) {
return up(keys[1]);
}
if (keyIndex === keys.length - 1) {
return down(keys[keyIndex]);
}
return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
}
return (0, _extends2.default)({
keys,
values: sortedValues,
up,
down,
between,
only,
not,
unit
}, other);
}
+10
View File
@@ -0,0 +1,10 @@
export type SpacingOptions = number | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;
export type SpacingArgument = number | string;
export interface Spacing {
(): string;
(value: SpacingArgument): string;
(topBottom: SpacingArgument, rightLeft: SpacingArgument): string;
(top: SpacingArgument, rightLeft: SpacingArgument, bottom: SpacingArgument): string;
(top: SpacingArgument, right: SpacingArgument, bottom: SpacingArgument, left: SpacingArgument): string;
}
export default function createSpacing(spacingInput?: SpacingOptions): Spacing;
+37
View File
@@ -0,0 +1,37 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = createSpacing;
var _spacing = require("../spacing");
// The different signatures imply different meaning for their arguments that can't be expressed structurally.
// We express the difference with variable names.
function createSpacing(spacingInput = 8) {
// Already transformed.
if (spacingInput.mui) {
return spacingInput;
}
// Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
// Smaller components, such as icons, can align to a 4dp grid.
// https://m2.material.io/design/layout/understanding-layout.html
const transform = (0, _spacing.createUnarySpacing)({
spacing: spacingInput
});
const spacing = (...argsInput) => {
if (process.env.NODE_ENV !== 'production') {
if (!(argsInput.length <= 4)) {
console.error(`MUI: Too many arguments provided, expected between 0 and 4, got ${argsInput.length}`);
}
}
const args = argsInput.length === 0 ? [1] : argsInput;
return args.map(argument => {
const output = transform(argument);
return typeof output === 'number' ? `${output}px` : output;
}).join(' ');
};
spacing.mui = true;
return spacing;
}
+50
View File
@@ -0,0 +1,50 @@
import { CSSObject } from '@mui/styled-engine';
import { Breakpoints, BreakpointsOptions } from './createBreakpoints';
import { Shape, ShapeOptions } from './shape';
import { Spacing, SpacingOptions } from './createSpacing';
import { SxConfig, SxProps } from '../styleFunctionSx';
import { ApplyStyles } from './applyStyles';
export { Breakpoint, BreakpointOverrides } from './createBreakpoints';
export type Direction = 'ltr' | 'rtl';
export interface ThemeOptions {
shape?: ShapeOptions;
breakpoints?: BreakpointsOptions;
direction?: Direction;
mixins?: unknown;
palette?: Record<string, any>;
shadows?: unknown;
spacing?: SpacingOptions;
transitions?: unknown;
components?: Record<string, any>;
typography?: unknown;
zIndex?: Record<string, number>;
unstable_sxConfig?: SxConfig;
}
export interface Theme {
shape: Shape;
breakpoints: Breakpoints;
direction: Direction;
palette: Record<string, any> & { mode: 'light' | 'dark' };
shadows?: unknown;
spacing: Spacing;
transitions?: unknown;
components?: Record<string, any>;
mixins?: unknown;
typography?: unknown;
zIndex?: unknown;
applyStyles: ApplyStyles<'light' | 'dark'>;
unstable_sxConfig: SxConfig;
unstable_sx: (props: SxProps<Theme>) => CSSObject;
}
/**
* Generate a theme base on the options received.
* @param options Takes an incomplete theme object and adds the missing parts.
* @param args Deep merge the arguments with the about to be returned theme.
* @returns A complete, ready-to-use theme object.
*/
export default function createTheme(options?: ThemeOptions, ...args: object[]): Theme;
+50
View File
@@ -0,0 +1,50 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
var _createBreakpoints = _interopRequireDefault(require("./createBreakpoints"));
var _shape = _interopRequireDefault(require("./shape"));
var _createSpacing = _interopRequireDefault(require("./createSpacing"));
var _styleFunctionSx = _interopRequireDefault(require("../styleFunctionSx/styleFunctionSx"));
var _defaultSxConfig = _interopRequireDefault(require("../styleFunctionSx/defaultSxConfig"));
var _applyStyles = _interopRequireDefault(require("./applyStyles"));
const _excluded = ["breakpoints", "palette", "spacing", "shape"];
function createTheme(options = {}, ...args) {
const {
breakpoints: breakpointsInput = {},
palette: paletteInput = {},
spacing: spacingInput,
shape: shapeInput = {}
} = options,
other = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
const breakpoints = (0, _createBreakpoints.default)(breakpointsInput);
const spacing = (0, _createSpacing.default)(spacingInput);
let muiTheme = (0, _deepmerge.default)({
breakpoints,
direction: 'ltr',
components: {},
// Inject component definitions.
palette: (0, _extends2.default)({
mode: 'light'
}, paletteInput),
spacing,
shape: (0, _extends2.default)({}, _shape.default, shapeInput)
}, other);
muiTheme.applyStyles = _applyStyles.default;
muiTheme = args.reduce((acc, argument) => (0, _deepmerge.default)(acc, argument), muiTheme);
muiTheme.unstable_sxConfig = (0, _extends2.default)({}, _defaultSxConfig.default, other == null ? void 0 : other.unstable_sxConfig);
muiTheme.unstable_sx = function sx(props) {
return (0, _styleFunctionSx.default)({
sx: props,
theme: this
});
};
return muiTheme;
}
var _default = exports.default = createTheme;
+4
View File
@@ -0,0 +1,4 @@
export { default } from './createTheme';
export * from './createTheme';
export { default as unstable_applyStyles } from './applyStyles';
export * from './applyStyles';
+27
View File
@@ -0,0 +1,27 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "default", {
enumerable: true,
get: function () {
return _createTheme.default;
}
});
Object.defineProperty(exports, "private_createBreakpoints", {
enumerable: true,
get: function () {
return _createBreakpoints.default;
}
});
Object.defineProperty(exports, "unstable_applyStyles", {
enumerable: true,
get: function () {
return _applyStyles.default;
}
});
var _createTheme = _interopRequireDefault(require("./createTheme"));
var _createBreakpoints = _interopRequireDefault(require("./createBreakpoints"));
var _applyStyles = _interopRequireDefault(require("./applyStyles"));
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "../esm/createTheme/index.js",
"main": "./index.js",
"types": "./index.d.ts"
}
+9
View File
@@ -0,0 +1,9 @@
export interface Shape {
borderRadius: number;
}
export type ShapeOptions = Partial<Shape>;
declare const shape: Shape;
export default shape;
+10
View File
@@ -0,0 +1,10 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
const shape = {
borderRadius: 4
};
var _default = exports.default = shape;
+94
View File
@@ -0,0 +1,94 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.rowGap = exports.gridTemplateRows = exports.gridTemplateColumns = exports.gridTemplateAreas = exports.gridRow = exports.gridColumn = exports.gridAutoRows = exports.gridAutoFlow = exports.gridAutoColumns = exports.gridArea = exports.gap = exports.default = exports.columnGap = void 0;
var _style = _interopRequireDefault(require("./style"));
var _compose = _interopRequireDefault(require("./compose"));
var _spacing = require("./spacing");
var _breakpoints = require("./breakpoints");
var _responsivePropType = _interopRequireDefault(require("./responsivePropType"));
// false positive
// eslint-disable-next-line react/function-component-definition
const gap = props => {
if (props.gap !== undefined && props.gap !== null) {
const transformer = (0, _spacing.createUnaryUnit)(props.theme, 'spacing', 8, 'gap');
const styleFromPropValue = propValue => ({
gap: (0, _spacing.getValue)(transformer, propValue)
});
return (0, _breakpoints.handleBreakpoints)(props, props.gap, styleFromPropValue);
}
return null;
};
exports.gap = gap;
gap.propTypes = process.env.NODE_ENV !== 'production' ? {
gap: _responsivePropType.default
} : {};
gap.filterProps = ['gap'];
// false positive
// eslint-disable-next-line react/function-component-definition
const columnGap = props => {
if (props.columnGap !== undefined && props.columnGap !== null) {
const transformer = (0, _spacing.createUnaryUnit)(props.theme, 'spacing', 8, 'columnGap');
const styleFromPropValue = propValue => ({
columnGap: (0, _spacing.getValue)(transformer, propValue)
});
return (0, _breakpoints.handleBreakpoints)(props, props.columnGap, styleFromPropValue);
}
return null;
};
exports.columnGap = columnGap;
columnGap.propTypes = process.env.NODE_ENV !== 'production' ? {
columnGap: _responsivePropType.default
} : {};
columnGap.filterProps = ['columnGap'];
// false positive
// eslint-disable-next-line react/function-component-definition
const rowGap = props => {
if (props.rowGap !== undefined && props.rowGap !== null) {
const transformer = (0, _spacing.createUnaryUnit)(props.theme, 'spacing', 8, 'rowGap');
const styleFromPropValue = propValue => ({
rowGap: (0, _spacing.getValue)(transformer, propValue)
});
return (0, _breakpoints.handleBreakpoints)(props, props.rowGap, styleFromPropValue);
}
return null;
};
exports.rowGap = rowGap;
rowGap.propTypes = process.env.NODE_ENV !== 'production' ? {
rowGap: _responsivePropType.default
} : {};
rowGap.filterProps = ['rowGap'];
const gridColumn = exports.gridColumn = (0, _style.default)({
prop: 'gridColumn'
});
const gridRow = exports.gridRow = (0, _style.default)({
prop: 'gridRow'
});
const gridAutoFlow = exports.gridAutoFlow = (0, _style.default)({
prop: 'gridAutoFlow'
});
const gridAutoColumns = exports.gridAutoColumns = (0, _style.default)({
prop: 'gridAutoColumns'
});
const gridAutoRows = exports.gridAutoRows = (0, _style.default)({
prop: 'gridAutoRows'
});
const gridTemplateColumns = exports.gridTemplateColumns = (0, _style.default)({
prop: 'gridTemplateColumns'
});
const gridTemplateRows = exports.gridTemplateRows = (0, _style.default)({
prop: 'gridTemplateRows'
});
const gridTemplateAreas = exports.gridTemplateAreas = (0, _style.default)({
prop: 'gridTemplateAreas'
});
const gridArea = exports.gridArea = (0, _style.default)({
prop: 'gridArea'
});
const grid = (0, _compose.default)(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
var _default = exports.default = grid;
+157
View File
@@ -0,0 +1,157 @@
import * as React from 'react';
import InitColorSchemeScript from '../InitColorSchemeScript';
import { Mode, Result } from './useCurrentColorScheme';
export interface ColorSchemeContextValue<SupportedColorScheme extends string>
extends Result<SupportedColorScheme> {
allColorSchemes: SupportedColorScheme[];
}
export interface CssVarsProviderConfig<ColorScheme extends string> {
/**
* DOM attribute for applying color scheme
* @default 'data-color-scheme'
*/
attribute?: string;
/**
* localStorage key used to store application `mode`
* @default 'mode'
*/
modeStorageKey?: string;
/**
* localStorage key used to store `colorScheme`
* @default 'color-scheme'
*/
colorSchemeStorageKey?: string;
/**
* Design system default color scheme.
* - provides string if the design system has one default color scheme (either light or dark)
* - provides object if the design system has default light & dark color schemes
*/
defaultColorScheme: ColorScheme | { light: ColorScheme; dark: ColorScheme };
/**
* Design system default mode
* @default 'light'
*/
defaultMode?: Mode;
/**
* Disable CSS transitions when switching between modes or color schemes
* @default false
*/
disableTransitionOnChange?: boolean;
}
type Identify<I extends string | undefined, T> = I extends string ? T | { [k in I]: T } : T;
export interface CreateCssVarsProviderResult<
ColorScheme extends string,
Identifier extends string | undefined = undefined,
> {
CssVarsProvider: (
props: React.PropsWithChildren<
Partial<CssVarsProviderConfig<ColorScheme>> & {
theme?: Identify<
Identifier,
{
cssVarPrefix?: string;
colorSchemes: Record<ColorScheme, Record<string, any>>;
}
>;
/**
* The document used to perform `disableTransitionOnChange` feature
* @default document
*/
documentNode?: Document | null;
/**
* The node used to attach the color-scheme attribute
* @default document
*/
colorSchemeNode?: Element | null;
/**
* The CSS selector for attaching the generated custom properties
* @default ':root'
*/
colorSchemeSelector?: string;
/**
* The window that attaches the 'storage' event listener
* @default window
*/
storageWindow?: Window | null;
/**
* If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
*/
disableNestedContext?: boolean;
/**
* If `true`, the style sheet won't be generated.
*
* This is useful for controlling nested CssVarsProvider behavior.
* @default false
*/
disableStyleSheetGeneration?: boolean;
}
>,
) => React.JSX.Element;
useColorScheme: () => ColorSchemeContextValue<ColorScheme>;
getInitColorSchemeScript: typeof InitColorSchemeScript;
}
export default function createCssVarsProvider<
ColorScheme extends string,
Identifier extends string | undefined = undefined,
>(
options: CssVarsProviderConfig<ColorScheme> & {
/**
* The design system's unique id for getting the corresponded theme when there are multiple design systems.
*/
themeId?: Identifier;
/**
* Design system default theme
*
* - The structure inside `theme.colorSchemes[colorScheme]` should be exactly the same in all color schemes because
* those object of the color scheme will be used when the color scheme is active.
*
* {
* colorSchemes: {
* light: { ...lightColorSchemeValues },
* dark: { ...darkColorSchemeValues }
* }
* }
*
* - If colorScheme is 'light', the `lightColorSchemeValues` will be merged to theme as `{ ...theme, ...lightColorSchemeValues }`
* likewise, if colorScheme is 'dark', the `darkColorSchemeValues` will be merged to theme as `{ ...theme, ...darkColorSchemeValues }`
*
* - If the theme contains the same keys as the color scheme, their values will be merged.
* Ex. {
* colorSchemes: {
* light: { palette: { primary: { ... } } },
* dark: { palette: { primary: { ...} } }
* },
* palette: { shared: { ... } }
* }
*
* becomes: {
* colorSchemes: { ... },
* palette: { shared: { ... }, primary: { ... } }
* }
*/
theme: any;
/**
* A function to be called after the CSS variables are attached. The result of this function will be the final theme pass to ThemeProvider.
*
* The example usage is the variant generation in Joy. We need to combine the token from user-input and the default theme first, then generate
* variants from those tokens.
*/
resolveTheme?: (theme: any) => any; // the type is any because it depends on the design system.
/**
* @internal
* A function that returns a list of variables that will be excluded from the `colorSchemeSelector` (:root by default)
*
* Some variables are intended to be used in a specific color scheme only. They should be excluded when the default mode is set to the color scheme.
* This is introduced to fix https://github.com/mui/material-ui/issues/34084
*/
excludeVariablesFromRoot?: (cssVarPrefix: string) => string[];
},
): CreateCssVarsProviderResult<ColorScheme, Identifier>;
// disable automatic export
export {};
+355
View File
@@ -0,0 +1,355 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DISABLE_CSS_TRANSITION = void 0;
exports.default = createCssVarsProvider;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
var _styledEngine = require("@mui/styled-engine");
var _privateTheming = require("@mui/private-theming");
var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
var _InitColorSchemeScript = _interopRequireWildcard(require("../InitColorSchemeScript/InitColorSchemeScript"));
var _useCurrentColorScheme = _interopRequireDefault(require("./useCurrentColorScheme"));
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const DISABLE_CSS_TRANSITION = exports.DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
function createCssVarsProvider(options) {
const {
themeId,
/**
* This `theme` object needs to follow a certain structure to
* be used correctly by the finel `CssVarsProvider`. It should have a
* `colorSchemes` key with the light and dark (and any other) palette.
* It should also ideally have a vars object created using `prepareCssVars`.
*/
theme: defaultTheme = {},
attribute: defaultAttribute = _InitColorSchemeScript.DEFAULT_ATTRIBUTE,
modeStorageKey: defaultModeStorageKey = _InitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
colorSchemeStorageKey: defaultColorSchemeStorageKey = _InitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
defaultMode: designSystemMode = 'light',
defaultColorScheme: designSystemColorScheme,
disableTransitionOnChange: designSystemTransitionOnChange = false,
resolveTheme,
excludeVariablesFromRoot
} = options;
if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
}
const ColorSchemeContext = /*#__PURE__*/React.createContext(undefined);
if (process.env.NODE_ENV !== 'production') {
ColorSchemeContext.displayName = 'ColorSchemeContext';
}
const useColorScheme = () => {
const value = React.useContext(ColorSchemeContext);
if (!value) {
throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`useColorScheme\` must be called under <CssVarsProvider />` : (0, _formatMuiErrorMessage2.default)(19));
}
return value;
};
function CssVarsProvider(props) {
const {
children,
theme: themeProp = defaultTheme,
modeStorageKey = defaultModeStorageKey,
colorSchemeStorageKey = defaultColorSchemeStorageKey,
attribute = defaultAttribute,
defaultMode = designSystemMode,
defaultColorScheme = designSystemColorScheme,
disableTransitionOnChange = designSystemTransitionOnChange,
storageWindow = typeof window === 'undefined' ? undefined : window,
documentNode = typeof document === 'undefined' ? undefined : document,
colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
colorSchemeSelector = ':root',
disableNestedContext = false,
disableStyleSheetGeneration = false
} = props;
const hasMounted = React.useRef(false);
const upperTheme = (0, _privateTheming.useTheme)();
const ctx = React.useContext(ColorSchemeContext);
const nested = !!ctx && !disableNestedContext;
const scopedTheme = themeProp[themeId];
const _ref = scopedTheme || themeProp,
{
colorSchemes = {},
components = {},
generateCssVars = () => ({
vars: {},
css: {}
}),
cssVarPrefix
} = _ref,
restThemeProp = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
const allColorSchemes = Object.keys(colorSchemes);
const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
// 1. Get the data about the `mode`, `colorScheme`, and setter functions.
const {
mode: stateMode,
setMode,
systemMode,
lightColorScheme,
darkColorScheme,
colorScheme: stateColorScheme,
setColorScheme
} = (0, _useCurrentColorScheme.default)({
supportedColorSchemes: allColorSchemes,
defaultLightColorScheme,
defaultDarkColorScheme,
modeStorageKey,
colorSchemeStorageKey,
defaultMode,
storageWindow
});
let mode = stateMode;
let colorScheme = stateColorScheme;
if (nested) {
mode = ctx.mode;
colorScheme = ctx.colorScheme;
}
const calculatedMode = (() => {
if (mode) {
return mode;
}
// This scope occurs on the server
if (defaultMode === 'system') {
return designSystemMode;
}
return defaultMode;
})();
const calculatedColorScheme = (() => {
if (!colorScheme) {
// This scope occurs on the server
if (calculatedMode === 'dark') {
return defaultDarkColorScheme;
}
// use light color scheme, if default mode is 'light' | 'system'
return defaultLightColorScheme;
}
return colorScheme;
})();
// 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)
const {
css: rootCss,
vars: rootVars
} = generateCssVars();
// 3. Start composing the theme object
const theme = (0, _extends2.default)({}, restThemeProp, {
components,
colorSchemes,
cssVarPrefix,
vars: rootVars,
getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
});
// 4. Create color CSS variables and store them in objects (to be generated in stylesheets in the final step)
// The default color scheme stylesheet is constructed to have the least CSS specificity.
// The other color schemes uses selector, default as data attribute, to increase the CSS specificity so that they can override the default color scheme stylesheet.
const defaultColorSchemeStyleSheet = {};
const otherColorSchemesStyleSheet = {};
Object.entries(colorSchemes).forEach(([key, scheme]) => {
const {
css,
vars
} = generateCssVars(key);
theme.vars = (0, _deepmerge.default)(theme.vars, vars);
if (key === calculatedColorScheme) {
// 4.1 Merge the selected color scheme to the theme
Object.keys(scheme).forEach(schemeKey => {
if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') {
// shallow merge the 1st level structure of the theme.
theme[schemeKey] = (0, _extends2.default)({}, theme[schemeKey], scheme[schemeKey]);
} else {
theme[schemeKey] = scheme[schemeKey];
}
});
if (theme.palette) {
theme.palette.colorScheme = key;
}
}
const resolvedDefaultColorScheme = (() => {
if (typeof defaultColorScheme === 'string') {
return defaultColorScheme;
}
if (defaultMode === 'dark') {
return defaultColorScheme.dark;
}
return defaultColorScheme.light;
})();
if (key === resolvedDefaultColorScheme) {
if (excludeVariablesFromRoot) {
const excludedVariables = {};
excludeVariablesFromRoot(cssVarPrefix).forEach(cssVar => {
excludedVariables[cssVar] = css[cssVar];
delete css[cssVar];
});
defaultColorSchemeStyleSheet[`[${attribute}="${key}"]`] = excludedVariables;
}
defaultColorSchemeStyleSheet[`${colorSchemeSelector}, [${attribute}="${key}"]`] = css;
} else {
otherColorSchemesStyleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
}
});
theme.vars = (0, _deepmerge.default)(theme.vars, rootVars);
// 5. Declaring effects
// 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
React.useEffect(() => {
if (colorScheme && colorSchemeNode) {
// attaches attribute to <html> because the css variables are attached to :root (html)
colorSchemeNode.setAttribute(attribute, colorScheme);
}
}, [colorScheme, attribute, colorSchemeNode]);
// 5.2 Remove the CSS transition when color scheme changes to create instant experience.
// credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
React.useEffect(() => {
let timer;
if (disableTransitionOnChange && hasMounted.current && documentNode) {
const css = documentNode.createElement('style');
css.appendChild(documentNode.createTextNode(DISABLE_CSS_TRANSITION));
documentNode.head.appendChild(css);
// Force browser repaint
(() => window.getComputedStyle(documentNode.body))();
timer = setTimeout(() => {
documentNode.head.removeChild(css);
}, 1);
}
return () => {
clearTimeout(timer);
};
}, [colorScheme, disableTransitionOnChange, documentNode]);
React.useEffect(() => {
hasMounted.current = true;
return () => {
hasMounted.current = false;
};
}, []);
const contextValue = React.useMemo(() => ({
allColorSchemes,
colorScheme,
darkColorScheme,
lightColorScheme,
mode,
setColorScheme,
setMode,
systemMode
}), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
let shouldGenerateStyleSheet = true;
if (disableStyleSheetGeneration || nested && (upperTheme == null ? void 0 : upperTheme.cssVarPrefix) === cssVarPrefix) {
shouldGenerateStyleSheet = false;
}
const element = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
children: [shouldGenerateStyleSheet && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
styles: {
[colorSchemeSelector]: rootCss
}
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
styles: defaultColorSchemeStyleSheet
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
styles: otherColorSchemesStyleSheet
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProvider.default, {
themeId: scopedTheme ? themeId : undefined,
theme: resolveTheme ? resolveTheme(theme) : theme,
children: children
})]
});
if (nested) {
return element;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorSchemeContext.Provider, {
value: contextValue,
children: element
});
}
process.env.NODE_ENV !== "production" ? CssVarsProvider.propTypes = {
/**
* The body attribute name to attach colorScheme.
*/
attribute: _propTypes.default.string,
/**
* The component tree.
*/
children: _propTypes.default.node,
/**
* The node used to attach the color-scheme attribute
*/
colorSchemeNode: _propTypes.default.any,
/**
* The CSS selector for attaching the generated custom properties
*/
colorSchemeSelector: _propTypes.default.string,
/**
* localStorage key used to store `colorScheme`
*/
colorSchemeStorageKey: _propTypes.default.string,
/**
* The initial color scheme used.
*/
defaultColorScheme: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
/**
* The initial mode used.
*/
defaultMode: _propTypes.default.string,
/**
* If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
*/
disableNestedContext: _propTypes.default.bool,
/**
* If `true`, the style sheet won't be generated.
*
* This is useful for controlling nested CssVarsProvider behavior.
*/
disableStyleSheetGeneration: _propTypes.default.bool,
/**
* Disable CSS transitions when switching between modes or color schemes.
*/
disableTransitionOnChange: _propTypes.default.bool,
/**
* The document to attach the attribute to.
*/
documentNode: _propTypes.default.any,
/**
* The key in the local storage used to store current color scheme.
*/
modeStorageKey: _propTypes.default.string,
/**
* The window that attaches the 'storage' event listener.
* @default window
*/
storageWindow: _propTypes.default.any,
/**
* The calculated theme object that will be passed through context.
*/
theme: _propTypes.default.object
} : void 0;
const defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
const defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
const getInitColorSchemeScript = params => (0, _InitColorSchemeScript.default)((0, _extends2.default)({
attribute: defaultAttribute,
colorSchemeStorageKey: defaultColorSchemeStorageKey,
defaultMode: designSystemMode,
defaultLightColorScheme,
defaultDarkColorScheme,
modeStorageKey: defaultModeStorageKey
}, params));
return {
CssVarsProvider,
useColorScheme,
getInitColorSchemeScript
};
}
+16
View File
@@ -0,0 +1,16 @@
import { DefaultCssVarsTheme } from './prepareCssVars';
interface Theme extends DefaultCssVarsTheme {
cssVarPrefix?: string;
shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
}
declare function createCssVarsTheme<T extends Theme, ThemeVars extends Record<string, any>>(theme: T): T & {
vars: ThemeVars;
generateCssVars: (colorScheme?: string) => {
css: {
[x: string]: string | number;
};
vars: ThemeVars;
selector: any;
};
};
export default createCssVarsTheme;

Some files were not shown because too many files have changed in this diff Show More