Initial commit: Wallet App - FastAPI backend with React frontend for personal finance tracking

This commit is contained in:
RemTools
2026-09-04 08:37:14 +00:00 Unverified
commit d7b52f24d2
39572 changed files with 1617122 additions and 0 deletions
+223
View File
@@ -0,0 +1,223 @@
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;
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").default;
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").default;
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';
+35
View File
@@ -0,0 +1,35 @@
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
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];
}
});
});
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "../esm/Box/index.js",
"main": "./index.js",
"types": "./index.d.ts"
}
+2564
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").default;
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").default;
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 {};
+155
View File
@@ -0,0 +1,155 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = createContainer;
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 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
}) => ({
width: '100%',
marginLeft: 'auto',
boxSizing: 'border-box',
marginRight: 'auto',
...(!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
}) => ({
// @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('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',
classes: classesProp,
...other
} = props;
const ownerState = {
...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, {
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';
+35
View File
@@ -0,0 +1,35 @@
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
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];
}
});
});
+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,72 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
exports.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");
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';
+19
View File
@@ -0,0 +1,19 @@
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
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"));
+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;
+68
View File
@@ -0,0 +1,68 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
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 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';
+25
View File
@@ -0,0 +1,25 @@
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
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];
}
});
});
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "../esm/GlobalStyles/index.js",
"main": "./index.js",
"types": "./index.d.ts"
}
+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;
+112
View File
@@ -0,0 +1,112 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
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]),
/**
* Defines the offset value for the type `item` components.
*/
offset: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])), _propTypes.default.object]),
/**
* 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]),
/**
* Defines the size of the the type `item` components.
*/
size: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.string, _propTypes.default.bool, _propTypes.default.number, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool, _propTypes.default.number])), _propTypes.default.object]),
/**
* 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. Nesting is defined as a container Grid being a direct
* child of a container Grid.
*
* ```js
* <Grid container> // level 0
* <Grid container> // level 1
* <Grid container> // level 2
* ```
*
* Only consecutive grid is considered nesting. A grid container will start at
* `0` if there are non-Grid container element above it.
*
* ```js
* <Grid container> // level 0
* <div>
* <Grid container> // level 0
* ```
*
* ```js
* <Grid container> // level 0
* <Grid>
* <Grid container> // level 0
* ```
*/
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'])
} : void 0;
var _default = exports.default = Grid;
+105
View File
@@ -0,0 +1,105 @@
import * as React from 'react';
import { OverrideProps, PartiallyRequired } from '@mui/types';
import { SxProps } from '../styleFunctionSx';
import { Theme, Breakpoint } 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' | 'grow' | number | false;
export type GridOffset = 'auto' | number;
export interface GridBaseProps {
/**
* 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>;
/**
* Defines the offset value for the type `item` components.
*/
offset?: ResponsiveStyleValue<GridOffset>;
/**
* @internal
* The level of the grid starts from `0` and increases when the grid nests
* inside another grid. Nesting is defined as a container Grid being a direct
* child of a container Grid.
*
* ```js
* <Grid container> // level 0
* <Grid container> // level 1
* <Grid container> // level 2
* ```
*
* Only consecutive grid is considered nesting. A grid container will start at
* `0` if there are non-Grid container element above it.
*
* ```js
* <Grid container> // level 0
* <div>
* <Grid container> // level 0
* ```
*
* ```js
* <Grid container> // level 0
* <Grid>
* <Grid container> // level 0
* ```
*/
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 size of the the type `item` components.
*/
size?: ResponsiveStyleValue<GridSize>;
/**
* 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 type GridOwnerState = PartiallyRequired<GridBaseProps, 'size' | 'offset' | 'unstable_level'>;
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
});
+13
View File
@@ -0,0 +1,13 @@
import * as React from 'react';
import { OverridableComponent } from '@mui/types';
import useThemeSystem from '../useTheme';
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;
useTheme?: typeof useThemeSystem;
componentName?: string;
}): OverridableComponent<GridTypeMap<{}, "div">>;
export {};
+161
View File
@@ -0,0 +1,161 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = createGrid;
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 _deleteLegacyGridProps = _interopRequireDefault(require("./deleteLegacyGridProps"));
var _jsxRuntime = require("react/jsx-runtime");
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,
useTheme = _useTheme.default,
componentName = 'MuiGrid'
} = options;
const useUtilityClasses = (ownerState, theme) => {
const {
container,
direction,
spacing,
wrap,
size
} = ownerState;
const slots = {
root: ['root', container && 'container', wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, ...(0, _gridGenerator.generateDirectionClasses)(direction), ...(0, _gridGenerator.generateSizeClassNames)(size), ...(container ? (0, _gridGenerator.generateSpacingClassNames)(spacing, theme.breakpoints.keys[0]) : [])]
};
return (0, _composeClasses.default)(slots, slot => (0, _generateUtilityClass.default)(componentName, slot), {});
};
function parseResponsiveProp(propValue, breakpoints, shouldUseValue = () => true) {
const parsedProp = {};
if (propValue === null) {
return parsedProp;
}
if (Array.isArray(propValue)) {
propValue.forEach((value, index) => {
if (value !== null && shouldUseValue(value) && breakpoints.keys[index]) {
parsedProp[breakpoints.keys[index]] = value;
}
});
} else if (typeof propValue === 'object') {
Object.keys(propValue).forEach(key => {
const value = propValue[key];
if (value !== null && value !== undefined && shouldUseValue(value)) {
parsedProp[key] = value;
}
});
} else {
parsedProp[breakpoints.keys[0]] = propValue;
}
return parsedProp;
}
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) {
const theme = useTheme();
const themeProps = useThemeProps(inProps);
const props = (0, _styleFunctionSx.extendSxProp)(themeProps); // `color` type conflicts with html color attribute.
// TODO v8: Remove when removing the legacy Grid component
(0, _deleteLegacyGridProps.default)(props, theme.breakpoints);
const {
className,
children,
columns: columnsProp = 12,
container = false,
component = 'div',
direction = 'row',
wrap = 'wrap',
size: sizeProp = {},
offset: offsetProp = {},
spacing: spacingProp = 0,
rowSpacing: rowSpacingProp = spacingProp,
columnSpacing: columnSpacingProp = spacingProp,
unstable_level: level = 0,
...other
} = props;
const size = parseResponsiveProp(sizeProp, theme.breakpoints, val => val !== false);
const offset = parseResponsiveProp(offsetProp, theme.breakpoints);
const columns = inProps.columns ?? (level ? undefined : columnsProp);
const spacing = inProps.spacing ?? (level ? undefined : spacingProp);
const rowSpacing = inProps.rowSpacing ?? inProps.spacing ?? (level ? undefined : rowSpacingProp);
const columnSpacing = inProps.columnSpacing ?? inProps.spacing ?? (level ? undefined : columnSpacingProp);
const ownerState = {
...props,
level,
columns,
container,
direction,
wrap,
spacing,
rowSpacing,
columnSpacing,
size,
offset
};
const classes = useUtilityClasses(ownerState, theme);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridRoot, {
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']) && container && child.props.container) {
return /*#__PURE__*/React.cloneElement(child, {
unstable_level: child.props?.unstable_level ?? level + 1
});
}
return child;
})
});
});
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]),
offset: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])), _propTypes.default.object]),
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]),
size: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool, _propTypes.default.number, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool, _propTypes.default.number])), _propTypes.default.object]),
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'])
} : void 0;
// @ts-ignore internal logic for nested grid
Grid.muiName = 'Grid';
return Grid;
}
+11
View File
@@ -0,0 +1,11 @@
import { Breakpoint, Breakpoints } from '../createTheme';
/**
* Deletes the legacy Grid component props from the `props` object and warns once about them if found.
*
* @param {object} props The props object to remove the legacy Grid props from.
* @param {Breakpoints} breakpoints The breakpoints object.
*/
export default function deleteLegacyGridProps(props: {
item?: boolean;
zeroMinWidth?: boolean;
} & Partial<Record<Breakpoint, 'auto' | number | boolean>> & Record<string, any>, breakpoints: Breakpoints): void;
+47
View File
@@ -0,0 +1,47 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = deleteLegacyGridProps;
const getLegacyGridWarning = propName => {
if (['item', 'zeroMinWidth'].includes(propName)) {
return `The \`${propName}\` prop has been removed and is no longer necessary. You can safely remove it.`;
}
// #host-reference
return `The \`${propName}\` prop has been removed. See https://v6.mui.com/material-ui/migration/upgrade-to-grid-v2/ for migration instructions.`;
};
const warnedAboutProps = [];
/**
* Deletes the legacy Grid component props from the `props` object and warns once about them if found.
*
* @param {object} props The props object to remove the legacy Grid props from.
* @param {Breakpoints} breakpoints The breakpoints object.
*/
function deleteLegacyGridProps(props, breakpoints) {
const propsToWarn = [];
if (props.item !== undefined) {
delete props.item;
propsToWarn.push('item');
}
if (props.zeroMinWidth !== undefined) {
delete props.zeroMinWidth;
propsToWarn.push('zeroMinWidth');
}
breakpoints.keys.forEach(breakpoint => {
if (props[breakpoint] !== undefined) {
propsToWarn.push(breakpoint);
delete props[breakpoint];
}
});
if (process.env.NODE_ENV !== 'production') {
propsToWarn.forEach(prop => {
if (!warnedAboutProps.includes(prop)) {
warnedAboutProps.push(prop);
console.warn(`MUI Grid2: ${getLegacyGridWarning(prop)}\n`);
}
});
}
}
+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").default;
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', 'grow', 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;
+22
View File
@@ -0,0 +1,22 @@
import { Breakpoints } from '../createBreakpoints/createBreakpoints';
import { Spacing } from '../createTheme/createSpacing';
import { ResponsiveStyleValue } from '../styleFunctionSx';
import { GridDirection, GridOwnerState } from './GridProps';
interface Props {
theme: {
breakpoints: Breakpoints;
spacing?: Spacing;
};
ownerState: GridOwnerState;
}
export declare const generateGridSizeStyles: ({ theme, ownerState }: Props) => {};
export declare const generateGridOffsetStyles: ({ theme, ownerState }: Props) => {};
export declare const generateGridColumnsStyles: ({ theme, ownerState }: Props) => {};
export declare const generateGridRowSpacingStyles: ({ theme, ownerState }: Props) => {};
export declare const generateGridColumnSpacingStyles: ({ theme, ownerState }: Props) => {};
export declare const generateGridDirectionStyles: ({ theme, ownerState }: Props) => {};
export declare const generateGridStyles: ({ ownerState }: Props) => {};
export declare const generateSizeClassNames: (size: GridOwnerState["size"]) => string[];
export declare const generateSpacingClassNames: (spacing: GridOwnerState["spacing"], smallestBreakpoint?: string) => string[];
export declare const generateDirectionClasses: (direction: ResponsiveStyleValue<GridDirection> | undefined) => string[];
export {};
+209
View File
@@ -0,0 +1,209 @@
"use strict";
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 _traverseBreakpoints = require("./traverseBreakpoints");
function getSelfSpacingVar(axis) {
return `--Grid-${axis}Spacing`;
}
function getParentSpacingVar(axis) {
return `--Grid-parent-${axis}Spacing`;
}
const selfColumnsVar = '--Grid-columns';
const parentColumnsVar = '--Grid-parent-columns';
const generateGridSizeStyles = ({
theme,
ownerState
}) => {
const styles = {};
(0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.size, (appendStyle, value) => {
let style = {};
if (value === 'grow') {
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} / var(${parentColumnsVar}) - (var(${parentColumnsVar}) - ${value}) * (var(${getParentSpacingVar('column')}) / var(${parentColumnsVar})))`
};
}
appendStyle(styles, style);
});
return styles;
};
exports.generateGridSizeStyles = generateGridSizeStyles;
const generateGridOffsetStyles = ({
theme,
ownerState
}) => {
const styles = {};
(0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.offset, (appendStyle, value) => {
let style = {};
if (value === 'auto') {
style = {
marginLeft: 'auto'
};
}
if (typeof value === 'number') {
style = {
marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / var(${parentColumnsVar}) + var(${getParentSpacingVar('column')}) * ${value} / var(${parentColumnsVar}))`
};
}
appendStyle(styles, style);
});
return styles;
};
exports.generateGridOffsetStyles = generateGridOffsetStyles;
const generateGridColumnsStyles = ({
theme,
ownerState
}) => {
if (!ownerState.container) {
return {};
}
const styles = {
[selfColumnsVar]: 12
};
(0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.columns, (appendStyle, value) => {
const columns = value ?? 12;
appendStyle(styles, {
[selfColumnsVar]: columns,
'> *': {
[parentColumnsVar]: columns
}
});
});
return styles;
};
exports.generateGridColumnsStyles = generateGridColumnsStyles;
const generateGridRowSpacingStyles = ({
theme,
ownerState
}) => {
if (!ownerState.container) {
return {};
}
const styles = {};
(0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
const spacing = typeof value === 'string' ? value : theme.spacing?.(value);
appendStyle(styles, {
[getSelfSpacingVar('row')]: spacing,
'> *': {
[getParentSpacingVar('row')]: spacing
}
});
});
return styles;
};
exports.generateGridRowSpacingStyles = generateGridRowSpacingStyles;
const generateGridColumnSpacingStyles = ({
theme,
ownerState
}) => {
if (!ownerState.container) {
return {};
}
const styles = {};
(0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
const spacing = typeof value === 'string' ? value : theme.spacing?.(value);
appendStyle(styles, {
[getSelfSpacingVar('column')]: spacing,
'> *': {
[getParentSpacingVar('column')]: spacing
}
});
});
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
}) => {
return {
minWidth: 0,
boxSizing: 'border-box',
...(ownerState.container && {
display: 'flex',
flexWrap: 'wrap',
...(ownerState.wrap && ownerState.wrap !== 'wrap' && {
flexWrap: ownerState.wrap
}),
gap: `var(${getSelfSpacingVar('row')}) var(${getSelfSpacingVar('column')})`
})
};
};
exports.generateGridStyles = generateGridStyles;
const generateSizeClassNames = size => {
const classNames = [];
Object.entries(size).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;
+7
View File
@@ -0,0 +1,7 @@
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';
export { generateDirectionClasses as unstable_generateDirectionClasses, generateSizeClassNames as unstable_generateSizeClassNames, generateSpacingClassNames as unstable_generateSpacingClassNames, } from './gridGenerator';
+85
View File
@@ -0,0 +1,85 @@
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {
createGrid: true,
gridClasses: true,
unstable_traverseBreakpoints: true,
unstable_generateDirectionClasses: true,
unstable_generateSizeClassNames: true,
unstable_generateSpacingClassNames: 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_generateDirectionClasses", {
enumerable: true,
get: function () {
return _gridGenerator.generateDirectionClasses;
}
});
Object.defineProperty(exports, "unstable_generateSizeClassNames", {
enumerable: true,
get: function () {
return _gridGenerator.generateSizeClassNames;
}
});
Object.defineProperty(exports, "unstable_generateSpacingClassNames", {
enumerable: true,
get: function () {
return _gridGenerator.generateSpacingClassNames;
}
});
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");
var _gridGenerator = require("./gridGenerator");
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "../esm/Grid/index.js",
"main": "./index.js",
"types": "./index.d.ts"
}
+7
View File
@@ -0,0 +1,7 @@
import { Breakpoints, Breakpoint } from '../createBreakpoints/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.includes(key)) {
// @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;
@@ -0,0 +1,51 @@
/**
* 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 default mode when the storage is empty (user's first visit).
* @default 'system'
*/
defaultMode?: 'system' | 'light' | 'dark';
/**
* 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'
* @example '.mode-%s' // for class based color scheme
* @example '[data-mode-%s]' // for data-attribute without '='
*/
attribute?: 'class' | 'data' | 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,87 @@
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
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");
/**
* 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 = 'system',
defaultLightColorScheme = 'light',
defaultDarkColorScheme = 'dark',
modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
attribute: initialAttribute = DEFAULT_ATTRIBUTE,
colorSchemeNode = 'document.documentElement',
nonce
} = options || {};
let setter = '';
let attribute = initialAttribute;
if (initialAttribute === 'class') {
attribute = '.%s';
}
if (initialAttribute === 'data') {
attribute = '[data-%s]';
}
if (attribute.startsWith('.')) {
const selector = attribute.substring(1);
setter += `${colorSchemeNode}.classList.remove('${selector}'.replace('%s', light), '${selector}'.replace('%s', dark));
${colorSchemeNode}.classList.add('${selector}'.replace('%s', colorScheme));`;
}
const matches = attribute.match(/\[([^\]]+)\]/); // case [data-color-scheme=%s] or [data-color-scheme]
if (matches) {
const [attr, value] = matches[1].split('=');
if (!value) {
setter += `${colorSchemeNode}.removeAttribute('${attr}'.replace('%s', light));
${colorSchemeNode}.removeAttribute('${attr}'.replace('%s', dark));`;
}
setter += `
${colorSchemeNode}.setAttribute('${attr}'.replace('%s', colorScheme), ${value ? `${value}.replace('%s', colorScheme)` : '""'});`;
} else {
setter += `${colorSchemeNode}.setAttribute('${attribute}', colorScheme);`;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)("script", {
suppressHydrationWarning: true,
nonce: typeof window === 'undefined' ? nonce : ''
// eslint-disable-next-line react/no-danger
,
dangerouslySetInnerHTML: {
__html: `(function() {
try {
let colorScheme = '';
const mode = localStorage.getItem('${modeStorageKey}') || '${defaultMode}';
const dark = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
const light = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
if (mode === 'system') {
// handle system mode
const mql = window.matchMedia('(prefers-color-scheme: dark)');
if (mql.matches) {
colorScheme = dark
} else {
colorScheme = light
}
}
if (mode === 'light') {
colorScheme = light;
}
if (mode === 'dark') {
colorScheme = dark;
}
if (colorScheme) {
${setter}
}
} 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").default;
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.
+21
View File
@@ -0,0 +1,21 @@
# 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:
<!-- #npm-tag-reference -->
```bash
npm install @mui/system@^6.0.0 @emotion/react @emotion/styled
```
If you wish to use the latest version, remove the `@^6.0.0` suffix.
## Documentation
<!-- #host-reference -->
Visit [https://v6.mui.com/system/getting-started/](https://v6.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;
+32
View File
@@ -0,0 +1,32 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useRtl = exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _jsxRuntime = require("react/jsx-runtime");
const RtlContext = /*#__PURE__*/React.createContext();
function RtlProvider({
value,
...props
}) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(RtlContext.Provider, {
value: 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 ?? 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").default;
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 '../createBreakpoints/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 {};
+181
View File
@@ -0,0 +1,181 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = createStack;
exports.style = void 0;
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 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 = {
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,
...other
} = props;
const ownerState = {
direction,
spacing,
useFlexGap
};
const classes = useUtilityClasses();
return /*#__PURE__*/(0, _jsxRuntime.jsx)(StackRoot, {
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';
+55
View File
@@ -0,0 +1,55 @@
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
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];
}
});
});
+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").default;
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>>;
+106
View File
@@ -0,0 +1,106 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
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");
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 ? {
...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 ? {
...upperTheme,
[themeId]: localTheme
} : {
...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 = (themeId ? engineTheme[themeId] : 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: themeId ? engineTheme[themeId].components : 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';
+13
View File
@@ -0,0 +1,13 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "default", {
enumerable: true,
get: function () {
return _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;
+58
View File
@@ -0,0 +1,58 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
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");
/**
* 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) {
// Only insert if first child doesn't have data-mui-layer-order attribute
if (firstChild && firstChild.hasAttribute?.('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 {
head.querySelector(`style[data-mui-layer-order="${id}"]`)?.remove();
}
}, [layerOrder, id]);
if (!layerOrder) {
return null;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlobalStyles.default, {
styles: layerOrder
});
}
+14
View File
@@ -0,0 +1,14 @@
import { PropsFor, SimpleStyleFunction, borders } from '../Box';
export const border: SimpleStyleFunction<'border'>;
export const borderTop: SimpleStyleFunction<'borderTop'>;
export const borderRight: SimpleStyleFunction<'borderRight'>;
export const borderBottom: SimpleStyleFunction<'borderBottom'>;
export const borderLeft: SimpleStyleFunction<'borderLeft'>;
export const borderColor: SimpleStyleFunction<'borderColor'>;
export const borderTopColor: SimpleStyleFunction<'borderTopColor'>;
export const borderRightColor: SimpleStyleFunction<'borderRightColor'>;
export const borderBottomColor: SimpleStyleFunction<'borderBottomColor'>;
export const borderLeftColor: SimpleStyleFunction<'borderLeftColor'>;
export const borderRadius: SimpleStyleFunction<'borderRadius'>;
export type BordersProps = PropsFor<typeof borders>;
+59
View File
@@ -0,0 +1,59 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
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;
+2
View File
@@ -0,0 +1,2 @@
export { default } from './borders';
export * from './borders';
+25
View File
@@ -0,0 +1,25 @@
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {};
Object.defineProperty(exports, "default", {
enumerable: true,
get: function () {
return _borders.default;
}
});
var _borders = _interopRequireWildcard(require("./borders"));
Object.keys(_borders).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _borders[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _borders[key];
}
});
});
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "../esm/borders/index.js",
"main": "./index.js",
"types": "./index.d.ts"
}
+31
View File
@@ -0,0 +1,31 @@
import { CSSObject } from '@mui/styled-engine';
import { Breakpoints } from '../createBreakpoints/createBreakpoints';
import type { Breakpoint } from '../createTheme';
import { ResponsiveStyleValue } from '../styleFunctionSx';
import { StyleFunction } from '../Box';
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;
type DefaultBreakPoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
/**
* @returns An enhanced stylefunction that considers breakpoints
*/
export default function breakpoints<Props, Breakpoints extends string = DefaultBreakPoints>(
styleFunction: StyleFunction<Props>,
): StyleFunction<Partial<Record<Breakpoints, Props>> & Props>;
+184
View File
@@ -0,0 +1,184 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
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 _propTypes = _interopRequireDefault(require("prop-types"));
var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
var _merge = _interopRequireDefault(require("../merge"));
var _cssContainerQueries = require("../cssContainerQueries");
// 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)`
};
const defaultContainerQueries = {
containerQueries: containerName => ({
up: key => {
let result = typeof key === 'number' ? key : values[key] || key;
if (typeof result === 'number') {
result = `${result}px`;
}
return containerName ? `@container ${containerName} (min-width:${result})` : `@container (min-width:${result})`;
}
})
};
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) => {
if ((0, _cssContainerQueries.isCqShorthand)(themeBreakpoints.keys, breakpoint)) {
const containerKey = (0, _cssContainerQueries.getContainerQuery)(theme.containerQueries ? theme : defaultContainerQueries, breakpoint);
if (containerKey) {
acc[containerKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
}
}
// key is breakpoint
else if (Object.keys(themeBreakpoints.values || values).includes(breakpoint)) {
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({
theme,
...props[key]
});
}
return acc;
}, null);
return (0, _merge.default)(base, extended);
};
newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? {
...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 = {}) {
const breakpointsInOrder = breakpointsInput.keys?.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;
+2
View File
@@ -0,0 +1,2 @@
export { default } from './breakpoints';
export * from './breakpoints';
+25
View File
@@ -0,0 +1,25 @@
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {};
Object.defineProperty(exports, "default", {
enumerable: true,
get: function () {
return _breakpoints.default;
}
});
var _breakpoints = _interopRequireWildcard(require("./breakpoints"));
Object.keys(_breakpoints).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _breakpoints[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _breakpoints[key];
}
});
});
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "../esm/breakpoints/index.js",
"main": "./index.js",
"types": "./index.d.ts"
}
@@ -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;
+375
View File
@@ -0,0 +1,375 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
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);
}
if (process.env.NODE_ENV !== 'production') {
if (color.length !== color.trim().length) {
console.error(`MUI: The color: "${color}" is invalid. Make sure the color input doesn't contain leading/trailing space.`);
}
}
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'].includes(type)) {
throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Unsupported \`${color}\` color.\n` + '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'].includes(colorSpace)) {
throw new Error(process.env.NODE_ENV !== "production" ? `MUI: unsupported \`${colorSpace}\` color space.\n` + '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.includes('hsl') && 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.includes('rgb')) {
// 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.includes('hsl')) {
values[1] = `${values[1]}%`;
values[2] = `${values[2]}%`;
}
if (type.includes('color')) {
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.startsWith('#')) {
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.includes('hsl')) {
color.values[2] *= 1 - coefficient;
} else if (color.type.includes('rgb') || color.type.includes('color')) {
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.includes('hsl')) {
color.values[2] += (100 - color.values[2]) * coefficient;
} else if (color.type.includes('rgb')) {
for (let i = 0; i < 3; i += 1) {
color.values[i] += (255 - color.values[i]) * coefficient;
}
} else if (color.type.includes('color')) {
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
});
}
+1
View File
@@ -0,0 +1 @@
export * from './colorManipulator';
+16
View File
@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _colorManipulator = require("./colorManipulator");
Object.keys(_colorManipulator).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (key in exports && exports[key] === _colorManipulator[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _colorManipulator[key];
}
});
});
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "../esm/colorManipulator/index.js",
"main": "./index.js",
"types": "./index.d.ts"
}
+5
View File
@@ -0,0 +1,5 @@
import { ComposedStyleFunction, StyleFunction } from '../Box';
export default function compose<T extends Array<StyleFunction<any>>>(
...args: T
): ComposedStyleFunction<T>;
+31
View File
@@ -0,0 +1,31 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
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;
+1
View File
@@ -0,0 +1 @@
export { default } from './compose';
+13
View File
@@ -0,0 +1,13 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "default", {
enumerable: true,
get: function () {
return _compose.default;
}
});
var _compose = _interopRequireDefault(require("./compose"));
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "../esm/compose/index.js",
"main": "./index.js",
"types": "./index.d.ts"
}
+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>>;
+42
View File
@@ -0,0 +1,42 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = createBox;
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");
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 {
className,
component = 'div',
...other
} = (0, _styleFunctionSx.extendSxProp)(inProps);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(BoxRoot, {
as: component,
ref: ref,
className: (0, _clsx.default)(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
theme: themeId ? theme[themeId] || theme : theme,
...other
});
});
return Box;
}
+1
View File
@@ -0,0 +1 @@
export { default } from './createBox';
+13
View File
@@ -0,0 +1,13 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "default", {
enumerable: true,
get: function () {
return _createBox.default;
}
});
var _createBox = _interopRequireDefault(require("./createBox"));
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "../esm/createBox/index.js",
"main": "./index.js",
"types": "./index.d.ts"
}

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