@seeqdev/qomponents 0.0.168 → 0.0.170

package/dist/index.js

@@ -111,7 +111,7 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
     const iconPrefixString = icon.startsWith('fc') ? 'fc' : fontAwesomePrefix;
     const style = type === 'color' && color ? { color } : {};
     const sizeClass = size ? `fa-${size}` : small ? 'fa-sm' : large ? 'fa-lg' : '';
-    const appliedClassNames = `${iconPrefixString} ${icon} ${sizeClass} 
+    const appliedClassNames = `${iconPrefixString} ${icon} ${sizeClass} 
   ${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 (jsxRuntime.jsx("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number, ...tooltipData }));
@@ -123,7 +123,7 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
  *  - include tooltips and/or icons
  */
 const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, iconPosition = 'left', iconPrefix = undefined, preventBlur = false, isHtmlTooltip = false, tooltipTestId, }) => {
-    const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-md focus:tw-ring-0 focus-visible:tw-outline-none disabled:tw-pointer-events-none';
+    const baseClasses = 'tw-px-2.5 tw-rounded-md focus:tw-ring-0 focus-visible:tw-outline-none disabled:tw-pointer-events-none';
     const baseClassesByVariant = {
         'outline': 'disabled:tw-opacity-50 tw-border-solid tw-border',
         'theme': 'disabled:tw-opacity-50 tw-border-solid tw-border',
@@ -172,8 +172,9 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
         'warning': '',
     };
     const sizeClasses = {
-        sm: 'tw-text-sm',
-        lg: 'tw-text-xl',
+        xs: 'tw-text-xs tw-py-0.5',
+        sm: 'tw-text-sm tw-py-1',
+        lg: 'tw-text-xl tw-py-1',
     };
     const appliedClasses = `${baseClasses} ${baseClassesByVariant[variant]} ${sizeClasses[size]} ${classesByVariantLightTheme[variant]} ${classesByVariantDarkTheme[variant]} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]} ${extraClassNames}`;
     let tooltipData = undefined;
@@ -4992,13 +4993,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}`,
@@ -5006,7 +5007,7 @@ const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP
         right: `tw-translate-x-full -tw-right-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowRight}`,
         bottom: `-tw-bottom-2 tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowBottom}`,
     };
-    return (jsxRuntime.jsxs("div", { className: "tw-group tw-relative tw-inline-block", children: [children, jsxRuntime.jsx("div", { className: `tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms] 
+    return (jsxRuntime.jsxs("div", { className: "tw-group tw-relative tw-inline-block", children: [children, jsxRuntime.jsx("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]}`, children: text })] }));
 };
 
@@ -14463,8 +14464,8 @@ var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 const Dialog = Root$4;
 const DialogPortal = Portal$1;
 const DialogClose = Close;
-const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (jsxRuntime.jsxs(DialogPortal, { children: [jsxRuntime.jsx("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 " }), jsxRuntime.jsxs(Content$2, { 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
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (jsxRuntime.jsxs(DialogPortal, { children: [jsxRuntime.jsx("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 " }), jsxRuntime.jsxs(Content$2, { 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: [jsxRuntime.jsx(DialogTitle$1, { className: "tw-hidden" }), children] })] })));
 DialogContent.displayName = Content$2.displayName;
 const DialogHeader = (props) => (jsxRuntime.jsx("div", { className: "tw-w-full tw-justify-between", children: jsxRuntime.jsx("div", { ...props }) }));
@@ -14524,7 +14525,7 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
                 'tw-max-w-4xl': size === '4xl',
                 'tw-max-w-5xl': size === '5xl',
                 'tw-max-w-6xl': size === '6xl',
-            }, dialogClassName), children: [jsxRuntime.jsxs(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", children: [jsxRuntime.jsx("div", { className: "tw-flex tw-w-full", children: renderTitle() }), !hideCloseIcon && (jsxRuntime.jsx(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", children: jsxRuntime.jsx("span", { className: "tw-cursor-pointer", children: "\u00D7" }) }))] }), jsxRuntime.jsx(DialogDescription, { className: "modal-body tw-px-6 tw-py-4 tw-overflow-y-auto", asChild: true, children: children }), !hideFooterButtons && (jsxRuntime.jsx(DialogFooter, { className: "modal-footer tw-px-6 tw-py-4", children: modalFooter ?? (jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-justify-between", "data-testid": "modalFooter", children: [jsxRuntime.jsx("div", { className: "tw-flex tw-justify-start", children: customButton && (jsxRuntime.jsx(Button, { label: customButtonLabel, onClick: onClickCustomButton, disabled: disableCustomButton, extraClassNames: "tw-justify-start tw-min-w-[100px]", testId: "customButton", variant: customButtonVariant })) }), jsxRuntime.jsxs("div", { className: "tw-flex tw-justify-end", children: [jsxRuntime.jsx("div", { className: "tw-flex tw-items-center", children: middleFooterSection }), !hideCancelButton && (jsxRuntime.jsx(DialogClose, { asChild: true, children: jsxRuntime.jsx(Button, { label: cancelButtonLabel, extraClassNames: "tw-mr-5 tw-min-w-[100px]", tooltip: cancelButtonTooltip, variant: "outline", stopPropagation: false, testId: "cancelButton" }) })), !hideSubmitButton && (jsxRuntime.jsx(Button, { label: submitButtonLabel, onClick: handleSubmit, disabled: disableSubmitButton || isLoading, variant: submitButtonVariant, stopPropagation: stopPropagationSubmitButton, tooltip: submitButtonTooltip, icon: isLoading ? 'fc-loading-notch tw-animate-spin' : undefined, iconPosition: "left", testId: "submitButton", extraClassNames: "tw-min-w-[100px]" }))] })] })) }))] }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, {}));
+            }, dialogClassName), children: [jsxRuntime.jsxs(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", children: [jsxRuntime.jsx("div", { className: "tw-flex tw-w-full", children: renderTitle() }), !hideCloseIcon && (jsxRuntime.jsx(DialogClose, { autoFocus: false, className: "[&:has(:focus-visible)]:none tw-opacity-70 tw-bg-transparent hover:tw-opacity-100  close tw-text-base tw-cursor-pointer tw-ml-4", "data-testid": "closeButton", children: jsxRuntime.jsx("span", { className: "tw-cursor-pointer", children: "\u00D7" }) }))] }), jsxRuntime.jsx(DialogDescription, { className: "modal-body tw-px-6 tw-py-4 tw-overflow-y-auto", asChild: true, children: children }), !hideFooterButtons && (jsxRuntime.jsx(DialogFooter, { className: "modal-footer tw-px-6 tw-py-4", children: modalFooter ?? (jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-justify-between", "data-testid": "modalFooter", children: [jsxRuntime.jsx("div", { className: "tw-flex tw-justify-start", children: customButton && (jsxRuntime.jsx(Button, { label: customButtonLabel, onClick: onClickCustomButton, disabled: disableCustomButton, extraClassNames: "tw-justify-start tw-min-w-[100px]", testId: "customButton", variant: customButtonVariant })) }), jsxRuntime.jsxs("div", { className: "tw-flex tw-justify-end", children: [jsxRuntime.jsx("div", { className: "tw-flex tw-items-center", children: middleFooterSection }), !hideCancelButton && (jsxRuntime.jsx(DialogClose, { asChild: true, children: jsxRuntime.jsx(Button, { label: cancelButtonLabel, extraClassNames: "tw-mr-5 tw-min-w-[100px]", tooltip: cancelButtonTooltip, variant: "outline", stopPropagation: false, testId: "cancelButton" }) })), !hideSubmitButton && (jsxRuntime.jsx(Button, { label: submitButtonLabel, onClick: handleSubmit, disabled: disableSubmitButton || isLoading, variant: submitButtonVariant, stopPropagation: stopPropagationSubmitButton, tooltip: submitButtonTooltip, icon: isLoading ? 'fc-loading-notch tw-animate-spin' : undefined, iconPosition: "left", testId: "submitButton", extraClassNames: "tw-min-w-[100px]" }))] })] })) }))] }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, {}));
 };
 
 function createCollection(name) {
@@ -15453,8 +15454,8 @@ const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassN
     };
     React__namespace.useEffect(() => clearHoverTimeout, []);
     const renderContent = () => {
-        return (jsxRuntime.jsx(Content2$3, { 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", children: jsxRuntime.jsxs("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
+        return (jsxRuntime.jsx(Content2$3, { 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", children: jsxRuntime.jsxs("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 || ''}`, children: [hasArrow && (jsxRuntime.jsx(Arrow2$2, { asChild: true, children: jsxRuntime.jsx("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" }) })), children] }) }));
     };
     const renderPopover = (popoverOpenState) => {
@@ -16598,7 +16599,7 @@ const Alert = ({ children, dismissible = true, onClose, show = true, variant, te
  * @param tooltipProps - props to pass to the tooltip
  */
 const SvgIcon = ({ onClick, icon, color, type = 'default', extraClassNames, viewBox = '0 0 19 19', id, testId, customId, ...tooltipProps }) => {
-    const appliedClassNames = `${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none 
+    const appliedClassNames = `${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none 
   tw-outline-none`;
     const tooltipData = getQTipData(tooltipProps);
     const appliedType = type === 'default' ? 'currentColor' : 'rgb(var(--sq-icon))';
@@ -28834,7 +28835,7 @@ const Carousel = ({ testId = 'carousel-id', activeIndex = 0, extraClassNames = '
 };
 
 const buttonTypes = ['button', 'reset', 'submit', 'link'];
-const buttonSizes = ['sm', 'lg'];
+const buttonSizes = ['xs', 'sm', 'lg'];
 const buttonVariants = ['outline', 'theme', 'theme-light', 'warning', 'danger', 'no-border'];
 const iconPositions = ['left', 'right'];