@mui/system 7.0.0-alpha.0 → 7.0.0-alpha.2

package/modern/styleFunctionSx/styleFunctionSx.d.ts

@@ -0,0 +1,62 @@
+import * as CSS from 'csstype';
+import { CSSObject } from '@mui/styled-engine';
+import { StandardCSSProperties } from "./StandardCssProperties.js";
+import { AliasesCSSProperties } from "./AliasesCSSProperties.js";
+import { OverwriteCSSProperties } from "./OverwriteCSSProperties.js";
+
+/**
+ * The `css` function accepts arrays as values for mobile-first responsive styles.
+ * Note that this extends to non-theme values also. For example `display=['none', 'block']`
+ * will also works.
+ */
+export type ResponsiveStyleValue<T> = T | ReadonlyArray<T | null> | {
+  [key: string]: T | null;
+};
+
+/**
+ * Map of all CSS pseudo selectors (`:hover`, `:focus`, ...).
+ */
+export type CSSPseudoSelectorProps<Theme extends object = {}> = { [K in CSS.Pseudos]?: ((theme: Theme) => SystemStyleObject<Theme>) | SystemStyleObject<Theme> };
+
+/**
+ * Map all nested selectors.
+ */
+export interface CSSSelectorObject<Theme extends object = {}> {
+  [cssSelector: string]: ((theme: Theme) => SystemStyleObject<Theme>) | SystemStyleObject<Theme>;
+}
+type CssVariableType = string | number;
+
+/**
+ * Map all nested selectors and CSS variables.
+ */
+export interface CSSSelectorObjectOrCssVariables<Theme extends object = {}> {
+  [cssSelectorOrVariable: string]: ((theme: Theme) => SystemStyleObject<Theme> | string | number) | SystemStyleObject<Theme> | CssVariableType;
+}
+
+/**
+ * Map of all available CSS properties (including aliases) and their raw value.
+ * Only used internally to map CSS properties to input types (responsive value,
+ * theme function or nested) in `SystemCssProperties`.
+ */
+export interface AllSystemCSSProperties extends Omit<StandardCSSProperties, keyof OverwriteCSSProperties>, OverwriteCSSProperties, AliasesCSSProperties {}
+export type SystemCssProperties<Theme extends object = {}> = { [K in keyof AllSystemCSSProperties]: ResponsiveStyleValue<AllSystemCSSProperties[K]> | ((theme: Theme) => ResponsiveStyleValue<AllSystemCSSProperties[K]>) | null };
+
+/**
+ * The `SystemStyleObject` defines custom properties that will be transformed to
+ * their corresponding values from the `Theme`. Other valid CSS properties are also allowed.
+ */
+export type SystemStyleObject<Theme extends object = {}> = SystemCssProperties<Theme> | CSSPseudoSelectorProps<Theme> | CSSSelectorObjectOrCssVariables<Theme> | null;
+
+/**
+ * The `SxProps` can be either object or function
+ */
+export type SxProps<Theme extends object = {}> = SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>) | ReadonlyArray<boolean | SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>)>;
+export interface StyleFunctionSx {
+  (props: object): CSSObject;
+  filterProps?: string[];
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function unstable_createStyleFunctionSx(styleFunctionMapping: Record<string, StyleFunctionSx>): StyleFunctionSx;
+declare const styleFunctionSx: StyleFunctionSx;
+export default styleFunctionSx;

package/modern/styled/index.d.ts

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

package/modern/styled/styled.d.ts

@@ -0,0 +1,3 @@
+import { CreateMUIStyled } from "../createStyled/index.js";
+declare const styled: CreateMUIStyled;
+export default styled;

package/modern/typography/index.d.ts

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

package/modern/typography/typography.d.ts

@@ -0,0 +1,11 @@
+import { PropsFor, SimpleStyleFunction, typography } from "../Box/index.js";
+export const typographyVariant: SimpleStyleFunction<'typography'>;
+export const fontFamily: SimpleStyleFunction<'fontFamily'>;
+export const fontSize: SimpleStyleFunction<'fontSize'>;
+export const fontStyle: SimpleStyleFunction<'fontStyle'>;
+export const fontWeight: SimpleStyleFunction<'fontWeight'>;
+export const letterSpacing: SimpleStyleFunction<'letterSpacing'>;
+export const lineHeight: SimpleStyleFunction<'lineHeight'>;
+export const textAlign: SimpleStyleFunction<'textAlign'>;
+export const textTransform: SimpleStyleFunction<'textTransform'>;
+export type TypographyProps = PropsFor<typeof typography>;

package/modern/useMediaQuery/index.d.ts

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

package/modern/useMediaQuery/useMediaQuery.d.ts

@@ -0,0 +1,32 @@
+export interface UseMediaQueryOptions {
+  /**
+   * As `window.matchMedia()` is unavailable on the server,
+   * it returns a default matches during the first mount.
+   * @default false
+   */
+  defaultMatches?: boolean;
+  /**
+   * You can provide your own implementation of matchMedia.
+   * This can be used for handling an iframe content window.
+   */
+  matchMedia?: typeof window.matchMedia;
+  /**
+   * To perform the server-side hydration, the hook needs to render twice.
+   * A first time with `defaultMatches`, the value of the server, and a second time with the resolved value.
+   * This double pass rendering cycle comes with a drawback: it's slower.
+   * You can set this option to `true` if you use the returned value **only** client-side.
+   * @default false
+   */
+  noSsr?: boolean;
+  /**
+   * You can provide your own implementation of `matchMedia`, it's used when rendering server-side.
+   */
+  ssrMatchMedia?: (query: string) => {
+    matches: boolean;
+  };
+}
+export declare function unstable_createUseMediaQuery(params?: {
+  themeId?: string;
+}): <Theme = unknown>(queryInput: string | ((theme: Theme) => string), options?: UseMediaQueryOptions) => boolean;
+declare const useMediaQuery: <Theme = unknown>(queryInput: string | ((theme: Theme) => string), options?: UseMediaQueryOptions) => boolean;
+export default useMediaQuery;

package/modern/useTheme/index.d.ts

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

package/modern/useTheme/useTheme.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from "../createTheme/index.js";
+export default function useTheme<T = Theme>(defaultTheme?: T): T;

package/modern/useThemeProps/getThemeProps.d.ts

@@ -0,0 +1,16 @@
+export {};
+interface ThemeWithProps<Components> {
+  components?: { [K in keyof Components]: {
+    defaultProps?: Partial<Components[K]>;
+  } };
+}
+type ThemedProps<Theme, Name extends keyof any> = Theme extends {
+  components: Record<Name, {
+    defaultProps: infer Props;
+  }>;
+} ? Props : {};
+export default function getThemeProps<Theme, Props, Name extends keyof any>(params: {
+  props: Props;
+  name: Name;
+  theme?: Theme;
+}): Props & ThemedProps<Theme, Name>;

package/modern/useThemeProps/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./useThemeProps.js";
+export * from "./useThemeProps.js";
+export { default as getThemeProps } from "./getThemeProps.js";

package/modern/useThemeProps/useThemeProps.d.ts

@@ -0,0 +1,14 @@
+export interface ThemeWithProps {
+  components?: any;
+}
+export type ThemedProps<Theme, Name extends keyof any> = Theme extends {
+  components: Record<Name, {
+    defaultProps: infer Props;
+  }>;
+} ? Props : {};
+export default function useThemeProps<Theme extends ThemeWithProps, Props, Name extends keyof any>(params: {
+  props: Props;
+  name: Name;
+  defaultTheme?: Theme;
+  themeId?: string;
+}): Props & ThemedProps<Theme, Name>;

package/modern/useThemeWithoutDefault/index.d.ts

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

package/modern/useThemeWithoutDefault/useThemeWithoutDefault.d.ts

@@ -0,0 +1 @@
+export default function useThemeWithoutDefault<T = null>(defaultTheme?: T): T;

package/modern/version/index.d.ts

@@ -0,0 +1,6 @@
+export declare const version: string | undefined;
+export declare const major: number;
+export declare const minor: number;
+export declare const patch: number;
+export declare const prerelease: string | undefined;
+export default version;

package/modern/version/index.js

@@ -1,6 +1,6 @@
-export const version = "7.0.0-alpha.0";
+export const version = "7.0.0-alpha.2";
 export const major = Number("7");
 export const minor = Number("0");
 export const patch = Number("0");
-export const prerelease = "alpha.0";
+export const prerelease = "alpha.2";
 export default version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "7.0.0-alpha.0",
+  "version": "7.0.0-alpha.2",
   "private": false,
   "author": "MUI Team",
   "description": "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.",
@@ -26,14 +26,14 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.26.7",
+    "@babel/runtime": "^7.26.9",
     "clsx": "^2.1.1",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "@mui/styled-engine": "7.0.0-alpha.0",
-    "@mui/types": "^7.2.22",
-    "@mui/utils": "7.0.0-alpha.0",
-    "@mui/private-theming": "7.0.0-alpha.0"
+    "@mui/styled-engine": "7.0.0-alpha.2",
+    "@mui/private-theming": "7.0.0-alpha.2",
+    "@mui/utils": "7.0.0-alpha.2",
+    "@mui/types": "^7.2.22"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -61,5 +61,37 @@
     "node": ">=14.0.0"
   },
   "module": "./esm/index.js",
+  "exports": {
+    ".": {
+      "require": {
+        "types": "./index.d.ts",
+        "default": "./index.js"
+      },
+      "import": {
+        "types": "./esm/index.d.ts",
+        "default": "./esm/index.js"
+      },
+      "mui-modern": {
+        "types": "./modern/index.d.ts",
+        "default": "./modern/index.js"
+      }
+    },
+    "./*": {
+      "require": {
+        "types": "./*/index.d.ts",
+        "default": "./*/index.js"
+      },
+      "import": {
+        "types": "./esm/*/index.d.ts",
+        "default": "./esm/*/index.js"
+      },
+      "mui-modern": {
+        "types": "./modern/*/index.d.ts",
+        "default": "./modern/*/index.js"
+      }
+    },
+    "./esm": null,
+    "./modern": null
+  },
   "types": "./index.d.ts"
 }

package/palette/index.d.ts

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

package/palette/palette.d.ts

@@ -1,5 +1,4 @@
-import { PropsFor, SimpleStyleFunction, palette } from '../Box';
-
+import { PropsFor, SimpleStyleFunction, palette } from "../Box/index.js";
 export const color: SimpleStyleFunction<'color'>;
 export const bgcolor: SimpleStyleFunction<'bgcolor'>;
-export type PaletteProps = PropsFor<typeof palette>;
+export type PaletteProps = PropsFor<typeof palette>;

package/positions/index.d.ts

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

package/positions/positions.d.ts

@@ -1,3 +1,2 @@
-import { PropsFor, positions } from '../Box';
-
-export type PositionsProps = PropsFor<typeof positions>;
+import { PropsFor, positions } from "../Box/index.js";
+export type PositionsProps = PropsFor<typeof positions>;

package/preprocessStyles.d.ts

@@ -1,5 +1,5 @@
 export default function preprocessStyles(input: any): {
-    variants: any;
-    style: any;
-    isProcessed: boolean;
-};
+  variants: any;
+  style: any;
+  isProcessed: boolean;
+};

package/propsToClassKey/index.d.ts

@@ -1 +1 @@
-export { default } from './propsToClassKey';
+export { default } from "./propsToClassKey.js";

package/propsToClassKey/propsToClassKey.d.ts

@@ -1 +1 @@
-export default function propsToClassKey(props: object): string;
+export default function propsToClassKey(props: object): string;

package/responsivePropType/index.d.ts

@@ -1 +1 @@
-export { default } from './responsivePropType';
+export { default } from "./responsivePropType.js";

package/responsivePropType/responsivePropType.d.ts

@@ -1,3 +1,2 @@
 declare const responsivePropType: object;
-
-export default responsivePropType;
+export default responsivePropType;

package/shadows/index.d.ts

@@ -1 +1 @@
-export { default } from './shadows';
+export { default } from "./shadows.js";

package/shadows/shadows.d.ts

@@ -1,3 +1,2 @@
-import { PropsFor, shadows } from '../Box';
-
-export type ShadowsProps = PropsFor<typeof shadows>;
+import { PropsFor, shadows } from "../Box/index.js";
+export type ShadowsProps = PropsFor<typeof shadows>;

package/sizing/index.d.ts

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

package/sizing/sizing.d.ts

@@ -1,5 +1,4 @@
-import { PropsFor, SimpleStyleFunction, sizing } from '../Box';
-
+import { PropsFor, SimpleStyleFunction, sizing } from "../Box/index.js";
 export const width: SimpleStyleFunction<'width'>;
 export const maxWidth: SimpleStyleFunction<'maxWidth'>;
 export const minWidth: SimpleStyleFunction<'minWidth'>;
@@ -9,4 +8,4 @@ export const minHeight: SimpleStyleFunction<'minHeight'>;
 export const sizeWidth: SimpleStyleFunction<'sizeWidth'>;
 export const sizeHeight: SimpleStyleFunction<'sizeHeight'>;
 export const boxSizing: SimpleStyleFunction<'boxSizing'>;
-export type SizingProps = PropsFor<typeof sizing>;
+export type SizingProps = PropsFor<typeof sizing>;

package/spacing/index.d.ts

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

package/spacing/spacing.d.ts

@@ -1,81 +1,18 @@
-import { SimpleStyleFunction, spacing, PropsFor } from '../Box';
-
+import { SimpleStyleFunction, spacing, PropsFor } from "../Box/index.js";
 export type SpacingValueType = string | number | null | undefined;
 export type SpacingProps = PropsFor<typeof spacing>;
-export function createUnarySpacing<Spacing>(theme: { spacing: Spacing }): Spacing extends number
-  ? (abs: number | string) => number | number
-  : Spacing extends any[]
-    ? <Index extends number>(abs: Index | string) => Spacing[Index] | string
-    : Spacing extends (...args: unknown[]) => unknown
-      ? Spacing
-      : // warns in Dev
-        () => undefined;
-
-export function createUnaryUnit<Spacing>(
-  theme: { spacing: Spacing },
-  themeKey: string,
-  defaultValue: Spacing,
-  propName: string,
-): Spacing extends number
-  ? (abs: SpacingValueType) => number | number
-  : Spacing extends any[]
-    ? <Index extends number>(abs: Index | string) => Spacing[Index] | string
-    : Spacing extends (...args: unknown[]) => unknown
-      ? Spacing
-      : // warns in Dev
-        () => undefined;
-
-export const margin: SimpleStyleFunction<
-  | 'm'
-  | 'mt'
-  | 'mr'
-  | 'mb'
-  | 'ml'
-  | 'mx'
-  | 'my'
-  | 'margin'
-  | 'marginTop'
-  | 'marginRight'
-  | 'marginBottom'
-  | 'marginLeft'
-  | 'marginX'
-  | 'marginY'
-  | 'marginInline'
-  | 'marginInlineStart'
-  | 'marginInlineEnd'
-  | 'marginBlock'
-  | 'marginBlockStart'
-  | 'marginBlockEnd'
->;
-
+export function createUnarySpacing<Spacing>(theme: {
+  spacing: Spacing;
+}): Spacing extends number ? (abs: number | string) => number | number : Spacing extends any[] ? <Index extends number>(abs: Index | string) => Spacing[Index] | string : Spacing extends ((...args: unknown[]) => unknown) ? Spacing :
+// warns in Dev
+() => undefined;
+export function createUnaryUnit<Spacing>(theme: {
+  spacing: Spacing;
+}, themeKey: string, defaultValue: Spacing, propName: string): Spacing extends number ? (abs: SpacingValueType) => number | number : Spacing extends any[] ? <Index extends number>(abs: Index | string) => Spacing[Index] | string : Spacing extends ((...args: unknown[]) => unknown) ? Spacing :
+// warns in Dev
+() => undefined;
+export const margin: SimpleStyleFunction<'m' | 'mt' | 'mr' | 'mb' | 'ml' | 'mx' | 'my' | 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'marginX' | 'marginY' | 'marginInline' | 'marginInlineStart' | 'marginInlineEnd' | 'marginBlock' | 'marginBlockStart' | 'marginBlockEnd'>;
 export type MarginProps = PropsFor<typeof margin>;
-
-export const padding: SimpleStyleFunction<
-  | 'p'
-  | 'pt'
-  | 'pr'
-  | 'pb'
-  | 'pl'
-  | 'px'
-  | 'py'
-  | 'padding'
-  | 'paddingTop'
-  | 'paddingRight'
-  | 'paddingBottom'
-  | 'paddingLeft'
-  | 'paddingX'
-  | 'paddingY'
-  | 'paddingInline'
-  | 'paddingInlineStart'
-  | 'paddingInlineEnd'
-  | 'paddingBlock'
-  | 'paddingBlockStart'
-  | 'paddingBlockEnd'
->;
-
-export function getValue(
-  transformer: (prop: SpacingValueType) => SpacingValueType,
-  propValue: SpacingValueType,
-): SpacingValueType;
-
-export type PaddingProps = PropsFor<typeof padding>;
+export const padding: SimpleStyleFunction<'p' | 'pt' | 'pr' | 'pb' | 'pl' | 'px' | 'py' | 'padding' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'paddingX' | 'paddingY' | 'paddingInline' | 'paddingInlineStart' | 'paddingInlineEnd' | 'paddingBlock' | 'paddingBlockStart' | 'paddingBlockEnd'>;
+export function getValue(transformer: (prop: SpacingValueType) => SpacingValueType, propValue: SpacingValueType): SpacingValueType;
+export type PaddingProps = PropsFor<typeof padding>;

package/style/index.d.ts

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

package/style/style.d.ts

@@ -1,11 +1,6 @@
 import { CSSObject } from '@mui/styled-engine';
-import { StyleFunction } from '../Box';
-
-export type TransformFunction = (
-  cssValue: unknown,
-  userValue: unknown,
-) => number | string | React.CSSProperties | CSSObject;
-
+import { StyleFunction } from "../Box/index.js";
+export type TransformFunction = (cssValue: unknown, userValue: unknown) => number | string | React.CSSProperties | CSSObject;
 export interface StyleOptions<PropKey> {
   cssProperty?: PropKey | keyof React.CSSProperties | false;
   prop: PropKey;
@@ -15,13 +10,10 @@ export interface StyleOptions<PropKey> {
   themeKey?: string;
   transform?: TransformFunction;
 }
-export function style<PropKey extends string, Theme extends object>(
-  options: StyleOptions<PropKey>,
-): StyleFunction<{ [K in PropKey]?: unknown } & { theme?: Theme }> & { filterProps: string[] };
+export function style<PropKey extends string, Theme extends object>(options: StyleOptions<PropKey>): StyleFunction<{ [K in PropKey]?: unknown } & {
+  theme?: Theme;
+}> & {
+  filterProps: string[];
+};
 export function getPath<T>(obj: T, path: string | undefined, checkVars?: boolean): null | unknown;
-export function getStyleValue(
-  themeMapping: object | ((arg: any) => any),
-  transform: TransformFunction | null,
-  propValueFinal: unknown,
-  userValue?: unknown,
-): any;
+export function getStyleValue(themeMapping: object | ((arg: any) => any), transform: TransformFunction | null, propValueFinal: unknown, userValue?: unknown): any;