tessl/npm-mui--system

MUI System is a set of CSS utilities to help you build custom designs more efficiently with composable style functions, responsive design utilities, and theme-aware styling.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Style Functions

Name: tessl/npm-mui--system
Author: tessl

Composable style functions that transform component props into CSS properties with theme integration and responsive support. These functions enable systematic styling through props while maintaining theme consistency and responsive behavior.

Capabilities

Core Style Function System

Base infrastructure for creating and composing style functions with theme integration.

/**
 * Create a style function that transforms props to CSS
 * @param options - Style function configuration
 * @returns Style transformation function
 */
function style<PropKey extends string>(options: StyleOptions<PropKey>): StyleFunction<PropKey>;

interface StyleOptions<PropKey extends string> {
  /** CSS property name(s) this function handles */
  prop: PropKey;
  
  /** CSS property name if different from prop */
  cssProperty?: string | string[];
  
  /** Theme key path for value transformation */
  themeKey?: string;
  
  /** Value transformation function */
  transform?: TransformFunction;
}

/**
 * Style transformation function type
 */
type StyleFunction<Props> = (props: Props) => CSSObject;

/**
 * Value transformation function
 */
type TransformFunction = (value: any, theme?: Theme) => any;

/**
 * Extract props interface from style function
 */
type PropsFor<SomeStyleFunction> = SomeStyleFunction extends StyleFunction<infer Props> 
  ? Props 
  : never;

/**
 * Get style value from theme path
 * @param obj - Object to search
 * @param path - Dot notation path
 * @returns Value at path
 */
function getStyleValue(obj: any, path: string): any;

/**
 * Get nested path from object
 * @param obj - Object to search
 * @param path - Array path
 * @returns Value at path
 */
function getPath(obj: any, path: string[]): any;

Composition System

Compose multiple style functions into a single function with merged prop interfaces.

/**
 * Compose multiple style functions into one
 * @param styleFunctions - Style functions to compose
 * @returns Composed style function
 */
function compose<T extends StyleFunction<any>[]>(...styleFunctions: T): ComposedStyleFunction<T>;

type ComposedStyleFunction<T> = T extends readonly [
  StyleFunction<infer P1>,
  ...infer Rest
] 
  ? Rest extends readonly StyleFunction<any>[]
    ? StyleFunction<P1 & PropsFor<ComposedStyleFunction<Rest>>>
    : StyleFunction<P1>
  : StyleFunction<{}>;

Individual Style Function Exports

Individual style functions that can be imported and used separately for specific CSS properties.

// Border style functions
export const border: StyleFunction<{ border?: ResponsiveStyleValue<string | number> }>;
export const borderTop: StyleFunction<{ borderTop?: ResponsiveStyleValue<string | number> }>;
export const borderRight: StyleFunction<{ borderRight?: ResponsiveStyleValue<string | number> }>;
export const borderBottom: StyleFunction<{ borderBottom?: ResponsiveStyleValue<string | number> }>;
export const borderLeft: StyleFunction<{ borderLeft?: ResponsiveStyleValue<string | number> }>;
export const borderColor: StyleFunction<{ borderColor?: ResponsiveStyleValue<string> }>;
export const borderTopColor: StyleFunction<{ borderTopColor?: ResponsiveStyleValue<string> }>;
export const borderRightColor: StyleFunction<{ borderRightColor?: ResponsiveStyleValue<string> }>;
export const borderBottomColor: StyleFunction<{ borderBottomColor?: ResponsiveStyleValue<string> }>;
export const borderLeftColor: StyleFunction<{ borderLeftColor?: ResponsiveStyleValue<string> }>;
export const borderRadius: StyleFunction<{ borderRadius?: ResponsiveStyleValue<string | number> }>;
export const outline: StyleFunction<{ outline?: ResponsiveStyleValue<string | number> }>;
export const outlineColor: StyleFunction<{ outlineColor?: ResponsiveStyleValue<string> }>;

// Flexbox style functions
export const flexDirection: StyleFunction<{ flexDirection?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'> }>;
export const flexWrap: StyleFunction<{ flexWrap?: ResponsiveStyleValue<'nowrap' | 'wrap' | 'wrap-reverse'> }>;
export const justifyContent: StyleFunction<{ justifyContent?: ResponsiveStyleValue<string> }>;
export const alignItems: StyleFunction<{ alignItems?: ResponsiveStyleValue<string> }>;
export const alignContent: StyleFunction<{ alignContent?: ResponsiveStyleValue<string> }>;
export const alignSelf: StyleFunction<{ alignSelf?: ResponsiveStyleValue<string> }>;
export const flex: StyleFunction<{ flex?: ResponsiveStyleValue<string | number> }>;
export const flexGrow: StyleFunction<{ flexGrow?: ResponsiveStyleValue<number> }>;
export const flexShrink: StyleFunction<{ flexShrink?: ResponsiveStyleValue<number> }>;
export const flexBasis: StyleFunction<{ flexBasis?: ResponsiveStyleValue<string | number> }>;
export const order: StyleFunction<{ order?: ResponsiveStyleValue<number> }>;
export const justifyItems: StyleFunction<{ justifyItems?: ResponsiveStyleValue<string> }>;
export const justifySelf: StyleFunction<{ justifySelf?: ResponsiveStyleValue<string> }>;

// CSS Grid style functions
export const gap: StyleFunction<{ gap?: ResponsiveStyleValue<string | number> }>;
export const columnGap: StyleFunction<{ columnGap?: ResponsiveStyleValue<string | number> }>;
export const rowGap: StyleFunction<{ rowGap?: ResponsiveStyleValue<string | number> }>;
export const gridColumn: StyleFunction<{ gridColumn?: ResponsiveStyleValue<string> }>;
export const gridRow: StyleFunction<{ gridRow?: ResponsiveStyleValue<string> }>;
export const gridArea: StyleFunction<{ gridArea?: ResponsiveStyleValue<string> }>;
export const gridAutoFlow: StyleFunction<{ gridAutoFlow?: ResponsiveStyleValue<string> }>;
export const gridAutoColumns: StyleFunction<{ gridAutoColumns?: ResponsiveStyleValue<string> }>;
export const gridAutoRows: StyleFunction<{ gridAutoRows?: ResponsiveStyleValue<string> }>;
export const gridTemplateColumns: StyleFunction<{ gridTemplateColumns?: ResponsiveStyleValue<string> }>;
export const gridTemplateRows: StyleFunction<{ gridTemplateRows?: ResponsiveStyleValue<string> }>;
export const gridTemplateAreas: StyleFunction<{ gridTemplateAreas?: ResponsiveStyleValue<string> }>;

// Sizing style functions
export const width: StyleFunction<{ width?: ResponsiveStyleValue<string | number> }>;
export const height: StyleFunction<{ height?: ResponsiveStyleValue<string | number> }>;
export const minWidth: StyleFunction<{ minWidth?: ResponsiveStyleValue<string | number> }>;
export const maxWidth: StyleFunction<{ maxWidth?: ResponsiveStyleValue<string | number> }>;
export const minHeight: StyleFunction<{ minHeight?: ResponsiveStyleValue<string | number> }>;
export const maxHeight: StyleFunction<{ maxHeight?: ResponsiveStyleValue<string | number> }>;
export const sizeWidth: StyleFunction<{ sizeWidth?: ResponsiveStyleValue<string | number> }>;
export const sizeHeight: StyleFunction<{ sizeHeight?: ResponsiveStyleValue<string | number> }>;
export const boxSizing: StyleFunction<{ boxSizing?: ResponsiveStyleValue<'border-box' | 'content-box'> }>;

// Typography style functions
export const fontFamily: StyleFunction<{ fontFamily?: ResponsiveStyleValue<string> }>;
export const fontSize: StyleFunction<{ fontSize?: ResponsiveStyleValue<string | number> }>;
export const fontStyle: StyleFunction<{ fontStyle?: ResponsiveStyleValue<string> }>;
export const fontWeight: StyleFunction<{ fontWeight?: ResponsiveStyleValue<string | number> }>;
export const letterSpacing: StyleFunction<{ letterSpacing?: ResponsiveStyleValue<string | number> }>;
export const lineHeight: StyleFunction<{ lineHeight?: ResponsiveStyleValue<string | number> }>;
export const textAlign: StyleFunction<{ textAlign?: ResponsiveStyleValue<string> }>;
export const textTransform: StyleFunction<{ textTransform?: ResponsiveStyleValue<string> }>;
export const textDecoration: StyleFunction<{ textDecoration?: ResponsiveStyleValue<string> }>;

// Position style functions
export const position: StyleFunction<{ position?: ResponsiveStyleValue<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'> }>;
export const top: StyleFunction<{ top?: ResponsiveStyleValue<string | number> }>;
export const right: StyleFunction<{ right?: ResponsiveStyleValue<string | number> }>;
export const bottom: StyleFunction<{ bottom?: ResponsiveStyleValue<string | number> }>;
export const left: StyleFunction<{ left?: ResponsiveStyleValue<string | number> }>;
export const zIndex: StyleFunction<{ zIndex?: ResponsiveStyleValue<number> }>;

// Palette/Color style functions
export const color: StyleFunction<{ color?: ResponsiveStyleValue<string> }>;
export const bgcolor: StyleFunction<{ bgcolor?: ResponsiveStyleValue<string> }>;
export const backgroundColor: StyleFunction<{ backgroundColor?: ResponsiveStyleValue<string> }>;

// Display style function
export const display: StyleFunction<{ display?: ResponsiveStyleValue<string> }>;

// Spacing individual functions
export const margin: StyleFunction<{ margin?: ResponsiveStyleValue<string | number> }>;
export const marginTop: StyleFunction<{ marginTop?: ResponsiveStyleValue<string | number> }>;
export const marginRight: StyleFunction<{ marginRight?: ResponsiveStyleValue<string | number> }>;
export const marginBottom: StyleFunction<{ marginBottom?: ResponsiveStyleValue<string | number> }>;
export const marginLeft: StyleFunction<{ marginLeft?: ResponsiveStyleValue<string | number> }>;
export const marginX: StyleFunction<{ marginX?: ResponsiveStyleValue<string | number> }>;
export const marginY: StyleFunction<{ marginY?: ResponsiveStyleValue<string | number> }>;
export const padding: StyleFunction<{ padding?: ResponsiveStyleValue<string | number> }>;
export const paddingTop: StyleFunction<{ paddingTop?: ResponsiveStyleValue<string | number> }>;
export const paddingRight: StyleFunction<{ paddingRight?: ResponsiveStyleValue<string | number> }>;
export const paddingBottom: StyleFunction<{ paddingBottom?: ResponsiveStyleValue<string | number> }>;
export const paddingLeft: StyleFunction<{ paddingLeft?: ResponsiveStyleValue<string | number> }>;
export const paddingX: StyleFunction<{ paddingX?: ResponsiveStyleValue<string | number> }>;
export const paddingY: StyleFunction<{ paddingY?: ResponsiveStyleValue<string | number> }>;

Usage Examples:

import { border, borderRadius, flexDirection, gap } from "@mui/system";

// Create custom styled component using individual functions
const CustomComponent = styled('div')(
  border,
  borderRadius,
  flexDirection,
  gap
);

// Use with individual props
<CustomComponent 
  border={1}
  borderRadius={2}
  flexDirection="column"
  gap={2}
>
  Content
</CustomComponent>

Spacing Functions

Handle margin and padding properties with theme spacing values and responsive behavior.

/**
 * Complete spacing style function (margin + padding)
 */
const spacing: StyleFunction<SpacingProps>;

/**
 * Margin-only style function
 */
const margin: StyleFunction<MarginProps>;

/**
 * Padding-only style function
 */
const padding: StyleFunction<PaddingProps>;

interface SpacingProps {
  /** All margin and padding */
  m?: ResponsiveStyleValue<number | string>;
  p?: ResponsiveStyleValue<number | string>;
  
  /** Margin directions */
  mt?: ResponsiveStyleValue<number | string>;
  mr?: ResponsiveStyleValue<number | string>;
  mb?: ResponsiveStyleValue<number | string>;
  ml?: ResponsiveStyleValue<number | string>;
  mx?: ResponsiveStyleValue<number | string>;
  my?: ResponsiveStyleValue<number | string>;
  
  /** Padding directions */
  pt?: ResponsiveStyleValue<number | string>;
  pr?: ResponsiveStyleValue<number | string>;
  pb?: ResponsiveStyleValue<number | string>;
  pl?: ResponsiveStyleValue<number | string>;
  px?: ResponsiveStyleValue<number | string>;
  py?: ResponsiveStyleValue<number | string>;
  
  /** CSS margin/padding properties */
  margin?: ResponsiveStyleValue<number | string>;
  padding?: ResponsiveStyleValue<number | string>;
  marginTop?: ResponsiveStyleValue<number | string>;
  marginRight?: ResponsiveStyleValue<number | string>;
  marginBottom?: ResponsiveStyleValue<number | string>;
  marginLeft?: ResponsiveStyleValue<number | string>;
  paddingTop?: ResponsiveStyleValue<number | string>;
  paddingRight?: ResponsiveStyleValue<number | string>;
  paddingBottom?: ResponsiveStyleValue<number | string>;
  paddingLeft?: ResponsiveStyleValue<number | string>;
}

interface MarginProps {
  m?: ResponsiveStyleValue<number | string>;
  mt?: ResponsiveStyleValue<number | string>;
  mr?: ResponsiveStyleValue<number | string>;
  mb?: ResponsiveStyleValue<number | string>;
  ml?: ResponsiveStyleValue<number | string>;
  mx?: ResponsiveStyleValue<number | string>;
  my?: ResponsiveStyleValue<number | string>;
  margin?: ResponsiveStyleValue<number | string>;
  marginTop?: ResponsiveStyleValue<number | string>;
  marginRight?: ResponsiveStyleValue<number | string>;
  marginBottom?: ResponsiveStyleValue<number | string>;
  marginLeft?: ResponsiveStyleValue<number | string>;
}

interface PaddingProps {
  p?: ResponsiveStyleValue<number | string>;
  pt?: ResponsiveStyleValue<number | string>;
  pr?: ResponsiveStyleValue<number | string>;
  pb?: ResponsiveStyleValue<number | string>;
  pl?: ResponsiveStyleValue<number | string>;
  px?: ResponsiveStyleValue<number | string>;
  py?: ResponsiveStyleValue<number | string>;
  padding?: ResponsiveStyleValue<number | string>;
  paddingTop?: ResponsiveStyleValue<number | string>;
  paddingRight?: ResponsiveStyleValue<number | string>;
  paddingBottom?: ResponsiveStyleValue<number | string>;
  paddingLeft?: ResponsiveStyleValue<number | string>;
}

/**
 * Create unary spacing function
 * @param transformer - Value transformation function
 * @returns Spacing transform function
 */
function createUnarySpacing<Transformer extends TransformFunction>(
  transformer: Transformer
): (value: number | string) => string;

/**
 * Create unary unit function
 * @param unit - CSS unit string
 * @returns Unit transform function
 */
function createUnaryUnit(unit: string): (value: number | string) => string;

/**
 * Get transformed spacing value
 * @param transformer - Transformation function
 * @param propValue - Raw prop value
 * @returns Transformed CSS value
 */
function getValue<T>(transformer: T, propValue: unknown): T extends TransformFunction ? ReturnType<T> : unknown;

Usage Examples:

import { spacing, margin, padding } from "@mui/system";

// Component with spacing props
<Box m={2} p={1} mt={3}>
  {/* margin: 16px, padding: 8px, margin-top: 24px */}
</Box>

// Responsive spacing
<Box 
  p={{ xs: 1, sm: 2, md: 3 }}
  m={{ xs: 0, md: 2 }}
>
  Responsive spacing
</Box>

// Using spacing functions directly
const spacedStyles = spacing({
  m: 2,
  p: { xs: 1, md: 2 },
});

Typography Functions

Handle font properties, text styling, and typography system integration.

/**
 * Complete typography style function
 */
const typography: StyleFunction<TypographyProps>;

/**
 * Typography variant function
 */
const typographyVariant: StyleFunction<{ variant: string }>;

interface TypographyProps {
  /** Typography variant from theme */
  variant?: ResponsiveStyleValue<string>;
  
  /** Font family */
  fontFamily?: ResponsiveStyleValue<string>;
  
  /** Font size */
  fontSize?: ResponsiveStyleValue<number | string>;
  
  /** Font style */
  fontStyle?: ResponsiveStyleValue<string>;
  
  /** Font weight */
  fontWeight?: ResponsiveStyleValue<number | string>;
  
  /** Letter spacing */
  letterSpacing?: ResponsiveStyleValue<number | string>;
  
  /** Line height */
  lineHeight?: ResponsiveStyleValue<number | string>;
  
  /** Text alignment */
  textAlign?: ResponsiveStyleValue<string>;
  
  /** Text transform */
  textTransform?: ResponsiveStyleValue<string>;
}

// Individual typography functions
const fontFamily: StyleFunction<{ fontFamily: ResponsiveStyleValue<string> }>;
const fontSize: StyleFunction<{ fontSize: ResponsiveStyleValue<number | string> }>;
const fontStyle: StyleFunction<{ fontStyle: ResponsiveStyleValue<string> }>;
const fontWeight: StyleFunction<{ fontWeight: ResponsiveStyleValue<number | string> }>;
const letterSpacing: StyleFunction<{ letterSpacing: ResponsiveStyleValue<number | string> }>;
const lineHeight: StyleFunction<{ lineHeight: ResponsiveStyleValue<number | string> }>;
const textAlign: StyleFunction<{ textAlign: ResponsiveStyleValue<string> }>;
const textTransform: StyleFunction<{ textTransform: ResponsiveStyleValue<string> }>;

Usage Examples:

import { typography } from "@mui/system";

// Typography props on components
<Box 
  fontSize="h4.fontSize"
  fontWeight="bold"
  textAlign="center"
>
  Styled text
</Box>

// Responsive typography
<Box
  fontSize={{ xs: '1rem', md: '1.5rem' }}
  fontWeight={{ xs: 400, md: 600 }}
>
  Responsive text
</Box>

Border Functions

Handle border properties including width, style, color, and radius with theme integration.

/**
 * Complete border style function
 */
const borders: StyleFunction<BordersProps>;

interface BordersProps {
  /** Border shorthand */
  border?: ResponsiveStyleValue<number | string>;
  borderTop?: ResponsiveStyleValue<number | string>;
  borderRight?: ResponsiveStyleValue<number | string>;
  borderBottom?: ResponsiveStyleValue<number | string>;
  borderLeft?: ResponsiveStyleValue<number | string>;
  
  /** Border color */
  borderColor?: ResponsiveStyleValue<string>;
  borderTopColor?: ResponsiveStyleValue<string>;
  borderRightColor?: ResponsiveStyleValue<string>;
  borderBottomColor?: ResponsiveStyleValue<string>;
  borderLeftColor?: ResponsiveStyleValue<string>;
  
  /** Border radius */
  borderRadius?: ResponsiveStyleValue<number | string>;
  borderTopLeftRadius?: ResponsiveStyleValue<number | string>;
  borderTopRightRadius?: ResponsiveStyleValue<number | string>;
  borderBottomLeftRadius?: ResponsiveStyleValue<number | string>;
  borderBottomRightRadius?: ResponsiveStyleValue<number | string>;
}

// Individual border functions
const border: StyleFunction<{ border: ResponsiveStyleValue<number | string> }>;
const borderTop: StyleFunction<{ borderTop: ResponsiveStyleValue<number | string> }>;
const borderRight: StyleFunction<{ borderRight: ResponsiveStyleValue<number | string> }>;
const borderBottom: StyleFunction<{ borderBottom: ResponsiveStyleValue<number | string> }>;
const borderLeft: StyleFunction<{ borderLeft: ResponsiveStyleValue<number | string> }>;
const borderColor: StyleFunction<{ borderColor: ResponsiveStyleValue<string> }>;
const borderTopColor: StyleFunction<{ borderTopColor: ResponsiveStyleValue<string> }>;
const borderRightColor: StyleFunction<{ borderRightColor: ResponsiveStyleValue<string> }>;
const borderBottomColor: StyleFunction<{ borderBottomColor: ResponsiveStyleValue<string> }>;
const borderLeftColor: StyleFunction<{ borderLeftColor: ResponsiveStyleValue<string> }>;
const borderRadius: StyleFunction<{ borderRadius: ResponsiveStyleValue<number | string> }>;

Usage Examples:

import { borders } from "@mui/system";

// Border props on components
<Box 
  border={1}
  borderColor="primary.main"
  borderRadius={2}
>
  Bordered content
</Box>

// Individual border sides
<Box
  borderTop={1}
  borderBottom={2}
  borderColor="grey.300"
>
  Partial borders
</Box>

Color/Palette Functions

Handle color and background-color properties with theme palette integration.

/**
 * Complete palette style function
 */
const palette: StyleFunction<PaletteProps>;

interface PaletteProps {
  /** Text color */
  color?: ResponsiveStyleValue<string>;
  
  /** Background color */
  bgcolor?: ResponsiveStyleValue<string>;
  backgroundColor?: ResponsiveStyleValue<string>;
}

// Individual color functions
const color: StyleFunction<{ color: ResponsiveStyleValue<string> }>;
const bgcolor: StyleFunction<{ bgcolor: ResponsiveStyleValue<string> }>;

Usage Examples:

import { palette } from "@mui/system";

// Color props on components
<Box 
  color="primary.main"
  bgcolor="background.paper"
>
  Colored content
</Box>

// Responsive colors
<Box
  color={{ xs: 'text.secondary', md: 'primary.main' }}
  bgcolor={{ xs: 'grey.100', md: 'primary.light' }}
>
  Responsive colors
</Box>

Sizing Functions

Handle width, height, and dimension properties with theme integration.

/**
 * Complete sizing style function
 */
const sizing: StyleFunction<SizingProps>;

interface SizingProps {
  /** Width properties */
  width?: ResponsiveStyleValue<number | string>;
  maxWidth?: ResponsiveStyleValue<number | string>;
  minWidth?: ResponsiveStyleValue<number | string>;
  
  /** Height properties */
  height?: ResponsiveStyleValue<number | string>;
  maxHeight?: ResponsiveStyleValue<number | string>;
  minHeight?: ResponsiveStyleValue<number | string>;
  
  /** Box sizing */
  boxSizing?: ResponsiveStyleValue<string>;
}

// Individual sizing functions
const width: StyleFunction<{ width: ResponsiveStyleValue<number | string> }>;
const maxWidth: StyleFunction<{ maxWidth: ResponsiveStyleValue<number | string> }>;
const minWidth: StyleFunction<{ minWidth: ResponsiveStyleValue<number | string> }>;
const height: StyleFunction<{ height: ResponsiveStyleValue<number | string> }>;
const maxHeight: StyleFunction<{ maxHeight: ResponsiveStyleValue<number | string> }>;
const minHeight: StyleFunction<{ minHeight: ResponsiveStyleValue<number | string> }>;
const sizeWidth: StyleFunction<{ sizeWidth: ResponsiveStyleValue<number | string> }>;
const sizeHeight: StyleFunction<{ sizeHeight: ResponsiveStyleValue<number | string> }>;
const boxSizing: StyleFunction<{ boxSizing: ResponsiveStyleValue<string> }>;

Flexbox Functions

Handle flexbox container and item properties for flexible layouts.

/**
 * Complete flexbox style function
 */
const flexbox: StyleFunction<FlexboxProps>;

interface FlexboxProps {
  /** Flex container properties */
  flexDirection?: ResponsiveStyleValue<string>;
  flexWrap?: ResponsiveStyleValue<string>;
  justifyContent?: ResponsiveStyleValue<string>;
  alignItems?: ResponsiveStyleValue<string>;
  alignContent?: ResponsiveStyleValue<string>;
  
  /** Flex item properties */
  flex?: ResponsiveStyleValue<number | string>;
  flexGrow?: ResponsiveStyleValue<number>;
  flexShrink?: ResponsiveStyleValue<number>;
  flexBasis?: ResponsiveStyleValue<number | string>;
  alignSelf?: ResponsiveStyleValue<string>;
  order?: ResponsiveStyleValue<number>;
  
  /** Additional properties */
  justifyItems?: ResponsiveStyleValue<string>;
  justifySelf?: ResponsiveStyleValue<string>;
}

// Individual flexbox functions
const flexDirection: StyleFunction<{ flexDirection: ResponsiveStyleValue<string> }>;
const flexWrap: StyleFunction<{ flexWrap: ResponsiveStyleValue<string> }>;
const justifyContent: StyleFunction<{ justifyContent: ResponsiveStyleValue<string> }>;
const alignItems: StyleFunction<{ alignItems: ResponsiveStyleValue<string> }>;
const alignContent: StyleFunction<{ alignContent: ResponsiveStyleValue<string> }>;
const flex: StyleFunction<{ flex: ResponsiveStyleValue<number | string> }>;
const flexGrow: StyleFunction<{ flexGrow: ResponsiveStyleValue<number> }>;
const flexShrink: StyleFunction<{ flexShrink: ResponsiveStyleValue<number> }>;
const flexBasis: StyleFunction<{ flexBasis: ResponsiveStyleValue<number | string> }>;
const alignSelf: StyleFunction<{ alignSelf: ResponsiveStyleValue<string> }>;
const order: StyleFunction<{ order: ResponsiveStyleValue<number> }>;
const justifyItems: StyleFunction<{ justifyItems: ResponsiveStyleValue<string> }>;
const justifySelf: StyleFunction<{ justifySelf: ResponsiveStyleValue<string> }>;

CSS Grid Functions

Handle CSS Grid container and item properties for grid layouts.

/**
 * CSS Grid style function
 */
const grid: StyleFunction<CssGridProps>;

interface CssGridProps {
  /** Grid container properties */
  gridTemplateColumns?: ResponsiveStyleValue<string>;
  gridTemplateRows?: ResponsiveStyleValue<string>;
  gridTemplateAreas?: ResponsiveStyleValue<string>;
  gridAutoColumns?: ResponsiveStyleValue<string>;
  gridAutoRows?: ResponsiveStyleValue<string>;
  gridAutoFlow?: ResponsiveStyleValue<string>;
  
  /** Grid item properties */
  gridColumn?: ResponsiveStyleValue<string>;
  gridRow?: ResponsiveStyleValue<string>;
  gridArea?: ResponsiveStyleValue<string>;
  
  /** Gap properties */
  gap?: ResponsiveStyleValue<number | string>;
  rowGap?: ResponsiveStyleValue<number | string>;
  columnGap?: ResponsiveStyleValue<number | string>;
}

// Individual grid functions
const gap: StyleFunction<{ gap: ResponsiveStyleValue<number | string> }>;
const columnGap: StyleFunction<{ columnGap: ResponsiveStyleValue<number | string> }>;
const rowGap: StyleFunction<{ rowGap: ResponsiveStyleValue<number | string> }>;
const gridColumn: StyleFunction<{ gridColumn: ResponsiveStyleValue<string> }>;
const gridRow: StyleFunction<{ gridRow: ResponsiveStyleValue<string> }>;
const gridArea: StyleFunction<{ gridArea: ResponsiveStyleValue<string> }>;
const gridAutoFlow: StyleFunction<{ gridAutoFlow: ResponsiveStyleValue<string> }>;
const gridAutoColumns: StyleFunction<{ gridAutoColumns: ResponsiveStyleValue<string> }>;
const gridAutoRows: StyleFunction<{ gridAutoRows: ResponsiveStyleValue<string> }>;
const gridTemplateColumns: StyleFunction<{ gridTemplateColumns: ResponsiveStyleValue<string> }>;
const gridTemplateRows: StyleFunction<{ gridTemplateRows: ResponsiveStyleValue<string> }>;
const gridTemplateAreas: StyleFunction<{ gridTemplateAreas: ResponsiveStyleValue<string> }>;

Position Functions

Handle positioning properties including position, coordinates, and z-index.

/**
 * Position style function
 */
const positions: StyleFunction<PositionsProps>;

interface PositionsProps {
  /** Position type */
  position?: ResponsiveStyleValue<string>;
  
  /** Coordinates */
  top?: ResponsiveStyleValue<number | string>;
  right?: ResponsiveStyleValue<number | string>;
  bottom?: ResponsiveStyleValue<number | string>;
  left?: ResponsiveStyleValue<number | string>;
  
  /** Layering */
  zIndex?: ResponsiveStyleValue<number | string>;
}

Display Functions

Handle display, visibility, and overflow properties.

/**
 * Display style function
 */
const display: StyleFunction<DisplayProps>;

interface DisplayProps {
  /** Display type */
  display?: ResponsiveStyleValue<string>;
  displayPrint?: ResponsiveStyleValue<string>;
  
  /** Overflow */
  overflow?: ResponsiveStyleValue<string>;
  textOverflow?: ResponsiveStyleValue<string>;
  
  /** Visibility */
  visibility?: ResponsiveStyleValue<string>;
  whiteSpace?: ResponsiveStyleValue<string>;
}

Shadow Functions

Handle box-shadow properties with theme shadow values.

/**
 * Shadow style function
 */
const shadows: StyleFunction<ShadowsProps>;

interface ShadowsProps {
  /** Box shadow */
  boxShadow?: ResponsiveStyleValue<number | string>;
}

Function Integration

All style functions integrate seamlessly with:

Theme System: Automatic theme value resolution for colors, spacing, breakpoints
Responsive Design: Object syntax for breakpoint-specific values
sx Prop: All style functions work within sx prop context
Component Props: Direct usage as component props with full TypeScript support
Composition: Functions can be composed together for reusable styling patterns