@lifespikes/ui/components/ui/stepper/stepper.d.ts

Lifespikes ui

import * as React from 'react';
import { LucideIcon } from 'lucide-react';
declare function useStepper(): {
    isLastStep: boolean;
    hasCompletedAllSteps: boolean;
    isOptionalStep: boolean;
    isDisabledStep: boolean;
    currentStep: StepItem;
    clickable?: boolean | undefined;
    isError?: boolean | undefined;
    isLoading?: boolean | undefined;
    isVertical?: boolean | undefined;
    stepCount?: number | undefined;
    expandVerticalSteps?: boolean | undefined;
    activeStep: number;
    initialStep: number;
    steps: StepItem[];
    orientation?: "horizontal" | "vertical" | undefined;
    state?: "loading" | "error" | undefined;
    responsive?: boolean | undefined;
    checkIcon?: IconType;
    errorIcon?: IconType;
    onClickStep?: ((step: number, setStep: (step: number) => void) => void) | undefined;
    mobileBreakpoint?: string | undefined;
    variant?: "circle" | "line" | "circle-alt" | undefined;
    size?: "sm" | "md" | "lg" | undefined;
    styles?: {
        /** Styles for the main container */
        'main-container'?: string | undefined;
        /** Styles for the horizontal step */
        'horizontal-step'?: string | undefined;
        /** Styles for the horizontal step container (button and labels) */
        'horizontal-step-container'?: string | undefined;
        /** Styles for the vertical step */
        'vertical-step'?: string | undefined;
        /** Styles for the vertical step container (button and labels) */
        'vertical-step-container'?: string | undefined;
        /** Styles for the vertical step content */
        'vertical-step-content'?: string | undefined;
        /** Styles for the step button container */
        'step-button-container'?: string | undefined;
        /** Styles for the label and description container */
        'step-label-container'?: string | undefined;
        /** Styles for the step label */
        'step-label'?: string | undefined;
        /** Styles for the step description */
        'step-description'?: string | undefined;
    } | undefined;
    variables?: {
        '--step-icon-size'?: string | undefined;
        '--step-gap'?: string | undefined;
    } | undefined;
    scrollTracking?: boolean | undefined;
    nextStep: () => void;
    prevStep: () => void;
    resetSteps: () => void;
    setStep: (step: number) => void;
};
type StepItem = {
    id?: string;
    label?: string;
    description?: string;
    icon?: IconType;
    optional?: boolean;
};
interface StepOptions {
    orientation?: 'vertical' | 'horizontal';
    state?: 'loading' | 'error';
    responsive?: boolean;
    checkIcon?: IconType;
    errorIcon?: IconType;
    onClickStep?: (step: number, setStep: (step: number) => void) => void;
    mobileBreakpoint?: string;
    variant?: 'circle' | 'circle-alt' | 'line';
    expandVerticalSteps?: boolean;
    size?: 'sm' | 'md' | 'lg';
    styles?: {
        /** Styles for the main container */
        'main-container'?: string;
        /** Styles for the horizontal step */
        'horizontal-step'?: string;
        /** Styles for the horizontal step container (button and labels) */
        'horizontal-step-container'?: string;
        /** Styles for the vertical step */
        'vertical-step'?: string;
        /** Styles for the vertical step container (button and labels) */
        'vertical-step-container'?: string;
        /** Styles for the vertical step content */
        'vertical-step-content'?: string;
        /** Styles for the step button container */
        'step-button-container'?: string;
        /** Styles for the label and description container */
        'step-label-container'?: string;
        /** Styles for the step label */
        'step-label'?: string;
        /** Styles for the step description */
        'step-description'?: string;
    };
    variables?: {
        '--step-icon-size'?: string;
        '--step-gap'?: string;
    };
    scrollTracking?: boolean;
}
interface StepperProps extends StepOptions {
    children?: React.ReactNode;
    className?: string;
    initialStep: number;
    steps: StepItem[];
}
declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
interface StepProps extends React.HTMLAttributes<HTMLLIElement> {
    label?: string | React.ReactNode;
    description?: string;
    icon?: IconType;
    state?: 'loading' | 'error';
    checkIcon?: IconType;
    errorIcon?: IconType;
    isCompletedStep?: boolean;
    isKeepError?: boolean;
    onClickStep?: (step: number, setStep: (step: number) => void) => void;
}
declare const Step: React.ForwardRefExoticComponent<StepProps & React.RefAttributes<HTMLLIElement>>;
type IconType = LucideIcon | React.ComponentType<any> | undefined;
export { Step, Stepper, useStepper };
export type { StepItem, StepperProps, StepProps };