tharikida-ui
Version:
A modern, lightweight React UI component library with built-in theming, accessibility, and full TypeScript support. Create beautiful, responsive, and customizable web apps faster with ready-to-use components for any project.
46 lines (45 loc) • 2.8 kB
TypeScript
import React from "react";
/**
* `ProgressBar` is a horizontal bar component for displaying progress, supporting theming and custom styles.
*
* @param {object} props - The properties to customize the `ProgressBar` component.
* @param {number} props.value - Progress value (0-100).
* @param {number} [props.height=12] - Height of the bar in px.
* @param {React.CSSProperties} [props.styles] - Custom styles for the progress bar container.
* @param {string} [props.className] - Additional className for the progress bar.
* @param {number} [props.cornerRadius] - Border radius for the progress bar. Overrides theme.cornerRadius if provided.
* @param {string} [props.backgroundColor] - Background color for the progress bar. Overrides theme.backgroundColor if provided.
* @param {string} [props.primaryColor] - Primary color for the progress bar. Overrides theme.primaryColor if provided.
* @param {string} [props.borderColor] - Border color for the progress bar. Overrides theme.borderColor if provided.
* @param {string} [props.borderWidth] - Border width for the progress bar. Overrides theme.borderWidth if provided.
* @param {string} [props.borderStyle] - Border style for the progress bar. Overrides theme.borderStyle if provided.
* @param {string} [props.transitionDuration] - Transition duration for the progress bar. Overrides theme.transitionDuration if provided.
*
* @returns {JSX.Element} A styled progress bar component.
*/
export interface ProgressBarProps {
/** Progress value (0-100) */
value: number;
/** Height of the bar in px */
height?: number;
/** Custom styles */
styles?: React.CSSProperties;
/** Additional className */
className?: string;
/** Border radius for the progress bar. Overrides theme.cornerRadius if provided. */
cornerRadius?: number;
/** Background color for the progress bar. Overrides theme.backgroundColor if provided. */
backgroundColor?: string;
/** Primary color for the progress bar. Overrides theme.primaryColor if provided. */
primaryColor?: string;
/** Border color for the progress bar. Overrides theme.borderColor if provided. */
borderColor?: string;
/** Border width for the progress bar. Overrides theme.borderWidth if provided. */
borderWidth?: string;
/** Border style for the progress bar. Overrides theme.borderStyle if provided. */
borderStyle?: string;
/** Transition duration for the progress bar. Overrides theme.transitionDuration if provided. */
transitionDuration?: string;
}
declare const ProgressBar: ({ value, height, styles, className, cornerRadius, backgroundColor, primaryColor, borderColor, borderWidth, borderStyle, transitionDuration, }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;
export default ProgressBar;