its-just-ui/dist/components/Stepper/Stepper.d.ts

ITS Just UI - The easiest and best React UI component library. Modern, accessible, and customizable components built with TypeScript and Tailwind CSS. Simple to use, production-ready components for building beautiful user interfaces with ease.

import { default as React } from 'react';

/**
 * Represents a single step in the stepper component
 */
export interface StepperStep {
    /** Unique identifier for the step */
    id: string;
    /** Title displayed for the step */
    title: string;
    /** Optional description for the step */
    description?: string;
    /** Optional icon to display instead of step number */
    icon?: React.ReactNode;
    /** Current status of the step */
    status?: 'pending' | 'current' | 'completed' | 'error';
    /** Whether the step is disabled */
    disabled?: boolean;
    /** Whether the step is optional */
    optional?: boolean;
    /** Whether the step is editable */
    editable?: boolean;
    /** Custom content to display for this step */
    content?: React.ReactNode;
    /** Optional validation function for the step */
    validate?: () => boolean | Promise<boolean>;
    /** Optional error message for the step */
    errorMessage?: string;
    /** Optional animation for the step */
    animation?: 'fade' | 'slide' | 'scale' | 'bounce' | 'none';
    /** Custom styles for the step */
    customStyles?: React.CSSProperties;
    /** Custom colors for this step */
    colors?: {
        /** Background color of the step circle */
        backgroundColor?: string;
        /** Text color of the step circle */
        textColor?: string;
        /** Border color of the step circle */
        borderColor?: string;
        /** Shadow color of the step circle */
        shadowColor?: string;
        /** Title color */
        titleColor?: string;
        /** Description color */
        descriptionColor?: string;
        /** Connector color */
        connectorColor?: string;
    };
    /** Custom animation settings for this step */
    animationSettings?: {
        /** Animation duration in milliseconds */
        duration?: number;
        /** Animation type */
        type?: 'fade' | 'slide' | 'scale' | 'bounce' | 'none';
        /** Whether animation is enabled */
        enabled?: boolean;
    };
    /** Whether to match border color with background color */
    matchBorderColor?: boolean;
    /** Whether to show shadow effects */
    showShadow?: boolean;
    /** Whether to show visual effects (animations, hover effects, etc.) */
    showEffects?: boolean;
}
/**
 * Props for the main Stepper component
 */
export interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
    /** Array of steps to display */
    steps: StepperStep[];
    /** Current active step index */
    currentStep?: number;
    /** Callback when step changes */
    onStepChange?: (stepIndex: number) => void;
    /** Layout variant of the stepper */
    variant?: 'horizontal' | 'vertical' | 'compact' | 'center';
    /** Size of the stepper components */
    size?: 'sm' | 'md' | 'lg';
    /** Overall status of the stepper */
    status?: 'default' | 'success' | 'warning' | 'error';
    /** Show step numbers in the step indicators */
    showStepNumbers?: boolean;
    /** Show step descriptions */
    showStepDescriptions?: boolean;
    /** Allow clicking on steps to navigate */
    allowStepClick?: boolean;
    /** Show loading state */
    loading?: boolean;
    /** Message to show during loading */
    loadingMessage?: string;
    /** Disable the entire stepper */
    disabled?: boolean;
    /** Mark as required field */
    required?: boolean;
    /** Label for the stepper */
    label?: string;
    /** Helper text below the stepper */
    helperText?: string;
    /** Error message to display */
    errorMessage?: string;
    /** Whether to use alternative label placement (below icon) */
    alternativeLabel?: boolean;
    /** Whether the stepper is linear (steps must be completed in order) */
    linear?: boolean;
    /** Whether to show step content inline */
    showStepContent?: boolean;
    /** Global color theme for the stepper */
    colors?: {
        /** Primary color for completed steps */
        primary?: string;
        /** Secondary color for current step */
        secondary?: string;
        /** Error color for error states */
        error?: string;
        /** Pending color for pending steps */
        pending?: string;
        /** Background color for step circles */
        backgroundColor?: string;
        /** Text color for step circles */
        textColor?: string;
        /** Border color for step circles */
        borderColor?: string;
        /** Connector color */
        connectorColor?: string;
        /** Title color */
        titleColor?: string;
        /** Description color */
        descriptionColor?: string;
    };
    /** Global animation settings */
    animationSettings?: {
        /** Global animation duration in milliseconds */
        duration?: number;
        /** Global animation type */
        type?: 'fade' | 'slide' | 'scale' | 'bounce' | 'none';
        /** Whether animations are enabled globally */
        enabled?: boolean;
        /** Whether to animate step transitions */
        stepTransitions?: boolean;
        /** Whether to animate connector changes */
        connectorAnimations?: boolean;
        /** Whether to animate content changes */
        contentAnimations?: boolean;
    };
    /** Event handlers */
    onStepClick?: (step: StepperStep, index: number) => void;
    onStepComplete?: (step: StepperStep, index: number) => void;
    onStepError?: (step: StepperStep, index: number) => void;
    /** Custom render functions */
    renderStepIcon?: (step: StepperStep, index: number) => React.ReactNode;
    renderStepContent?: (step: StepperStep, index: number) => React.ReactNode;
    renderStepTitle?: (step: StepperStep, index: number) => React.ReactNode;
    renderStepDescription?: (step: StepperStep, index: number) => React.ReactNode;
    renderStepConnector?: (step: StepperStep, index: number) => React.ReactNode;
    /** Animation settings */
    animationDuration?: number;
    animationType?: 'fade' | 'slide' | 'scale' | 'bounce' | 'none';
    /** Custom styles */
    customStyles?: React.CSSProperties;
    /** Whether to match border color with background color globally */
    matchBorderColor?: boolean;
    /** Whether to show shadow effects globally */
    showShadow?: boolean;
    /** Whether to show visual effects (animations, hover effects, etc.) globally */
    showEffects?: boolean;
}
/**
 * Context value for the stepper component
 */
export interface StepperContextValue {
    steps: StepperStep[];
    currentStep: number;
    variant: 'horizontal' | 'vertical' | 'compact' | 'center';
    size: 'sm' | 'md' | 'lg';
    status: 'default' | 'success' | 'warning' | 'error';
    showStepNumbers: boolean;
    showStepDescriptions: boolean;
    allowStepClick: boolean;
    loading: boolean;
    disabled: boolean;
    alternativeLabel: boolean;
    linear: boolean;
    showStepContent: boolean;
    colors?: {
        primary?: string;
        secondary?: string;
        error?: string;
        pending?: string;
        backgroundColor?: string;
        textColor?: string;
        borderColor?: string;
        connectorColor?: string;
        titleColor?: string;
        descriptionColor?: string;
    };
    animationSettings?: {
        duration?: number;
        type?: 'fade' | 'slide' | 'scale' | 'bounce' | 'none';
        enabled?: boolean;
        stepTransitions?: boolean;
        connectorAnimations?: boolean;
        contentAnimations?: boolean;
    };
    onStepChange: (stepIndex: number) => void;
    onStepClick: (step: StepperStep, index: number) => void;
    getStepStatus: (index: number) => 'pending' | 'current' | 'completed' | 'error';
    isStepAccessible: (index: number) => boolean;
    renderStepIcon?: (step: StepperStep, index: number) => React.ReactNode;
    renderStepContent?: (step: StepperStep, index: number) => React.ReactNode;
    renderStepTitle?: (step: StepperStep, index: number) => React.ReactNode;
    renderStepDescription?: (step: StepperStep, index: number) => React.ReactNode;
    renderStepConnector?: (step: StepperStep, index: number) => React.ReactNode;
    animationDuration: number;
    animationType: 'fade' | 'slide' | 'scale' | 'bounce' | 'none';
    matchBorderColor: boolean;
    showShadow: boolean;
    showEffects: boolean;
}
/**
 * Props for the Step component
 */
export interface StepProps extends React.HTMLAttributes<HTMLDivElement> {
    step: StepperStep;
    index: number;
    renderIcon?: (step: StepperStep, index: number) => React.ReactNode;
    renderContent?: (step: StepperStep, index: number) => React.ReactNode;
    renderTitle?: (step: StepperStep, index: number) => React.ReactNode;
    renderDescription?: (step: StepperStep, index: number) => React.ReactNode;
    renderConnector?: (step: StepperStep, index: number) => React.ReactNode;
}
/**
 * Individual Step Component
 *
 * Represents a single step in the stepper with customizable rendering options.
 */
declare const Step: React.MemoExoticComponent<React.ForwardRefExoticComponent<StepProps & React.RefAttributes<HTMLDivElement>>>;
/**
 * Props for the Connector component
 */
export interface ConnectorProps extends React.HTMLAttributes<HTMLDivElement> {
    index: number;
}
/**
 * Props for the StepList component
 */
export interface StepListProps extends React.HTMLAttributes<HTMLDivElement> {
    renderStepIcon?: (step: StepperStep, index: number) => React.ReactNode;
    renderStepContent?: (step: StepperStep, index: number) => React.ReactNode;
    renderStepTitle?: (step: StepperStep, index: number) => React.ReactNode;
    renderStepDescription?: (step: StepperStep, index: number) => React.ReactNode;
    renderStepConnector?: (step: StepperStep, index: number) => React.ReactNode;
}
/**
 * StepList Component
 *
 * Renders all steps with their connectors in the appropriate layout.
 */
declare const StepList: React.MemoExoticComponent<React.ForwardRefExoticComponent<StepListProps & React.RefAttributes<HTMLDivElement>>>;
/**
 * Props for the Content component
 */
export interface ContentProps extends React.HTMLAttributes<HTMLDivElement> {
    renderContent?: (step: StepperStep, index: number) => React.ReactNode;
}
/**
 * Content Component
 *
 * Renders the content for the current step with enhanced styling and animations.
 */
declare const Content: React.MemoExoticComponent<React.ForwardRefExoticComponent<ContentProps & React.RefAttributes<HTMLDivElement>>>;
/**
 * Props for the Navigation component
 */
export interface NavigationProps extends React.HTMLAttributes<HTMLDivElement> {
    showPrevious?: boolean;
    showNext?: boolean;
    showComplete?: boolean;
    previousText?: string;
    nextText?: string;
    completeText?: string;
    onPrevious?: () => void;
    onNext?: () => void;
    onComplete?: () => void;
}
/**
 * Navigation Component
 *
 * Provides navigation buttons for the stepper with enhanced styling and animations.
 */
declare const Navigation: React.MemoExoticComponent<React.ForwardRefExoticComponent<NavigationProps & React.RefAttributes<HTMLDivElement>>>;
declare const StepperRoot: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>> & {
    Step: React.MemoExoticComponent<React.ForwardRefExoticComponent<StepProps & React.RefAttributes<HTMLDivElement>>>;
    StepList: React.MemoExoticComponent<React.ForwardRefExoticComponent<StepListProps & React.RefAttributes<HTMLDivElement>>>;
    Content: React.MemoExoticComponent<React.ForwardRefExoticComponent<ContentProps & React.RefAttributes<HTMLDivElement>>>;
    Navigation: React.MemoExoticComponent<React.ForwardRefExoticComponent<NavigationProps & React.RefAttributes<HTMLDivElement>>>;
};
export { StepperRoot as Stepper, Step, StepList, Content, Navigation };