analytica-frontend-lib/dist/Stepper/index.d.ts

Repositório público dos componentes utilizados nas plataformas da Analytica Ensino

/**
 * Stepper size variants
 */
type StepperSize = 'small' | 'medium' | 'large' | 'extraLarge';
/**
 * Step state variants
 */
type StepState = 'pending' | 'current' | 'completed';
/**
 * Individual step data interface
 */
export interface StepData {
    /** Unique identifier for the step */
    id: string;
    /** Label text for the step */
    label: string;
    /** Current state of the step */
    state: StepState;
}
/**
 * Size configurations - Following design system pattern from CSS specifications
 * Small size based on exact CSS: width 58px, height 38px, gap 8px
 */
declare const SIZE_CLASSES: {
    readonly small: {
        readonly container: "gap-2";
        readonly stepWidth: "w-[58px]";
        readonly stepHeight: "h-[38px]";
        readonly indicator: "w-5 h-5";
        readonly progressBar: "h-0.5";
        readonly indicatorTextSize: "2xs";
        readonly labelTextSize: "xs";
        readonly iconSize: "w-3 h-3";
    };
    readonly medium: {
        readonly container: "gap-3";
        readonly stepWidth: "w-[110px]";
        readonly stepHeight: "h-[48px]";
        readonly indicator: "w-6 h-6";
        readonly progressBar: "h-0.5";
        readonly indicatorTextSize: "2xs";
        readonly labelTextSize: "xs";
        readonly iconSize: "w-3.5 h-3.5";
    };
    readonly large: {
        readonly container: "gap-4";
        readonly stepWidth: "w-[160px]";
        readonly stepHeight: "h-[58px]";
        readonly indicator: "w-7 h-7";
        readonly progressBar: "h-1";
        readonly indicatorTextSize: "xs";
        readonly labelTextSize: "sm";
        readonly iconSize: "w-4 h-4";
    };
    readonly extraLarge: {
        readonly container: "gap-5";
        readonly stepWidth: "w-[200px]";
        readonly stepHeight: "h-[68px]";
        readonly indicator: "w-8 h-8";
        readonly progressBar: "h-1";
        readonly indicatorTextSize: "xs";
        readonly labelTextSize: "sm";
        readonly iconSize: "w-[18px] h-[18px]";
    };
};
/**
 * State configurations using exact colors from CSS specs
 * pending: #A3A3A3 = text-400 (etapa ainda não iniciada)
 * current: #1C61B2 = primary-800 (etapa atual sendo preenchida) - baseado no CSS fornecido
 * completed: #1C61B2 = primary-800 (etapa concluída)
 * text color: #FEFEFF = text
 */
declare const STATE_CLASSES: {
    readonly pending: {
        readonly progressBar: "bg-text-400";
        readonly indicator: "bg-text-400";
        readonly indicatorText: "text-white";
        readonly label: "text-text-400";
    };
    readonly current: {
        readonly progressBar: "bg-primary-800";
        readonly indicator: "bg-primary-800";
        readonly indicatorText: "text-white";
        readonly label: "text-primary-800";
    };
    readonly completed: {
        readonly progressBar: "bg-primary-400";
        readonly indicator: "bg-primary-400";
        readonly indicatorText: "text-white";
        readonly label: "text-primary-400";
    };
};
/**
 * Type for size classes
 */
type SizeClassType = (typeof SIZE_CLASSES)[keyof typeof SIZE_CLASSES];
/**
 * Type for state classes
 */
type StateClassType = (typeof STATE_CLASSES)[keyof typeof STATE_CLASSES];
/**
 * Props for individual step component
 */
interface StepProps {
    step: StepData;
    index: number;
    size: StepperSize;
    sizeClasses: SizeClassType;
    stateClasses: StateClassType;
    isLast: boolean;
    className?: string;
}
/**
 * Individual Step component - Based on exact design specifications
 * Layout: flex-column with progress bar at top, then icon+label row
 * Fully responsive for mobile, tablets, and laptops
 */
export declare const Step: ({ step, index, size: _size, sizeClasses, stateClasses, isLast: _isLast, className, }: StepProps) => import("react/jsx-runtime").JSX.Element;
/**
 * Stepper component props interface
 */
export type StepperProps = {
    /** Array of step data */
    steps: StepData[];
    /** Size variant of the stepper */
    size?: StepperSize;
    /** Current active step index */
    currentStep?: number;
    /** Additional CSS classes */
    className?: string;
    /** Step container CSS classes */
    stepClassName?: string;
    /** Progress indicator (e.g., "Etapa 2 de 4") */
    showProgress?: boolean;
    /** Custom progress text */
    progressText?: string;
    /** Make stepper responsive (vertical on mobile) */
    responsive?: boolean;
};
/**
 * Stepper component for Analytica Ensino platforms
 *
 * A progress stepper component that displays a sequence of steps with different states.
 * Follows the exact design specifications with proper spacing, colors, and layout.
 * Fully responsive for mobile, tablets, and laptops.
 *
 * Design specifications:
 * - Based on exact CSS specifications from Figma design
 * - Fully responsive: mobile (320px+) -> tablets (640px+) -> laptops (1024px+)
 * - Progressive sizing with responsive breakpoints that adapt to device type
 * - Consistent gaps that scale with screen size and device capabilities
 * - Consistent color scheme: pending (gray), current (dark blue), completed (light blue)
 * - Responsive design with overflow scroll on smaller devices
 * - Optimized text sizing and layout for each device category
 *
 * @example
 * ```tsx
 * // Basic stepper - automatically responsive for all devices
 * <Stepper steps={steps} currentStep={1} />
 *
 * // Custom styling with full responsive behavior
 * <Stepper steps={steps} size="medium" showProgress responsive />
 * ```
 */
declare const Stepper: ({ steps: initialSteps, size, currentStep, className, stepClassName, showProgress, progressText, responsive, }: StepperProps) => import("react/jsx-runtime").JSX.Element;
export default Stepper;
//# sourceMappingURL=Stepper.d.ts.map