its-just-ui/dist/components/Progress/Progress.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';

export type ProgressVariant = 'linear' | 'circular' | 'dashed' | 'striped' | 'segmented' | 'pill' | 'bordered' | 'minimal' | 'bar-with-label' | 'overlay-style' | 'inverse';
export type ProgressSize = 'sm' | 'md' | 'lg';
export type ProgressStatus = 'default' | 'success' | 'warning' | 'error' | 'paused' | 'complete' | 'failed';
export type ProgressTransition = 'none' | 'smooth' | 'bounce' | 'elastic' | 'spring';
export type ProgressLabelPosition = 'top' | 'bottom' | 'left' | 'right' | 'overlay' | 'inside' | 'outside';
export interface ProgressSegment {
    id: string;
    value: number;
    color?: string;
    label?: string;
    status?: ProgressStatus;
}
export interface ProgressThreshold {
    value: number;
    color?: string;
    label?: string;
    callback?: (value: number) => void;
}
export interface ProgressSimulationConfig {
    enabled: boolean;
    duration?: number;
    increment?: number;
    interval?: number;
    autoComplete?: boolean;
    pauseOnHover?: boolean;
}
export interface ProgressContextValue {
    value: number;
    bufferValue?: number;
    segments: ProgressSegment[];
    isIndeterminate: boolean;
    status: ProgressStatus;
    variant: ProgressVariant;
    size: ProgressSize;
    transition: ProgressTransition;
    trackColor?: string;
    barColor?: string;
    backgroundColor?: string;
    borderColor?: string;
    borderRadius?: string;
    height?: string;
    thickness?: string;
    diameter?: string;
    gradient?: string;
    trackGradient?: string;
    barGradient?: string;
    textColor?: string;
    percentageColor?: string;
    progressColor?: string;
    trackBorderColor?: string;
    barBorderColor?: string;
    trackBorderWidth?: string;
    barBorderWidth?: string;
    trackOpacity?: number;
    barOpacity?: number;
    animationDuration?: string;
    customCSS?: React.CSSProperties;
    boxShadow?: string;
    labelFontSize?: string;
    labelFontWeight?: string;
    labelColor?: string;
    labelSize?: ProgressSize;
    labelPosition?: ProgressLabelPosition;
    onValueChange?: (value: number) => void;
    onComplete?: () => void;
    onError?: (error: Error) => void;
    onThresholdCross?: (threshold: ProgressThreshold, value: number) => void;
    thresholds: ProgressThreshold[];
    renderLabel?: (value: number, status: ProgressStatus) => React.ReactNode;
    renderIndicator?: (status: ProgressStatus, isIndeterminate: boolean) => React.ReactNode;
    barShadow?: string;
    loadingText?: string | React.ReactNode;
    showLoadingText?: boolean;
    loadingTextPosition?: 'center' | 'bottom' | 'top';
    customLoadingContent?: React.ReactNode;
    hideIndicator?: boolean;
    ariaLabel?: string;
    ariaDescribedBy?: string;
    trackId: string;
    barId: string;
    labelId: string;
    descriptionId: string;
}
export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onError'> {
    value?: number;
    bufferValue?: number;
    segments?: ProgressSegment[];
    isIndeterminate?: boolean;
    variant?: ProgressVariant;
    size?: ProgressSize;
    status?: ProgressStatus;
    transition?: ProgressTransition;
    simulation?: ProgressSimulationConfig;
    thresholds?: ProgressThreshold[];
    trackColor?: string;
    barColor?: string;
    bufferColor?: string;
    secondaryBarColor?: string;
    _secondaryBarColor?: string;
    completeColor?: string;
    _completeColor?: string;
    errorColor?: string;
    _errorColor?: string;
    stripeColor?: string;
    _stripeColor?: string;
    backgroundColor?: string;
    borderColor?: string;
    borderWidth?: string;
    _borderWidth?: string;
    borderRadius?: string;
    boxShadow?: string;
    barShadow?: string;
    _barShadow?: string;
    gradient?: string;
    trackGradient?: string;
    barGradient?: string;
    textColor?: string;
    percentageColor?: string;
    progressColor?: string;
    trackBorderColor?: string;
    barBorderColor?: string;
    trackBorderWidth?: string;
    barBorderWidth?: string;
    trackOpacity?: number;
    barOpacity?: number;
    animationDuration?: string;
    customCSS?: React.CSSProperties;
    focusRingColor?: string;
    _focusRingColor?: string;
    focusRingWidth?: string;
    _focusRingWidth?: string;
    focusRingOffset?: string;
    _focusRingOffset?: string;
    focusBoxShadow?: string;
    _focusBoxShadow?: string;
    height?: string;
    thickness?: string;
    _thickness?: string;
    diameter?: string;
    width?: string;
    labelFontSize?: string;
    labelFontWeight?: string;
    labelFontFamily?: string;
    _labelFontFamily?: string;
    labelColor?: string;
    labelSize?: ProgressSize;
    labelPosition?: ProgressLabelPosition;
    descriptionFontSize?: string;
    _descriptionFontSize?: string;
    descriptionColor?: string;
    _descriptionColor?: string;
    padding?: string;
    margin?: string;
    gap?: string;
    _gap?: string;
    renderLabel?: (value: number, status: ProgressStatus) => React.ReactNode;
    _renderLabel?: (value: number, status: ProgressStatus) => React.ReactNode;
    renderTrack?: () => React.ReactNode;
    _renderTrack?: () => React.ReactNode;
    renderBar?: (value: number) => React.ReactNode;
    _renderBar?: (value: number) => React.ReactNode;
    renderThreshold?: (threshold: ProgressThreshold) => React.ReactNode;
    _renderThreshold?: (threshold: ProgressThreshold) => React.ReactNode;
    renderIndicator?: (status: ProgressStatus, isIndeterminate: boolean) => React.ReactNode;
    _renderIndicator?: (status: ProgressStatus, isIndeterminate: boolean) => React.ReactNode;
    renderTooltip?: (value: number, status: ProgressStatus) => React.ReactNode;
    _renderTooltip?: (value: number, status: ProgressStatus) => React.ReactNode;
    onChange?: (value: number) => void;
    onComplete?: () => void;
    onError?: (error: Error) => void;
    onThresholdCross?: (threshold: ProgressThreshold, value: number) => void;
    onPause?: () => void;
    _onPause?: () => void;
    onResume?: () => void;
    _onResume?: () => void;
    onCancel?: () => void;
    _onCancel?: () => void;
    ariaLabel?: string;
    ariaLabelledBy?: string;
    ariaDescribedBy?: string;
    loadingText?: string | React.ReactNode;
    showLoadingText?: boolean;
    loadingTextPosition?: 'center' | 'bottom' | 'top';
    customLoadingContent?: React.ReactNode;
    hideIndicator?: boolean;
    children?: React.ReactNode;
}
export interface ProgressTrackProps extends React.HTMLAttributes<HTMLDivElement> {
    /** Additional props can be added here in the future */
    __placeholder?: never;
}
export interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
    value?: number;
    segment?: ProgressSegment;
    /** Additional props can be added here in the future */
    __placeholder?: never;
}
export interface ProgressLabelProps extends React.HTMLAttributes<HTMLSpanElement> {
    format?: 'percentage' | 'fraction' | 'custom';
    showValue?: boolean;
    customContent?: React.ReactNode;
}
export interface ProgressValueDescriptionProps extends React.HTMLAttributes<HTMLSpanElement> {
    content?: string;
}
export interface ProgressThresholdMarkerProps extends React.HTMLAttributes<HTMLDivElement> {
    threshold: ProgressThreshold;
}
export interface ProgressIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
    type?: 'spinner' | 'check' | 'error' | 'custom';
    customIcon?: React.ReactNode;
}
export interface ProgressContainerProps extends React.HTMLAttributes<HTMLDivElement> {
    /** Additional props can be added here in the future */
    __placeholder?: never;
}
export declare const useProgress: () => ProgressContextValue;
declare const ProgressTrack: React.ForwardRefExoticComponent<ProgressTrackProps & React.RefAttributes<HTMLDivElement>>;
declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
declare const ProgressLabel: React.ForwardRefExoticComponent<ProgressLabelProps & React.RefAttributes<HTMLSpanElement>>;
declare const ProgressValueDescription: React.ForwardRefExoticComponent<ProgressValueDescriptionProps & React.RefAttributes<HTMLSpanElement>>;
declare const ProgressThresholdMarker: React.ForwardRefExoticComponent<ProgressThresholdMarkerProps & React.RefAttributes<HTMLDivElement>>;
declare const ProgressIndicator: React.ForwardRefExoticComponent<ProgressIndicatorProps & React.RefAttributes<HTMLDivElement>>;
declare const ProgressContainer: React.ForwardRefExoticComponent<ProgressContainerProps & React.RefAttributes<HTMLDivElement>>;
declare const ProgressComponent: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
type ProgressWithSubcomponentsType = typeof ProgressComponent & {
    Track: typeof ProgressTrack;
    Bar: typeof ProgressBar;
    Label: typeof ProgressLabel;
    ValueDescription: typeof ProgressValueDescription;
    ThresholdMarker: typeof ProgressThresholdMarker;
    Indicator: typeof ProgressIndicator;
    Container: typeof ProgressContainer;
};
declare const ProgressWithSubcomponents: ProgressWithSubcomponentsType;
export { ProgressWithSubcomponents as Progress };
export { ProgressTrack, ProgressBar, ProgressLabel, ProgressValueDescription, ProgressThresholdMarker, ProgressIndicator, ProgressContainer, };