@seeqdev/qomponents 0.0.115 → 0.0.116

package/dist/index.js

@@ -109,7 +109,7 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
     const fontAwesomePrefix = iconPrefix ? iconPrefix : 'fa-sharp fa-regular';
     const iconPrefixString = icon.startsWith('fc') ? 'fc' : fontAwesomePrefix;
     const style = type === 'color' && color ? { color } : {};
-    const appliedClassNames = `${iconPrefixString} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''} 
+    const appliedClassNames = `${iconPrefixString} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''} 
   ${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none tw-outline-none`;
     const tooltipData = getQTipData(tooltipProps);
     return (React.createElement("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number, ...tooltipData }));
@@ -4777,13 +4777,13 @@ const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP
     const arrowBaseClasses = 'before:tw-content-[\'\'] before:tw-absolute before:tw-border-8';
     const centerArrowVertically = 'before:tw-top-1/2 before:-tw-translate-y-1/2';
     const centerArrowHorizontally = 'before:tw-left-1/2 before:-tw-translate-x-1/2';
-    const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent 
+    const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent 
   before:tw-border-l-transparent before:tw-border-r-black`;
-    const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
+    const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
    before:tw-border-l-black before:tw-border-r-transparent`;
-    const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black 
+    const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black 
   before:tw-border-r-transparent before:tw-border-l-transparent before:tw-border-t-transparent`;
-    const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent 
+    const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent 
   before:tw-border-t-black before:tw-border-l-transparent before:tw-border-r-transparent`;
     const placements = {
         top: `-tw-top-2 -tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowTop}`,
@@ -4793,7 +4793,7 @@ const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP
     };
     return (React.createElement("div", { className: "tw-group tw-relative tw-inline-block" },
         children,
-        React.createElement("div", { className: `tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms] 
+        React.createElement("div", { className: `tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms] 
         tw-absolute tw-opacity-0 group-hover:tw-opacity-100 tw-rounded tw-bg-black tw-p-2 tw-text-xs tw-text-white ${placements[position]}` }, text)));
 };
 
@@ -13781,9 +13781,9 @@ const Dialog = $5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9;
 const DialogPortal = $5d3850c4d0b4e6c7$export$602eac185826482c;
 const DialogClose = $5d3850c4d0b4e6c7$export$f39c2d165cd861fe;
 const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (React.createElement(DialogPortal, null,
-    React.createElement("div", { className: "tw-select-none tw-fixed tw-w-full tw-h-full tw-opacity-50 tw-inset-0 tw-z-[1009] tw-bg-sq-dark-background\r\n    data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0\r\n    data-[state=open]:fade-in-0 " }),
-    React.createElement($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, { ref: ref, className: `tw-fixed tw-left-[50%] tw-top-0 tw-my-6 tw-translate-x-[-50%] tw-z-[1010] tw-grid
-       tw-gap-4 tw-border tw-bg-sq-white dark:tw-bg-sq-dark-background tw-p-6 tw-shadow-lg tw-duration-200
+    React.createElement("div", { className: "tw-select-none tw-fixed tw-w-full tw-h-full tw-opacity-50 tw-inset-0 tw-z-[1009] tw-bg-sq-dark-background\n    data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0\n    data-[state=open]:fade-in-0 " }),
+    React.createElement($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, { ref: ref, className: `tw-fixed tw-left-[50%] tw-top-0 tw-my-6 tw-translate-x-[-50%] tw-z-[1010] tw-grid
+       tw-gap-4 tw-border tw-bg-sq-white dark:tw-bg-sq-dark-background tw-p-6 tw-shadow-lg tw-duration-200
        tw-rounded-lg ${className}`, ...props }, children))));
 DialogContent.displayName = $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2.displayName;
 const DialogHeader = (props) => (React.createElement("div", { className: "tw-w-full tw-justify-between" },
@@ -13855,7 +13855,7 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
                 'tw-max-w-5xl': size === '5xl',
                 'tw-max-w-6xl': size === '6xl',
             }, dialogClassName) },
-            React.createElement(DialogHeader, { className: "modal-header tw-flex tw-w-full tw-justify-between tw-border-sq-disabled-gray\r\n          dark:tw-border-sq-dark-disabled-gray tw-border-0 tw-border-b tw-px-6 tw-py-4" },
+            React.createElement(DialogHeader, { className: "modal-header tw-flex tw-w-full tw-justify-between tw-border-sq-disabled-gray\n          dark:tw-border-sq-dark-disabled-gray tw-border-0 tw-border-b tw-px-6 tw-py-4" },
                 React.createElement("div", { className: "tw-flex tw-w-full" }, renderTitle()),
                 !hideCloseIcon && (React.createElement(DialogClose, { autoFocus: false, className: "[&:has(:focus-visible)]:none tw-opacity-70 tw-bg-transparent hover:tw-opacity-100  close tw-cursor-pointer tw-ml-4", "data-testid": "closeButton" },
                     React.createElement("span", { className: "tw-cursor-pointer" }, "\u00D7")))),
@@ -14776,8 +14776,8 @@ const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassN
     React__namespace.useEffect(() => () => timeout && clearTimeout(timeout), []);
     const renderContent = () => {
         return (React__namespace.createElement($cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, { sideOffset: placementOffset, align: align, side: placement, onInteractOutside: onInteractOutside, onPointerDownOutside: onPointerDownOutside, alignOffset: isHoverEnabled ? -10 : alignOffset, asChild: true, onClick: () => isCloseOnContentClick && onOpenChange && onOpenChange(false), className: "focus-visible:tw-outline-none tw-outline-none tw-w-full tw-h-full" },
-            React__namespace.createElement("div", { "data-testid": containerTestId, className: `${bgStyles$2} ${borderStyles$2} tw-relative tw-z-[1200] tw-min-w-6 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out
-         data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade tw-text-sq-text-color
+            React__namespace.createElement("div", { "data-testid": containerTestId, className: `${bgStyles$2} ${borderStyles$2} tw-relative tw-z-[1200] tw-min-w-6 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out
+         data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade tw-text-sq-text-color
         ${extraPopoverClassNames || ''}` },
                 hasArrow && (React__namespace.createElement($cb5cc270b50c6fcd$export$21b07c8f274aebd5, { asChild: true },
                     React__namespace.createElement("div", { className: "tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-mt-[-7px] tw-rotate-45 dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-disabled-gray dark:tw-border-gray-500" }))),
@@ -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;