@seeqdev/qomponents 0.0.114 → 0.0.116

package/dist/index.js

@@ -15968,7 +15968,7 @@ const InputGroup = React.forwardRef((props, ref) => {
     const fieldAppliedClasses = `${fieldClasses} ${extraClassNames} ${lightTheme} ${darkTheme} ${borderRadius} ${showError ? errorClasses : borderColorClasses} `;
     return (React.createElement("div", { id: id, className: appliedClasses },
         field ? (React.createElement("div", { "data-testid": testId, className: `tw-flex tw-flex-1 tw-cursor-pointer active:tw-z-50 ${fieldAppliedClasses}` }, field)) : (React.createElement(TextField, { testId: testId, readonly: readonly, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, name: name, ref: ref, showError: showError, value: value, required: required, placeholder: placeholder, autoComplete: autoComplete, autoFocus: autoFocus, id: id, type: type, disabled: disabled, step: step, min: min, max: max, maxLength: maxLength, minLength: minLength, extraClassNames: `tw-flex tw-flex-1 tw-w-full tw-rounded-r-none focus:tw-z-30 ${extraClassNames}`, ...tooltipData })),
-        append.filter(Boolean).map((item, index) => item?.variant === 'button' ? (React.createElement(Button, { key: index, extraClassNames: "tw-ml-[-1px] focus:tw-z-40 focus:tw-border tw-rounded-l-none tw-rounded-r-none last:tw-rounded-r-sm", onClick: item.buttonProps.onClick, variant: item.buttonProps.variant, icon: item.buttonProps.icon, iconColor: item.buttonProps.iconColor, testId: item.buttonProps.testId, disabled: item.buttonProps.disabled, label: item.buttonProps.label, iconStyle: item.buttonProps.iconStyle, tooltip: item.buttonProps.tooltip, tooltipOptions: item.buttonProps.tooltipOptions, tooltipTestId: item.buttonProps.tooltipTestId, isHtmlTooltip: item.buttonProps.isHtmlTooltip, type: item.buttonProps.type, iconPosition: item.buttonProps.iconPosition })) : (React.createElement("div", { key: index, className: `${borderColorClasses} tw-flex tw-items-center tw-justify-center tw-rounded-none tw-ml-[-1px] active:tw-z-30 active:tw-border tw-border last:tw-rounded-r-sm` }, item?.element)))));
+        append.filter(Boolean).map((item, index) => item?.variant === 'button' ? (React.createElement(Button, { key: index, extraClassNames: "tw-ml-[-1px] focus:tw-z-40 focus:tw-border tw-rounded-l-none tw-rounded-r-none last:tw-rounded-r-sm", ...item.buttonProps })) : (React.createElement("div", { key: index, className: `${borderColorClasses} tw-flex tw-items-center tw-justify-center tw-rounded-none tw-ml-[-1px] active:tw-z-30 active:tw-border tw-border last:tw-rounded-r-sm` }, item?.element)))));
 });
 
 // packages/core/number/src/number.ts
@@ -17185,16 +17185,15 @@ Defaulting to \`null\`.`;
 var Root = Progress;
 var Indicator = ProgressIndicator;
 
-const ProgressBar = ({ value, max = 100, label, extraClasses, testId }) => {
-    const tooltipData = getQTipData({ tooltip: label });
-    const [progress, setProgress] = React.useState(0);
-    React.useEffect(() => {
-        const timer = setTimeout(() => setProgress(value), 500);
-        return () => clearTimeout(timer);
-    }, []);
-    return (React.createElement("span", { "data-testid": testId, ...tooltipData },
-        React.createElement(Root, { className: "tw-relative tw-h-[18px] tw-w-full tw-overflow-hidden tw-rounded-[2.5px] tw-bg-sq-dark-gray dark:tw-bg-sq-dark-disabled-gray", max: max, value: value },
-            React.createElement(Indicator, { className: `tw-ease-[cubic-bezier(0.65, 0, 0.35, 1)] tw-h-full tw-bg-sq-color-dark tw-transition-transform tw-duration-[660ms] ${extraClasses}`, style: { transform: `translateX(-${100 - progress}%)` } }))));
+const ProgressBar = ({ values = [], max = 100, containerExtraClasses = '', }) => {
+    return (React.createElement(Root, { className: `tw-relative tw-h-[18px] tw-w-full tw-overflow-hidden tw-rounded-[2.5px] tw-bg-sq-dark-gray dark:tw-bg-sq-dark-disabled-gray tw-flex tw-flex-1 ${containerExtraClasses}`, max: max, value: values.reduce((acc, { value }) => acc + value, 0) }, values.map(({ value, color = undefined, testId, label, extraClasses = '', labelClasses = '', ...tooltipProps }, i) => {
+        const tooltipData = getQTipData(tooltipProps);
+        return (React.createElement(Indicator, { className: `tw-ease-[cubic-bezier(0.65, 0, 0.35, 1)] tw-w-full tw-h-full tw-duration-[660ms] tw-flex tw-bg-sq-color-dark ${extraClasses}`, ...tooltipData, "data-qtip-text": tooltipProps.tooltip ? tooltipProps.tooltip : `${value}%`, "data-testid": `progress-bar-indicator-${testId ? testId : value}`, key: `${i}-${value}`, style: {
+                // Background color will default to the theme color if undefined
+                backgroundColor: values.length === 1 ? undefined : color,
+                width: `${(Number(value) / Number(max)) * 100}%`,
+            } }, label ? (React.createElement("span", { className: `tw-left-1 tw-text-xs tw-text-sq-text-color dark:tw-text-sq-dark-text tw-items-center ${labelClasses}` }, label)) : undefined));
+    })));
 };
 
 exports.Accordion = Accordion;