[system] Fix @mui/system types organization

packages/mui-system/src/Box/Box.d.ts

@@ -8,149 +8,18 @@ import {
   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[] };
+import { PropsFor } from '../style';
+import { ComposedStyleFunction } from '../compose';
+import borders from '../borders';
+import display from '../display';
+import flexbox from '../flexbox';
+import grid from '../cssGrid';
+import palette from '../palette';
+import positions from '../positions';
+import shadows from '../shadows';
+import sizing from '../sizing';
+import spacing from '../spacing';
+import typography from '../typography';
 
 export interface CustomSystemProps extends AliasesCSSProperties, OverwriteCSSProperties {}
 

packages/mui-system/src/borders/borders.d.ts

@@ -1,4 +1,4 @@
-import { PropsFor, borders, SimpleStyleFunction } from '../Box';
+import { PropsFor, SimpleStyleFunction } from '../style';
 
 export const border: SimpleStyleFunction<'border'>;
 export const borderTop: SimpleStyleFunction<'borderTop'>;
@@ -12,6 +12,16 @@ export const borderBottomColor: SimpleStyleFunction<'borderBottomColor'>;
 export const borderLeftColor: SimpleStyleFunction<'borderLeftColor'>;
 export const borderRadius: SimpleStyleFunction<'borderRadius'>;
 
+declare const borders: SimpleStyleFunction<
+  | 'border'
+  | 'borderTop'
+  | 'borderRight'
+  | 'borderBottom'
+  | 'borderLeft'
+  | 'borderColor'
+  | 'borderRadius'
+>;
+
 export type BordersProps = PropsFor<typeof borders>;
 
 export default borders;

packages/mui-system/src/breakpoints/breakpoints.d.ts

@@ -2,7 +2,7 @@ import { CSSObject } from '@mui/styled-engine';
 import { Breakpoints } from '../createBreakpoints/createBreakpoints';
 import type { Breakpoint } from '../createTheme';
 import { ResponsiveStyleValue } from '../styleFunctionSx';
-import { StyleFunction } from '../Box';
+import { StyleFunction } from '../style';
 
 export interface ResolveBreakpointValuesOptions<T> {
   values: ResponsiveStyleValue<T>;

packages/mui-system/src/compose/compose.d.ts

@@ -1,4 +1,18 @@
-import { ComposedStyleFunction, StyleFunction } from '../Box';
+import { StyleFunction } from '../style';
+
+/**
+ * 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 default function compose<T extends Array<StyleFunction<any>>>(
   ...args: T

packages/mui-system/src/compose/index.ts

@@ -1 +1 @@
-export { default } from './compose';
+export { default, type ComposedStyleFunction } from './compose';

packages/mui-system/src/cssGrid/cssGrid.d.ts

@@ -1,4 +1,4 @@
-import { PropsFor, grid, SimpleStyleFunction } from '../Box';
+import { PropsFor, SimpleStyleFunction } from '../style';
 
 export const gap: SimpleStyleFunction<'gap'>;
 export const columnGap: SimpleStyleFunction<'columnGap'>;
@@ -13,6 +13,21 @@ export const gridTemplateRows: SimpleStyleFunction<'gridTemplateRows'>;
 export const gridTemplateAreas: SimpleStyleFunction<'gridTemplateAreas'>;
 export const gridArea: SimpleStyleFunction<'gridArea'>;
 
+declare const grid: SimpleStyleFunction<
+  | 'gap'
+  | 'columnGap'
+  | 'rowGap'
+  | 'gridColumn'
+  | 'gridRow'
+  | 'gridAutoFlow'
+  | 'gridAutoColumns'
+  | 'gridAutoRows'
+  | 'gridTemplateColumns'
+  | 'gridTemplateRows'
+  | 'gridTemplateAreas'
+  | 'gridArea'
+>;
+
 export type CssGridProps = PropsFor<typeof grid>;
 
 export default grid;

packages/mui-system/src/display/display.d.ts

@@ -1,4 +1,8 @@
-import { PropsFor, display } from '../Box';
+import { PropsFor, SimpleStyleFunction } from '../style';
+
+declare const display: SimpleStyleFunction<
+  'display' | 'displayPrint' | 'overflow' | 'textOverflow' | 'visibility' | 'whiteSpace'
+>;
 
 export type DisplayProps = PropsFor<typeof display>;
 

packages/mui-system/src/flexbox/flexbox.d.ts

@@ -1,4 +1,34 @@
-import { PropsFor, flexbox } from '../Box';
+import { PropsFor, SimpleStyleFunction } from '../style';
+
+export const flexBasis: SimpleStyleFunction<'flexBasis'>;
+export const flexDirection: SimpleStyleFunction<'flexDirection'>;
+export const flexWrap: SimpleStyleFunction<'flexWrap'>;
+export const justifyContent: SimpleStyleFunction<'justifyContent'>;
+export const alignItems: SimpleStyleFunction<'alignItems'>;
+export const alignContent: SimpleStyleFunction<'alignContent'>;
+export const order: SimpleStyleFunction<'order'>;
+export const flex: SimpleStyleFunction<'flex'>;
+export const flexGrow: SimpleStyleFunction<'flexGrow'>;
+export const flexShrink: SimpleStyleFunction<'flexShrink'>;
+export const alignSelf: SimpleStyleFunction<'alignSelf'>;
+export const justifyItems: SimpleStyleFunction<'justifyItems'>;
+export const justifySelf: SimpleStyleFunction<'justifySelf'>;
+
+declare const flexbox: SimpleStyleFunction<
+  | 'flexBasis'
+  | 'flexDirection'
+  | 'flexWrap'
+  | 'justifyContent'
+  | 'alignItems'
+  | 'alignContent'
+  | 'order'
+  | 'flex'
+  | 'flexGrow'
+  | 'flexShrink'
+  | 'alignSelf'
+  | 'justifyItems'
+  | 'justifySelf'
+>;
 
 export type FlexboxProps = PropsFor<typeof flexbox>;
 

packages/mui-system/src/index.d.ts

@@ -2,6 +2,7 @@
 export {};
 
 export * from './borders';
+export { default as borders } from './borders';
 
 export { default as breakpoints, handleBreakpoints, mergeBreakpointsInOrder } from './breakpoints';
 
@@ -10,20 +11,28 @@ export { default as cssContainerQueries, type CssContainerQueries } from './cssC
 export { default as compose } from './compose';
 
 export * from './display';
+export { default as display } from './display';
 
 export * from './flexbox';
+export { default as flexbox } from './flexbox';
 
 export * from './cssGrid';
+export { default as grid } from './cssGrid';
 
 export * from './palette';
+export { default as palette } from './palette';
 
 export * from './positions';
+export { default as positions } from './positions';
 
 export * from './shadows';
+export { default as shadows } from './shadows';
 
 export * from './sizing';
+export { default as sizing } from './sizing';
 
 export * from './typography';
+export { default as typography } from './typography';
 
 export { default as unstable_getThemeValue } from './getThemeValue';
 
@@ -51,6 +60,7 @@ export * from './style';
 export { default as style } from './style';
 
 export * from './spacing';
+export { default as spacing } from './spacing';
 
 export {
   default as unstable_styleFunctionSx,

packages/mui-system/src/palette/palette.d.ts

@@ -1,7 +1,10 @@
-import { PropsFor, SimpleStyleFunction, palette } from '../Box';
+import { PropsFor, SimpleStyleFunction } from '../style';
 
 export const color: SimpleStyleFunction<'color'>;
 export const bgcolor: SimpleStyleFunction<'bgcolor'>;
+
+declare const palette: SimpleStyleFunction<'bgcolor' | 'color'>;
+
 export type PaletteProps = PropsFor<typeof palette>;
 
 export default palette;

packages/mui-system/src/positions/positions.d.ts

@@ -1,4 +1,8 @@
-import { PropsFor, positions } from '../Box';
+import { PropsFor, SimpleStyleFunction } from '../style';
+
+declare const positions: SimpleStyleFunction<
+  'zIndex' | 'position' | 'top' | 'right' | 'bottom' | 'left'
+>;
 
 export type PositionsProps = PropsFor<typeof positions>;
 

packages/mui-system/src/shadows/shadows.d.ts

@@ -1,4 +1,6 @@
-import { PropsFor, shadows } from '../Box';
+import { PropsFor, SimpleStyleFunction } from '../style';
+
+declare const shadows: SimpleStyleFunction<'boxShadow'>;
 
 export type ShadowsProps = PropsFor<typeof shadows>;
 

packages/mui-system/src/sizing/sizing.d.ts

@@ -1,4 +1,4 @@
-import { PropsFor, SimpleStyleFunction, sizing } from '../Box';
+import { PropsFor, SimpleStyleFunction } from '../style';
 
 export const width: SimpleStyleFunction<'width'>;
 export const maxWidth: SimpleStyleFunction<'maxWidth'>;
@@ -9,6 +9,19 @@ export const minHeight: SimpleStyleFunction<'minHeight'>;
 export const sizeWidth: SimpleStyleFunction<'sizeWidth'>;
 export const sizeHeight: SimpleStyleFunction<'sizeHeight'>;
 export const boxSizing: SimpleStyleFunction<'boxSizing'>;
+
+declare const sizing: SimpleStyleFunction<
+  | 'width'
+  | 'maxWidth'
+  | 'minWidth'
+  | 'height'
+  | 'maxHeight'
+  | 'minHeight'
+  | 'sizeWidth'
+  | 'sizeHeight'
+  | 'boxSizing'
+>;
+
 export type SizingProps = PropsFor<typeof sizing>;
 
 export default sizing;