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.
31 lines (30 loc) • 1.6 kB
JavaScript
"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { useTheme } from "../../theme/ThemeProvider";
const ProgressBar = ({ value, height = 12, styles, className = "", cornerRadius, backgroundColor, primaryColor, borderColor, borderWidth, borderStyle, transitionDuration, }) => {
const theme = useTheme();
const radius = cornerRadius !== undefined ? cornerRadius : theme.cornerRadius;
const resolvedBackgroundColor = backgroundColor || theme.backgroundColor;
const resolvedPrimaryColor = primaryColor || theme.primaryColor;
const resolvedBorderColor = borderColor || theme.borderColor;
const resolvedBorderWidth = borderWidth || theme.borderWidth;
const resolvedBorderStyle = borderStyle || theme.borderStyle;
const resolvedTransitionDuration = transitionDuration || theme.transitionDuration;
return (_jsx("div", { className: `tharikida-progress-bar ${className}`, style: {
width: "100%",
height,
background: resolvedBackgroundColor,
border: `${resolvedBorderWidth} ${resolvedBorderStyle} ${resolvedBorderColor}`,
borderRadius: radius,
overflow: "hidden",
transition: resolvedTransitionDuration,
...styles,
}, children: _jsx("div", { style: {
width: `${Math.max(0, Math.min(100, value))}%`,
height: "100%",
background: resolvedPrimaryColor,
borderRadius: radius,
transition: `width ${resolvedTransitionDuration}`,
} }) }));
};
export default ProgressBar;