@seeqdev/qomponents 0.0.46 → 0.0.48

package/dist/index.js

@@ -13748,41 +13748,6 @@ const $5d3850c4d0b4e6c7$export$dad7c95542bacce0 = (props)=>{
         }, child))
     ));
 };
-/* -------------------------------------------------------------------------------------------------
- * DialogOverlay
- * -----------------------------------------------------------------------------------------------*/ const $5d3850c4d0b4e6c7$var$OVERLAY_NAME = 'DialogOverlay';
-const $5d3850c4d0b4e6c7$export$bd1d06c79be19e17 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
-    const portalContext = $5d3850c4d0b4e6c7$var$usePortalContext($5d3850c4d0b4e6c7$var$OVERLAY_NAME, props.__scopeDialog);
-    const { forceMount: forceMount = portalContext.forceMount , ...overlayProps } = props;
-    const context = $5d3850c4d0b4e6c7$var$useDialogContext($5d3850c4d0b4e6c7$var$OVERLAY_NAME, props.__scopeDialog);
-    return context.modal ? /*#__PURE__*/ React.createElement($921a889cee6df7e8$export$99c2b779aa4e8b8b, {
-        present: forceMount || context.open
-    }, /*#__PURE__*/ React.createElement($5d3850c4d0b4e6c7$var$DialogOverlayImpl, _extends({}, overlayProps, {
-        ref: forwardedRef
-    }))) : null;
-});
-const $5d3850c4d0b4e6c7$var$DialogOverlayImpl = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
-    const { __scopeDialog: __scopeDialog , ...overlayProps } = props;
-    const context = $5d3850c4d0b4e6c7$var$useDialogContext($5d3850c4d0b4e6c7$var$OVERLAY_NAME, __scopeDialog);
-    return(/*#__PURE__*/ // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
-    // ie. when `Overlay` and `Content` are siblings
-    React.createElement($67UHm$RemoveScroll, {
-        as: $5e63c961fc1ce211$export$8c6ed5c666ac1360,
-        allowPinchZoom: true,
-        shards: [
-            context.contentRef
-        ]
-    }, /*#__PURE__*/ React.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
-        "data-state": $5d3850c4d0b4e6c7$var$getState(context.open)
-    }, overlayProps, {
-        ref: forwardedRef // We re-enable pointer-events prevented by `Dialog.Content` to allow scrolling the overlay.
-        ,
-        style: {
-            pointerEvents: 'auto',
-            ...overlayProps.style
-        }
-    }))));
-});
 /* -------------------------------------------------------------------------------------------------
  * DialogContent
  * -----------------------------------------------------------------------------------------------*/ const $5d3850c4d0b4e6c7$var$CONTENT_NAME = 'DialogContent';
@@ -13933,7 +13898,6 @@ const $5d3850c4d0b4e6c7$export$fba2fb7cd781b7ac = /*#__PURE__*/ React.forwardRef
 }
 const $5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9 = $5d3850c4d0b4e6c7$export$3ddf2d174ce01153;
 const $5d3850c4d0b4e6c7$export$602eac185826482c = $5d3850c4d0b4e6c7$export$dad7c95542bacce0;
-const $5d3850c4d0b4e6c7$export$c6fdb837b070b4ff = $5d3850c4d0b4e6c7$export$bd1d06c79be19e17;
 const $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2 = $5d3850c4d0b4e6c7$export$b6d9565de1e068cf;
 const $5d3850c4d0b4e6c7$export$f99233281efd08a0 = $5d3850c4d0b4e6c7$export$16f7638e4a34b909;
 const $5d3850c4d0b4e6c7$export$393edc798c47379d = $5d3850c4d0b4e6c7$export$94e94c2ec2c954d5;
@@ -14007,12 +13971,8 @@ var classNames = classnamesExports;
 const Dialog = $5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9;
 const DialogPortal = $5d3850c4d0b4e6c7$export$602eac185826482c;
 const DialogClose = $5d3850c4d0b4e6c7$export$f39c2d165cd861fe;
-const DialogOverlay = React.forwardRef(({ className = '', ...props }, ref) => (React.createElement($5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, { ref: ref, className: `tw-pointer-events-none tw-fixed tw-w-full tw-h-full tw-opacity-50 tw-inset-0 tw-z-[1000] tw-bg-sq-dark-background 
-    data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 
-    data-[state=open]:fade-in-0 ${className}`, ...props })));
-DialogOverlay.displayName = $5d3850c4d0b4e6c7$export$c6fdb837b070b4ff.displayName;
 const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (React.createElement(DialogPortal, null,
-    React.createElement(DialogOverlay, null),
+    React.createElement("div", { className: "tw-select-none tw-fixed tw-w-full tw-h-full tw-opacity-50 tw-inset-0 tw-z-[1000] 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-[1001] 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))));
@@ -14068,7 +14028,7 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
             titleIcon && titleIconPosition === 'right' ?
                 React.createElement("div", { className: "tw-flex tw-ml-4" }, titleIconElement) : React.createElement(React.Fragment, null)));
     };
-    return open ? (React.createElement(Dialog, { open: true, onOpenChange: onClose, modal: true },
+    return open ? (React.createElement(Dialog, { open: true, onOpenChange: onClose, modal: false },
         React.createElement(DialogContent, { onPointerDownOutside: (e) => e.preventDefault(), "data-testid": testId, className: classNames(`modalContent tw-w-full !tw-p-0 tw-border-none tw-shadow-none dark:tw-text-sq-dark-text !tw-gap-0`, {
                 'tw-max-w-xs': size === 'xs',
                 'tw-max-w-sm': size === 'sm',
@@ -14089,14 +14049,14 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
             !hideFooterButtons && React.createElement(DialogFooter, { className: "modal-footer tw-px-6 tw-py-4" }, modalFooter ??
                 React.createElement("div", { className: "tw-flex tw-w-full tw-justify-between", "data-testid": "modalFooter" },
                     React.createElement("div", { className: "tw-flex tw-justify-start" }, customButton &&
-                        React.createElement(Button, { label: customButtonLabel, onClick: onClickCustomButton, disabled: disableCustomButton, extraClassNames: "tw-justify-start tw-w-24", testId: "customButton", variant: customButtonVariant })),
+                        React.createElement(Button, { label: customButtonLabel, onClick: onClickCustomButton, disabled: disableCustomButton, extraClassNames: "tw-justify-start tw-min-w-[100px]", testId: "customButton", variant: customButtonVariant })),
                     React.createElement("div", { className: "tw-flex tw-justify-end" },
                         React.createElement("div", { className: "tw-flex tw-items-center" }, middleFooterSection),
                         !hideCancelButton &&
                             React.createElement(DialogClose, { asChild: true },
-                                React.createElement(Button, { label: cancelButtonLabel, extraClassNames: "tw-mr-2 tw-w-24", tooltip: cancelButtonTooltip, variant: "outline", stopPropagation: false, testId: "cancelButton" })),
+                                React.createElement(Button, { label: cancelButtonLabel, extraClassNames: "tw-mr-5 tw-min-w-[100px]", tooltip: cancelButtonTooltip, variant: "outline", stopPropagation: false, testId: "cancelButton" })),
                         !hideSubmitButton &&
-                            React.createElement(Button, { label: submitButtonLabel, onClick: onSubmit, disabled: disableSubmitButton, variant: "theme", stopPropagation: stopPropagationSubmitButton, tooltip: submitButtonTooltip, testId: "submitButton", extraClassNames: "tw-w-24" }))))))) : React.createElement(React.Fragment, null);
+                            React.createElement(Button, { label: submitButtonLabel, onClick: onSubmit, disabled: disableSubmitButton, variant: "theme", stopPropagation: stopPropagationSubmitButton, tooltip: submitButtonTooltip, testId: "submitButton", extraClassNames: "tw-min-w-[100px]" }))))))) : React.createElement(React.Fragment, null);
 };
 
 // We have resorted to returning slots directly rather than exposing primitives that can then
@@ -14559,14 +14519,14 @@ const $69cb30bb0017df05$export$54c2e3dc7acea9f5 = $69cb30bb0017df05$export$9712d
 const $69cb30bb0017df05$export$41fb9f06171c75f4 = $69cb30bb0017df05$export$8114b9fdfdf9f3ba;
 const $69cb30bb0017df05$export$7c6e2c02157bb7d2 = $69cb30bb0017df05$export$bd905d70e8fd2ebb;
 
-const Tabs = ({ tabs, defaultActiveTab, activeTab, onTabSelect, extraClassNames, testId, id, }) => {
+const Tabs = ({ tabs, defaultActiveTab, activeTab, onTabSelect, extraClassNames, testId, id, stretchTabs = false, }) => {
     const handleTabSelect = (tabId) => {
         if (activeTab === tabId)
             return;
         onTabSelect && onTabSelect(tabId);
     };
-    return (React.createElement($69cb30bb0017df05$export$be92b6f5f03c0fe9, { className: `tw-flex tw-flex-col tw-min-w-[300px] ${extraClassNames || ''}`, defaultValue: defaultActiveTab, "data-testid": testId, id: id, value: activeTab, onValueChange: handleTabSelect },
-        React.createElement($69cb30bb0017df05$export$54c2e3dc7acea9f5, { className: `tw-bg-sq-light-gray dark:tw-bg-gray-700 tw-flex tw-flex-row tw-gap-[2px]` }, tabs.map(({ id, icon, label, tabExtraClassNames, testId: tabsTestId, disabled }, index) => (React.createElement($69cb30bb0017df05$export$41fb9f06171c75f4, { className: `tw-bg-sq-white dark:tw-bg-sq-dark-background tw-h-[45px] tw-border-solid dark:tw-border-gray-700 tw-flex tw-flex-1 tw-justify-center tw-items-center ${tabExtraClassNames || ''} ${activeTab === id
+    return (React.createElement($69cb30bb0017df05$export$be92b6f5f03c0fe9, { className: `tw-flex tw-flex-col tw-min-w-[300px] tw-max-w-full h-full ${extraClassNames || ''}`, defaultValue: defaultActiveTab, "data-testid": testId, id: id, value: activeTab, onValueChange: handleTabSelect },
+        React.createElement($69cb30bb0017df05$export$54c2e3dc7acea9f5, { className: `tw-flex tw-flex-row tw-flex-wrap tw-z-[1001]` }, tabs.map(({ id, icon, label, tabExtraClassNames, testId: tabsTestId, disabled }, index) => (React.createElement($69cb30bb0017df05$export$41fb9f06171c75f4, { className: `tw-bg-sq-white dark:tw-bg-sq-dark-background tw-h-[45px] tw-min-w-[100px] tw-px-4 tw-border-solid dark:tw-border-gray-700 tw-flex tw-flex-1 tw-justify-center tw-items-center tw-border-r-[2px] last:tw-border-r-0 ${stretchTabs ? '' : 'tw-max-w-max tw-min-w-fit'} ${tabExtraClassNames || ''} ${activeTab === id
                 ? 'tw-border-b-sq-color-dark dark:tw-border-b-sq-color-dark tw-border-b-[3px]'
                 : 'hover:tw-bg-sq-light-gray tw-border-b-[1px] hover:dark:tw-bg-gray-700'}`, "data-testid": tabsTestId, disabled: disabled, key: `${label}-${id}-${index}`, value: id },
             React.createElement("span", null,
@@ -14574,8 +14534,7 @@ const Tabs = ({ tabs, defaultActiveTab, activeTab, onTabSelect, extraClassNames,
                 React.createElement("span", { className: `tw-text-[14px] tw-font-medium ${activeTab === id
                         ? 'dark:tw-text-sq-dark-text tw-text-gray-500'
                         : 'dark:tw-text-sq-color-dark-dark tw-text-sq-color-dark'}` }, label)))))),
-        tabs.map((tab, index) => (React.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { key: `${tab.label}_${index}_content`, value: tab.id },
-            React.createElement("div", { className: "tw-bg-sq-white dark:tw-bg-sq-dark-background tw-p-4" }, tab.content))))));
+        tabs.map((tab, index) => (React.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { className: `tw-bg-sq-white dark:tw-bg-sq-dark-background tw-h-full tw-overflow-y-auto -tw-mt-[1px] tw-border-t-[1px] tw-z-[500] ${tab.tabContentExtraClassNames || ''}`, key: `${tab.label}_${index}_content`, value: tab.id }, tab.content)))));
 };
 
 exports.Button = Button;