Framework-agnostic type system — StyleSlots, SlotOverrides, IBaseConfig, MotionOverride.

Core Types

The core type system of @mks2508/mks-ui is framework-agnostic and can be imported without React:

import type { StyleSlots, SlotOverrides, IBaseConfig, MotionOverride } from '@mks2508/mks-ui';

StyleSlots<S>

Maps slot names to CSS class strings. Each component defines its available slots:

type StyleSlots<S extends string> = Record<S, string>;

// Example: Button has 'root' and 'icon' slots
type ButtonSlots = StyleSlots<'root' | 'icon'>;
// Equivalent to: { root: string; icon: string }

Used internally by components to structure their class names across visual regions.

SlotOverrides<S>

Partial version of StyleSlots that consumers use to override specific slots:

type SlotOverrides<S extends string> = Partial<Record<S, string>>;

// Consumer usage
<Button
  slots={{
    root: 'shadow-lg',           // Override root slot
    // icon slot keeps default styles
  }}
/>

IBaseConfig

Base configuration interface extended by all component configs:

interface IBaseConfig {
  className?: string;
  style?: React.CSSProperties;
}

MotionOverride

Configuration for spring-based motion animations:

interface MotionOverride {
  initial?: object;
  animate?: object;
  exit?: object;
  transition?: object;
}

Used by animated components to allow consumers to customize entrance, active, and exit animations.

Slot Merge Pattern

All components follow a consistent className merge order:

// In component implementation:
className={cn(
  baseStyles,       // 1. CVA variant classes
  slots?.root,      // 2. Consumer slot overrides
  className         // 3. Consumer className prop
)}

This ensures consumer customizations always have the highest specificity.

State-Based Styling Types

Components with interactive states expose state objects:

interface IComponentState {
  hovered: boolean;
  pressed: boolean;
  focused: boolean;
  disabled: boolean;
}

// className and style can be functions of state
interface IStatefulProps {
  className?: string | ((state: IComponentState) => string);
  style?: CSSProperties | ((state: IComponentState) => CSSProperties);
}

This pattern is used by DataCard and other interactive components.

Per-Component Type Conventions

Convention	Example	Description
`I{Name}Props`	`IButtonProps`	Component props interface
`{Name}Slot`	`ButtonSlot`	Union type of slot names
`{Name}Variant`	`ButtonVariant`	Union type of variant values
`I{Name}Config`	`IButtonConfig`	Component configuration

Core Types

On this page