CSS Class and Style Utilities

/**
 * Generates utility CSS class names
 * @param componentName - Name of the component
 * @param slot - Name of the component slot
 * @param globalStatePrefix - Optional prefix for global state classes
 * @returns Generated class name string
 */
function unstable_generateUtilityClass(
  componentName: string,
  slot: string,
  globalStatePrefix?: string
): string;

/**
 * Checks if a class name represents a global state
 * @param globalStateClass - Class name to check
 * @returns True if class represents global state
 */
function unstable_isGlobalState(globalStateClass: string): boolean;

/**
 * Type representing keys of global state classes
 */
type GlobalStateSlot = keyof typeof globalStateClasses;

/**
 * Object mapping global state slot names to their corresponding class names
 */
const globalStateClasses: {
  active: 'active';
  checked: 'checked';
  completed: 'completed';
  disabled: 'disabled';
  error: 'error';
  expanded: 'expanded';
  focused: 'focused';
  focusVisible: 'focusVisible';
  open: 'open';
  readOnly: 'readOnly';
  required: 'required';
  selected: 'selected';
};

import { 
  unstable_generateUtilityClass as generateUtilityClass,
  unstable_isGlobalState as isGlobalState,
  GlobalStateSlot,
  globalStateClasses
} from '@mui/utils';

// Basic class generation
const rootClass = generateUtilityClass('MuiButton', 'root');
// Result: 'MuiButton-root'

const labelClass = generateUtilityClass('MuiButton', 'label');
// Result: 'MuiButton-label'

// Global state classes
const disabledClass = generateUtilityClass('MuiButton', 'disabled', 'Mui');
// Result: 'Mui-disabled'

// Check if class is global state
const isGlobal = isGlobalState('Mui-disabled'); // true
const isNotGlobal = isGlobalState('MuiButton-root'); // false

// Using global state definitions
const activeSlot: GlobalStateSlot = 'active';
const activeClassName = globalStateClasses.active; // 'active'

/**
 * Generates multiple utility classes
 * @param componentName - Name of the component
 * @param slots - Array of slot names
 * @param globalStatePrefix - Optional prefix for global state classes
 * @returns Record mapping slot names to class names
 */
function unstable_generateUtilityClasses<T extends string>(
  componentName: string,
  slots: T[],
  globalStatePrefix?: string
): Record<T, string>;

import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';

const buttonClasses = generateUtilityClasses('MuiButton', [
  'root',
  'label',
  'disabled',
  'focusVisible'
]);

// Result:
// {
//   root: 'MuiButton-root',
//   label: 'MuiButton-label', 
//   disabled: 'MuiButton-disabled',
//   focusVisible: 'MuiButton-focusVisible'
// }

/**
 * Composes CSS class names for component slots
 * @param slots - Object mapping slot names to default classes
 * @param getUtilityClass - Function to get utility class for slot
 * @param classes - Optional custom classes to merge
 * @returns Record mapping slot names to composed class names
 */
function unstable_composeClasses<SlotKey extends string>(
  slots: Record<SlotKey, string | false | null | undefined>,
  getUtilityClass: (slot: SlotKey) => string,
  classes?: Partial<Record<SlotKey, string>>
): Record<SlotKey, string>;

import { unstable_composeClasses as composeClasses } from '@mui/utils';

const slots = {
  root: 'base-button',
  label: 'base-label',
  disabled: null // Will be excluded
};

const getUtilityClass = (slot) => `MuiButton-${slot}`;

const customClasses = {
  root: 'custom-button-root',
  label: 'custom-label'
};

const composedClasses = composeClasses(slots, getUtilityClass, customClasses);

// Result:
// {
//   root: 'base-button MuiButton-root custom-button-root',
//   label: 'base-label MuiButton-label custom-label'
// }

/**
 * Global class name generator configuration
 */
const unstable_ClassNameGenerator: {
  /**
   * Configure custom class name generator
   * @param generator - Function to generate class names
   */
  configure: (generator: (componentName: string, slot?: string) => string) => void;
  
  /**
   * Generate class name using current configuration
   * @param componentName - Component name
   * @param slot - Optional slot name
   * @returns Generated class name
   */
  generate: (componentName: string, slot?: string) => string;
  
  /**
   * Reset to default class name generation
   */
  reset: () => void;
};

import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/utils';

// Configure custom class name generation
ClassNameGenerator.configure((componentName, slot) => {
  return slot ? `${componentName}--${slot}` : componentName;
});

// Now all class generation will use the custom format
const className = ClassNameGenerator.generate('MyButton', 'root');
// Result: 'MyButton--root'

// Reset to default behavior
ClassNameGenerator.reset();

/**
 * CSS styles for visually hidden content
 */
const visuallyHidden: React.CSSProperties;

import { visuallyHidden } from '@mui/utils';

function AccessibleButton({ children, ariaLabel }) {
  return (
    <button aria-label={ariaLabel}>
      <span style={visuallyHidden}>{ariaLabel}</span>
      {children}
    </button>
  );
}

// Or with styled components
const HiddenText = styled('span')(visuallyHidden);