@heymantle/litho 0.0.14 → 0.0.15

package/dist/cjs/utilities/dates.js

@@ -139,7 +139,7 @@ var HOURLY_RANGE_PRESETS = [
         id: "last_30_minutes",
         label: "Last 30 minutes",
         value: {
-            start: (0, _dayjs.default)().startOf("minute").subtract(29, "minutes").toDate(),
+            start: (0, _dayjs.default)().subtract(30, "minutes").startOf("minute").toDate(),
             end: (0, _dayjs.default)().endOf("minute").toDate()
         }
     },
@@ -173,7 +173,7 @@ var RANGE_PRESETS = [
         id: "last_12_hours",
         label: "Last 12 hours",
         value: {
-            start: (0, _dayjs.default)().subtract(11, "hours").startOf("hour").toDate(),
+            start: (0, _dayjs.default)().subtract(12, "hours").startOf("hour").toDate(),
             end: (0, _dayjs.default)().endOf("hour").toDate()
         }
     },
@@ -182,7 +182,7 @@ var RANGE_PRESETS = [
         hideCalendar: true,
         label: "Last 24 hours",
         value: {
-            start: (0, _dayjs.default)().subtract(23, "hours").startOf("hour").toDate(),
+            start: (0, _dayjs.default)().subtract(24, "hours").startOf("hour").toDate(),
             end: (0, _dayjs.default)().endOf("hour").toDate()
         }
     },
@@ -190,7 +190,7 @@ var RANGE_PRESETS = [
         id: "last_7_days",
         label: "Last 7 days",
         value: {
-            start: (0, _dayjs.default)().subtract(6, "day").startOf("day").toDate(),
+            start: (0, _dayjs.default)().subtract(7, "day").startOf("day").toDate(),
             end: (0, _dayjs.default)().endOf("day").toDate()
         }
     },
@@ -198,7 +198,7 @@ var RANGE_PRESETS = [
         id: "last_14_days",
         label: "Last 14 days",
         value: {
-            start: (0, _dayjs.default)().subtract(13, "day").startOf("day").toDate(),
+            start: (0, _dayjs.default)().subtract(14, "day").startOf("day").toDate(),
             end: (0, _dayjs.default)().endOf("day").toDate()
         }
     },
@@ -206,7 +206,7 @@ var RANGE_PRESETS = [
         id: "last_30_days",
         label: "Last 30 days",
         value: {
-            start: (0, _dayjs.default)().subtract(29, "day").startOf("day").toDate(),
+            start: (0, _dayjs.default)().subtract(30, "day").startOf("day").toDate(),
             end: (0, _dayjs.default)().endOf("day").toDate()
         }
     },
@@ -214,7 +214,7 @@ var RANGE_PRESETS = [
         id: "last_90_days",
         label: "Last 90 days",
         value: {
-            start: (0, _dayjs.default)().subtract(89, "day").startOf("day").toDate(),
+            start: (0, _dayjs.default)().subtract(90, "day").startOf("day").toDate(),
             end: (0, _dayjs.default)().endOf("day").toDate()
         }
     },

package/dist/esm/components/Card.js

@@ -501,7 +501,7 @@ var sectionBodyStyles = tv({
 };
 Card.Section.displayName = "Card.Section";
 var clickableRowStyles = tv({
-    base: "Litho-Card__Row py-1.5 px-2.5 cursor-pointer rounded-md hover:bg-tint-2 active:bg-tint-3",
+    base: "Litho-Card__Row py-1.5 px-2.5 @md:px-3 cursor-pointer rounded-md hover:bg-tint-2 active:bg-tint-3",
     variants: {
         disabled: {
             true: "opacity-50 cursor-not-allowed pointer-events-none"

package/dist/esm/components/Disclosure.js

@@ -1,3 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+var styles = tv({
+    base: "Litho-Disclosure relative",
+    variants: {
+        flush: {
+            true: "pl-4",
+            false: "pl-7.5 @md:pl-7"
+        }
+    },
+    defaultVariants: {
+        flush: false
+    }
+});
+var borderStyles = tv({
+    base: "Litho-Disclosure__Border absolute top-0 w-px h-full bg-tint-5 dark:bg-tint-alt-5",
+    variants: {
+        flush: {
+            true: "left-0.5",
+            false: "left-[9px]"
+        }
+    },
+    defaultVariants: {
+        flush: false
+    }
+});
 /**
  * Renders a Disclosure component that displays content with disclosure styling.
  *
@@ -18,15 +44,20 @@
  * <Disclosure className="mt-4">
  *   <Text>This is disclosure content with margin</Text>
  * </Disclosure>
- */ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function Disclosure() {
+ */ function Disclosure() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var children = props.children, className = props.className;
+    var children = props.children, className = props.className, _props_flush = props.flush, flush = _props_flush === void 0 ? false : _props_flush;
+    var classes = styles({
+        flush: flush
+    });
+    var borderClasses = borderStyles({
+        flush: flush
+    });
     return /*#__PURE__*/ _jsxs("div", {
-        className: "relative pl-7.5 @md:pl-7".concat(className ? " ".concat(className) : ""),
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
         children: [
             /*#__PURE__*/ _jsx("div", {
-                className: "absolute left-[9px] top-0 w-px h-full bg-tint-5 dark:bg-tint-alt-5"
+                className: borderClasses
             }),
             /*#__PURE__*/ _jsx("div", {
                 children: children

package/dist/esm/components/DropZone.js

@@ -69,6 +69,42 @@ import SkeletonText from "./SkeletonText.js";
 import Spinner from "./Spinner.js";
 import Text from "./Text.js";
 import { CancelMajor, CircleAlertMajor, FileMinor, ImageMajor, ImagesMajor, MagicMajor } from "@shopify/polaris-icons";
+var normalizeDropZoneAccept = function(accept) {
+    if (!accept) return [];
+    return typeof accept === "string" ? [
+        accept
+    ] : accept;
+};
+var isFileAcceptedForDropZone = function(file) {
+    var accept = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
+    if (!accept || accept.length === 0) return true;
+    return accept.some(function(type) {
+        if (!type) return false;
+        if (type === "*/*") return true;
+        if (type.endsWith("/*")) {
+            var _type_split = _sliced_to_array(type.split("/"), 1), prefix = _type_split[0];
+            if (prefix === "*") return true;
+            return !!(file === null || file === void 0 ? void 0 : file.type) && file.type.startsWith("".concat(prefix, "/"));
+        }
+        return (file === null || file === void 0 ? void 0 : file.type) === type;
+    });
+};
+var partitionFilesByDropZoneAccept = function(files) {
+    var accept = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
+    var acceptedFiles = [];
+    var rejectedFiles = [];
+    files.forEach(function(file) {
+        if (isFileAcceptedForDropZone(file, accept)) {
+            acceptedFiles.push(file);
+        } else {
+            rejectedFiles.push(file);
+        }
+    });
+    return {
+        acceptedFiles: acceptedFiles,
+        rejectedFiles: rejectedFiles
+    };
+};
 var dropZoneStyles = tv({
     base: "Litho-DropZone w-full flex items-center justify-center p-4 border border-form-border border-dashed rounded-md focus:outline-hidden",
     variants: {
@@ -130,11 +166,7 @@ var dropZoneStyles = tv({
  */ function DropZone() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var id = props.id, label = props.label, labelHidden = props.labelHidden, labelAction = props.labelAction, tooltip = props.tooltip, labelVariant = props.labelVariant, _props_type = props.type, type = _props_type === void 0 ? "file" : _props_type, _accept = props.accept, _props_allowMultiple = props.allowMultiple, allowMultiple = _props_allowMultiple === void 0 ? false : _props_allowMultiple, _props_showDropZoneWhenDisabled = props.showDropZoneWhenDisabled, showDropZoneWhenDisabled = _props_showDropZoneWhenDisabled === void 0 ? true : _props_showDropZoneWhenDisabled, _disabled = props.disabled, onDrop = props.onDrop, onDropAccepted = props.onDropAccepted, onDropRejected = props.onDropRejected, helpText = props.helpText, error = props.error, _props_uploading = props.uploading, uploading = _props_uploading === void 0 ? false : _props_uploading, _props_uploadedFiles = props.uploadedFiles, uploadedFiles = _props_uploadedFiles === void 0 ? [] : _props_uploadedFiles, _props_uploadLabel = props.uploadLabel, uploadLabel = _props_uploadLabel === void 0 ? "Drag and drop files or click to upload" : _props_uploadLabel, _props_uploadingLabel = props.uploadingLabel, uploadingLabel = _props_uploadingLabel === void 0 ? "Uploading..." : _props_uploadingLabel, _props_dragLabel = props.dragLabel, dragLabel = _props_dragLabel === void 0 ? "Release to upload" : _props_dragLabel, tmp = props.showFilePreview, _showFilePreview = tmp === void 0 ? true : tmp, previewLoading = props.previewLoading, _props_previewRows = props.previewRows, previewRows = _props_previewRows === void 0 ? 2 : _props_previewRows, onRemove = props.onRemove, onFilePreviewClick = props.onFilePreviewClick, filename = props.filename;
-    var accept = _accept ? typeof _accept === "string" ? [
-        _accept
-    ] : _accept : [
-        "*/*"
-    ];
+    var accept = normalizeDropZoneAccept(_accept);
     var inputRef = useRef(null);
     var _useState = _sliced_to_array(useState(false), 2), hasFocusWithin = _useState[0], setHasFocusWithin = _useState[1];
     var _useState1 = _sliced_to_array(useState(false), 2), isDraggingOver = _useState1[0], setIsDraggingOver = _useState1[1];
@@ -195,22 +227,7 @@ var dropZoneStyles = tv({
         setDragFileCount(0);
         if (disabled) return;
         var droppedFiles = Array.from(event.dataTransfer.files);
-        var acceptedFiles = [];
-        var rejectedFiles = [];
-        droppedFiles.forEach(function(file) {
-            var isValidType = typeAccept.length === 0 || typeAccept.some(function(type) {
-                if (type.endsWith("/*")) {
-                    return file.type.startsWith("".concat(type.split("/")[0], "/"));
-                }
-                return file.type === type;
-            });
-            var isValid = isValidType;
-            if (isValid) {
-                acceptedFiles.push(file);
-            } else {
-                rejectedFiles.push(file);
-            }
-        });
+        var _partitionFilesByDropZoneAccept = partitionFilesByDropZoneAccept(droppedFiles, typeAccept), acceptedFiles = _partitionFilesByDropZoneAccept.acceptedFiles, rejectedFiles = _partitionFilesByDropZoneAccept.rejectedFiles;
         if (onDrop) {
             onDrop(droppedFiles);
         }
@@ -223,22 +240,7 @@ var dropZoneStyles = tv({
     };
     var handleFileChange = function(event) {
         var selectedFiles = Array.from(event.target.files);
-        var acceptedFiles = [];
-        var rejectedFiles = [];
-        selectedFiles.forEach(function(file) {
-            var isValidType = typeAccept.length === 0 || typeAccept.some(function(type) {
-                if (type.endsWith("/*")) {
-                    return file.type.startsWith("".concat(type.split("/")[0], "/"));
-                }
-                return file.type === type;
-            });
-            var isValid = isValidType;
-            if (isValid) {
-                acceptedFiles.push(file);
-            } else {
-                rejectedFiles.push(file);
-            }
-        });
+        var _partitionFilesByDropZoneAccept = partitionFilesByDropZoneAccept(selectedFiles, typeAccept), acceptedFiles = _partitionFilesByDropZoneAccept.acceptedFiles, rejectedFiles = _partitionFilesByDropZoneAccept.rejectedFiles;
         if (onDrop) {
             onDrop(selectedFiles);
         }
@@ -358,6 +360,56 @@ var dropZoneStyles = tv({
         ]
     });
 }
+var DropTarget = function() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var _accept = props.accept, _props_allowMultiple = props.allowMultiple, allowMultiple = _props_allowMultiple === void 0 ? true : _props_allowMultiple, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, onDrop = props.onDrop, onDropAccepted = props.onDropAccepted, onDropRejected = props.onDropRejected, className = props.className, dragOverClassName = props.dragOverClassName, children = props.children;
+    var accept = normalizeDropZoneAccept(_accept);
+    var _useState = _sliced_to_array(useState(false), 2), isDraggingOver = _useState[0], setIsDraggingOver = _useState[1];
+    var handleDragOver = function(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!disabled) {
+            setIsDraggingOver(true);
+        }
+    };
+    var handleDragLeave = function(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsDraggingOver(false);
+    };
+    var handleDrop = function(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsDraggingOver(false);
+        if (disabled) return;
+        var droppedFiles = Array.from(event.dataTransfer.files);
+        if (allowMultiple === false) {
+            droppedFiles = droppedFiles.slice(0, 1);
+        }
+        var _partitionFilesByDropZoneAccept = partitionFilesByDropZoneAccept(droppedFiles, accept), acceptedFiles = _partitionFilesByDropZoneAccept.acceptedFiles, rejectedFiles = _partitionFilesByDropZoneAccept.rejectedFiles;
+        if (onDrop) {
+            onDrop(droppedFiles);
+        }
+        if (onDropAccepted && acceptedFiles.length > 0) {
+            onDropAccepted(acceptedFiles);
+        }
+        if (onDropRejected && rejectedFiles.length > 0) {
+            onDropRejected(rejectedFiles);
+        }
+    };
+    var dropTargetClassName = [
+        className,
+        isDraggingOver && dragOverClassName
+    ].filter(Boolean).join(" ");
+    return /*#__PURE__*/ _jsx("div", {
+        className: dropTargetClassName,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop,
+        children: children
+    });
+};
+DropZone.DropTarget = DropTarget;
 var previewContainerStyles = tv({
     base: "flex flex-col",
     variants: {

package/dist/esm/components/Layout.js

@@ -147,11 +147,13 @@ var annotatedSectionStyles = tv({
     var annotatedSectionClasses = annotatedSectionStyles({
         embedded: embedded
     });
+    var annotationColSpan = embedded ? "@md-embed:col-span-4" : "@md:col-span-4";
+    var contentColSpan = embedded ? "@md-embed:col-span-8" : "@md:col-span-8";
     return /*#__PURE__*/ _jsxs("div", {
         className: annotatedSectionClasses,
         children: [
             /*#__PURE__*/ _jsxs("div", {
-                className: "Litho-Layout__Annotation flex flex-col gap-1 @md:col-span-4 py-2",
+                className: "Litho-Layout__Annotation flex flex-col gap-1 ".concat(annotationColSpan, " py-2"),
                 children: [
                     title && (typeof title === "string" ? /*#__PURE__*/ _jsx(Text, {
                         variant: "headingMd",
@@ -164,7 +166,7 @@ var annotatedSectionStyles = tv({
                 ]
             }),
             /*#__PURE__*/ _jsx("div", {
-                className: "Litho-Layout__AnnotationContent @md:col-span-8",
+                className: "Litho-Layout__AnnotationContent ".concat(contentColSpan),
                 children: children
             })
         ]

package/dist/esm/components/Modal.js

@@ -63,7 +63,16 @@ import { useFrame } from "./Frame.js";
 import { useBodyScrollLock } from "../utilities/useBodyScrollLock.js";
 export var ModalContext = /*#__PURE__*/ createContext(false);
 var containerStyles = tv({
-    base: "Litho-ModalContainer fixed inset-0 block flex flex-col justify-end md:justify-center items-center pointer-events-none"
+    base: "Litho-ModalContainer fixed inset-0 block flex flex-col justify-end md:justify-center items-center pointer-events-none",
+    variants: {
+        hidden: {
+            true: "hidden opacity-0 pointer-events-none",
+            false: ""
+        }
+    },
+    defaultVariants: {
+        hidden: false
+    }
 });
 var styles = tv({
     base: "Litho-Modal relative bg-surface-highest shadow-modal dark:shadow-modal-dark w-full mx-auto pointer-events-auto flex flex-col overflow-hidden",
@@ -142,7 +151,7 @@ var sectionStyles = tv({
  * @returns {React.ReactPortal|null} The rendered modal component or null if not open.
  */ function Modal() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var children = props.children, title = props.title, subtitle = props.subtitle, open = props.open, onClose = props.onClose, sectioned = props.sectioned, primaryAction = props.primaryAction, secondaryAction = props.secondaryAction, _props_secondaryActions = props.secondaryActions, secondaryActions = _props_secondaryActions === void 0 ? [] : _props_secondaryActions, destructiveAction = props.destructiveAction, loading = props.loading, _props_size = props.size, size = _props_size === void 0 ? "default" : _props_size, leftAccessory = props.leftAccessory, _props_hideCloseButton = props.hideCloseButton, hideCloseButton = _props_hideCloseButton === void 0 ? false : _props_hideCloseButton, backAction = props.backAction, zIndexOverride = props.zIndexOverride, _props_autoFocusFirstInput = props.autoFocusFirstInput, autoFocusFirstInput = _props_autoFocusFirstInput === void 0 ? true : _props_autoFocusFirstInput, bodyClassName = props.bodyClassName;
+    var children = props.children, title = props.title, subtitle = props.subtitle, open = props.open, _props_hidden = props.hidden, hidden = _props_hidden === void 0 ? false : _props_hidden, onClose = props.onClose, sectioned = props.sectioned, primaryAction = props.primaryAction, secondaryAction = props.secondaryAction, _props_secondaryActions = props.secondaryActions, secondaryActions = _props_secondaryActions === void 0 ? [] : _props_secondaryActions, destructiveAction = props.destructiveAction, loading = props.loading, _props_size = props.size, size = _props_size === void 0 ? "default" : _props_size, leftAccessory = props.leftAccessory, _props_hideCloseButton = props.hideCloseButton, hideCloseButton = _props_hideCloseButton === void 0 ? false : _props_hideCloseButton, backAction = props.backAction, zIndexOverride = props.zIndexOverride, _props_autoFocusFirstInput = props.autoFocusFirstInput, autoFocusFirstInput = _props_autoFocusFirstInput === void 0 ? true : _props_autoFocusFirstInput, bodyClassName = props.bodyClassName;
     var setModalIsOpen = useFrame().setModalIsOpen;
     var modalContentRef = useRef(null);
     var hasChildren = !!children;
@@ -150,7 +159,9 @@ var sectionStyles = tv({
         sectioned: sectioned,
         size: size
     });
-    var containerClasses = containerStyles();
+    var containerClasses = containerStyles({
+        hidden: hidden
+    });
     var headerClasses = headerStyles({
         hasChildren: hasChildren
     });

package/dist/esm/components/Popover.js

@@ -133,18 +133,23 @@ var styles = tv({
  * @param {boolean} [props.sectioned=false] - Whether the popover content is sectioned with padding.
  * @param {string} [props.preferredAlignment="center"] - Preferred alignment for the popover (left, center, right).
  * @param {string} [props.preferredPosition="below"] - Preferred position for the popover (above, below, cover, left, right).
+ * @param {number} [props.horizontalOffset] - Custom horizontal offset in pixels to adjust the popover position.
  * @param {string} [props.className] - Additional class name for the popover.
  * @param {string} [props.containerClassName] - Additional class name for the popover container.
  * @returns {JSX.Element} The rendered popover component.
  */ function Popover() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var activatorWrapper = props.activatorWrapper, _props_activatorDisplayType = props.activatorDisplayType, activatorDisplayType = _props_activatorDisplayType === void 0 ? "inline-block" : _props_activatorDisplayType, activator = props.activator, children = props.children, onClose = props.onClose, active = props.active, fixed = props.fixed, zIndexOverride = props.zIndexOverride, _props_sectioned = props.sectioned, sectioned = _props_sectioned === void 0 ? false : _props_sectioned, _props_preferredAlignment = props.preferredAlignment, preferredAlignment = _props_preferredAlignment === void 0 ? "center" : _props_preferredAlignment, _props_preferredPosition = props.preferredPosition, preferredPosition = _props_preferredPosition === void 0 ? "below" : _props_preferredPosition, _props_matchActivatorWidth = props.matchActivatorWidth, matchActivatorWidth = _props_matchActivatorWidth === void 0 ? false : _props_matchActivatorWidth, _props_maxWidth = props.maxWidth, maxWidth = _props_maxWidth === void 0 ? "default" : _props_maxWidth, className = props.className, containerClassName = props.containerClassName, _props_closeOnResize = props.closeOnResize, closeOnResize = _props_closeOnResize === void 0 ? true : _props_closeOnResize, _props_debounceResizeObserver = props.debounceResizeObserver, debounceResizeObserver = _props_debounceResizeObserver === void 0 ? false : _props_debounceResizeObserver, _props_usePortal = props.usePortal, usePortal = _props_usePortal === void 0 ? true : _props_usePortal;
+    var activatorWrapper = props.activatorWrapper, _props_activatorDisplayType = props.activatorDisplayType, activatorDisplayType = _props_activatorDisplayType === void 0 ? "inline-block" : _props_activatorDisplayType, activator = props.activator, children = props.children, onClose = props.onClose, activeProp = props.active, fixed = props.fixed, zIndexOverride = props.zIndexOverride, _props_sectioned = props.sectioned, sectioned = _props_sectioned === void 0 ? false : _props_sectioned, _props_preferredAlignment = props.preferredAlignment, preferredAlignment = _props_preferredAlignment === void 0 ? "center" : _props_preferredAlignment, _props_preferredPosition = props.preferredPosition, preferredPosition = _props_preferredPosition === void 0 ? "below" : _props_preferredPosition, _props_horizontalOffset = props.horizontalOffset, horizontalOffset = _props_horizontalOffset === void 0 ? 0 : _props_horizontalOffset, _props_matchActivatorWidth = props.matchActivatorWidth, matchActivatorWidth = _props_matchActivatorWidth === void 0 ? false : _props_matchActivatorWidth, _props_maxWidth = props.maxWidth, maxWidth = _props_maxWidth === void 0 ? "default" : _props_maxWidth, className = props.className, containerClassName = props.containerClassName, _props_closeOnResize = props.closeOnResize, closeOnResize = _props_closeOnResize === void 0 ? true : _props_closeOnResize, _props_debounceResizeObserver = props.debounceResizeObserver, debounceResizeObserver = _props_debounceResizeObserver === void 0 ? false : _props_debounceResizeObserver, _props_usePortal = props.usePortal, usePortal = _props_usePortal === void 0 ? true : _props_usePortal;
     var ActivatorWrapper = activatorWrapper || "div";
     var idValue = useId();
     var idRef = useRef(idValue);
     var initialWidthRef = useRef(null);
     var popoverRef = useRef(null);
     var activatorRef = useRef(null);
+    // Check if the activator is inside an inert element (e.g., table cells covered by fixed columns)
+    var isActivatorInert = activatorRef.current ? activatorRef.current.closest('[inert]') !== null : false;
+    // When disabled, prevent popover from opening
+    var active = isActivatorInert ? false : activeProp;
     var _useState = _sliced_to_array(useState(_object_spread({
         visibility: "hidden",
         opacity: 0,
@@ -227,7 +232,7 @@ var styles = tv({
                     } else if (preferredAlignment === "right") {
                         left = fixed ? activatorRect.right - popoverRect.width : activatorRect.right + window.scrollX - popoverRect.width;
                     } else if (preferredAlignment === "center") {
-                        left = fixed ? activatorRect.left + activatorRect.width / 2 - popoverRect.width / 2 : activatorRect.left + window.scrollX + activatorRect.width / 2 - popoverRect.width / 2;
+                        left = fixed ? activatorRect.left + activatorRect.width / 2 - popoverRect.width / 2 + horizontalOffset : activatorRect.left + window.scrollX + activatorRect.width / 2 - popoverRect.width / 2 + horizontalOffset;
                     }
                 } else if (position === "above") {
                     top = fixed ? activatorRect.top - popoverRect.height - TOP_SPACING : activatorRect.top + window.scrollY - popoverRect.height - TOP_SPACING;
@@ -236,7 +241,7 @@ var styles = tv({
                     } else if (preferredAlignment === "right") {
                         left = fixed ? activatorRect.right - popoverRect.width : activatorRect.right + window.scrollX - popoverRect.width;
                     } else if (preferredAlignment === "center") {
-                        left = fixed ? activatorRect.left + activatorRect.width / 2 - popoverRect.width / 2 : activatorRect.left + window.scrollX + activatorRect.width / 2 - popoverRect.width / 2;
+                        left = fixed ? activatorRect.left + activatorRect.width / 2 - popoverRect.width / 2 + horizontalOffset : activatorRect.left + window.scrollX + activatorRect.width / 2 - popoverRect.width / 2 + horizontalOffset;
                     }
                 } else if (position === "cover") {
                     top = fixed ? activatorRect.top : activatorRect.top + window.scrollY;
@@ -245,7 +250,7 @@ var styles = tv({
                     } else if (preferredAlignment === "right") {
                         left = fixed ? activatorRect.right - popoverRect.width : activatorRect.right + window.scrollX - popoverRect.width;
                     } else if (preferredAlignment === "center") {
-                        left = fixed ? activatorRect.left + activatorRect.width / 2 - popoverRect.width / 2 : activatorRect.left + window.scrollX + activatorRect.width / 2 - popoverRect.width / 2;
+                        left = fixed ? activatorRect.left + activatorRect.width / 2 - popoverRect.width / 2 + horizontalOffset : activatorRect.left + window.scrollX + activatorRect.width / 2 - popoverRect.width / 2 + horizontalOffset;
                     }
                 }
                 // Fallback adjustments for vertical positioning (when not in left/right mode)
@@ -258,11 +263,23 @@ var styles = tv({
                     }
                 }
                 // Fallback adjustments for horizontal positioning
-                if (left + popoverRect.width > windowWidth) {
-                    left = windowWidth - popoverRect.width - EDGE_SPACING;
-                }
-                if (left < 0) {
-                    left = EDGE_SPACING;
+                // Only apply edge constraints if we're not using center alignment with custom offset
+                // This allows center alignment to work even near edges
+                if (preferredAlignment !== "center" || horizontalOffset === 0) {
+                    if (left + popoverRect.width > windowWidth) {
+                        left = windowWidth - popoverRect.width - EDGE_SPACING;
+                    }
+                    if (left < 0) {
+                        left = EDGE_SPACING;
+                    }
+                } else {
+                    // For center alignment with offset, still respect edges but try to maintain centering
+                    if (left + popoverRect.width > windowWidth) {
+                        left = Math.max(EDGE_SPACING, windowWidth - popoverRect.width - EDGE_SPACING);
+                    }
+                    if (left < 0) {
+                        left = EDGE_SPACING;
+                    }
                 }
                 // Fallback adjustments for vertical positioning (when in left/right mode)
                 if (position === "left" || position === "right") {

package/dist/esm/components/Table.js

@@ -160,6 +160,7 @@ import Text from "./Text.js";
 import Tooltip from "./Tooltip.js";
 import { styles } from "../styles/Table.js";
 import { SelectionType } from "../utilities/useIndexResourceState.js";
+import { useMobile } from "../utilities/useMobile.js";
 import { useMounted } from "../utilities/useMounted.js";
 import useTableScrollState from "../utilities/useTableScrollState.js";
 var TableContext = /*#__PURE__*/ createContext({});
@@ -447,6 +448,8 @@ var TableWrapperContext = /*#__PURE__*/ createContext({});
                     var alignment = cellAlignment[indexAdjusted];
                     var isSortable = sortable && sortable.length > 0 && sortable[indexAdjusted];
                     var sortIndex = selectable ? indexAdjusted - 1 : indexAdjusted;
+                    // Check if this cell is covered by a fixed overlay
+                    var isCovered = !fixed && !reverseColumns && (fixedFirstColumns > 0 && indexAdjusted < fixedFirstColumns || fixedLastColumns > 0 && indexAdjusted >= headings.length - fixedLastColumns);
                     var sortContent = isSortable ? /*#__PURE__*/ _jsx("div", {
                         className: "min-h-5 ".concat(sort.index === sortIndex ? "opacity-100" : "opacity-0 group-hover:opacity-100"),
                         children: /*#__PURE__*/ _jsx(Icon, {
@@ -481,6 +484,7 @@ var TableWrapperContext = /*#__PURE__*/ createContext({});
                             ].includes(alignment) && sortContent
                         ]
                     });
+                    var hasTooltip = (heading.tooltip || heading.tooltipContent) && !isCovered;
                     return /*#__PURE__*/ _jsx(HeadingCell, {
                         className: styles.headingStyles({
                             hidden: hideCell,
@@ -498,7 +502,7 @@ var TableWrapperContext = /*#__PURE__*/ createContext({});
                             className: styles.headingLabelContainerStyles({
                                 alignment: alignment
                             }),
-                            children: heading.hidden ? null : heading.tooltip || heading.tooltipContent ? /*#__PURE__*/ _jsx(Tooltip, {
+                            children: heading.hidden ? null : hasTooltip ? /*#__PURE__*/ _jsx(Tooltip, {
                                 content: heading.tooltip || heading.tooltipContent,
                                 preferredPosition: "above",
                                 children: labelContent
@@ -614,12 +618,16 @@ var TableWrapperContext = /*#__PURE__*/ createContext({});
                     value: {
                         columnsToRender: columnsToRender,
                         reverseColumns: reverseColumns,
-                        hideCellsOnMobile: hideCellsOnMobile
+                        hideCellsOnMobile: hideCellsOnMobile,
+                        isFixedOverlay: fixed,
+                        fixedFirstColumns: fixedFirstColumns,
+                        fixedLastColumns: fixedLastColumns
                     },
                     children: /*#__PURE__*/ _jsxs("table", {
                         className: styles.tableStyles(),
                         children: [
                             hasHeadings && renderHeadings({
+                                fixed: fixed,
                                 hidden: true,
                                 columnsToRender: columnsToRender,
                                 reverseColumns: reverseColumns,
@@ -752,7 +760,8 @@ var TableWrapperContext = /*#__PURE__*/ createContext({});
             increasedTableDensity: increasedTableDensity,
             tableContainerRef: tableContainerRef,
             cellAlignment: cellAlignment,
-            noBodyCellPadding: noBodyCellPadding
+            noBodyCellPadding: noBodyCellPadding,
+            columnWidths: columnWidths
         },
         children: /*#__PURE__*/ _jsxs("div", {
             "data-id": idRef.current,
@@ -803,8 +812,7 @@ var TableWrapperContext = /*#__PURE__*/ createContext({});
                             children: renderTable({
                                 classes: "relative overflow-hidden",
                                 fixed: true,
-                                columnsToRender: fixedFirstColumns,
-                                hideCellsOnMobile: true
+                                columnsToRender: fixedFirstColumns
                             })
                         }) : /*#__PURE__*/ _jsx("div", {
                             className: styles.overflowShadowStyles({
@@ -822,8 +830,7 @@ var TableWrapperContext = /*#__PURE__*/ createContext({});
                                 classes: "relative overflow-hidden",
                                 fixed: true,
                                 columnsToRender: fixedLastColumns,
-                                reverseColumns: true,
-                                hideCellsOnMobile: true
+                                reverseColumns: true
                             })
                         }) : /*#__PURE__*/ _jsx("div", {
                             className: styles.overflowShadowStyles({
@@ -968,8 +975,11 @@ Table.Row.displayName = "Table.Row";
  */ function Cell(param) {
     var tmp = param.alignment, _alignment = tmp === void 0 ? "start" : tmp, children = param.children, _param_selectionCell = param.selectionCell, selectionCell = _param_selectionCell === void 0 ? false : _param_selectionCell;
     var _useContext = useContext(TableContext), cellAlignment = _useContext.cellAlignment, increasedTableDensity = _useContext.increasedTableDensity, selectable = _useContext.selectable, noBodyCellPadding = _useContext.noBodyCellPadding;
-    var _useContext1 = useContext(TableWrapperContext), hideCellsOnMobile = _useContext1.hideCellsOnMobile, reverseColumns = _useContext1.reverseColumns, columnsToRender = _useContext1.columnsToRender;
+    var _useContext1 = useContext(TableWrapperContext), hideCellsOnMobile = _useContext1.hideCellsOnMobile, reverseColumns = _useContext1.reverseColumns, columnsToRender = _useContext1.columnsToRender, isFixedOverlay = _useContext1.isFixedOverlay, fixedFirstColumns = _useContext1.fixedFirstColumns, fixedLastColumns = _useContext1.fixedLastColumns;
+    var isMobile = useMobile();
     var columnCount = (cellAlignment === null || cellAlignment === void 0 ? void 0 : cellAlignment.length) || 0;
+    // Use state instead of ref so changes trigger re-render
+    var _useState = _sliced_to_array(useState(-1), 2), cellIndex = _useState[0], setCellIndex = _useState[1];
     var cellIndexRef = useRef(null);
     var setCellRef = useCallback(function(node) {
         if (!node || cellIndexRef.current !== null) return;
@@ -977,16 +987,21 @@ Table.Row.displayName = "Table.Row";
         if ((parentRow === null || parentRow === void 0 ? void 0 : parentRow.tagName) === "TR") {
             var totalCells = parentRow.children.length;
             var index = node.cellIndex;
-            cellIndexRef.current = reverseColumns ? totalCells - columnsToRender + index - (totalCells - columnCount) : index;
+            var calculatedIndex = reverseColumns ? totalCells - columnsToRender + index - (totalCells - columnCount) : index;
+            cellIndexRef.current = calculatedIndex;
+            setCellIndex(calculatedIndex);
         }
     }, [
         reverseColumns,
         columnsToRender,
         columnCount
     ]);
-    var _cellIndexRef_current;
-    var cellIndex = (_cellIndexRef_current = cellIndexRef.current) !== null && _cellIndexRef_current !== void 0 ? _cellIndexRef_current : -1;
     var alignment = (cellAlignment === null || cellAlignment === void 0 ? void 0 : cellAlignment[cellIndex]) || _alignment;
+    // Check if this cell is covered by a fixed overlay
+    // When cellIndex is unknown (-1), conservatively assume the cell might be covered
+    // if there are any fixed columns. This prevents duplicate popovers during the
+    // brief window between initial render and when cellIndex is calculated.
+    var isCoveredByFixedOverlay = !isFixedOverlay && !reverseColumns && (cellIndex === -1 ? fixedFirstColumns > 0 || fixedLastColumns > 0 : fixedFirstColumns > 0 && cellIndex < fixedFirstColumns || fixedLastColumns > 0 && cellIndex >= columnCount - fixedLastColumns);
     return /*#__PURE__*/ _jsx("td", {
         ref: setCellRef,
         className: styles.cellStyles({
@@ -997,6 +1012,7 @@ Table.Row.displayName = "Table.Row";
             tableIsSelectable: selectable,
             noBodyCellPadding: noBodyCellPadding
         }),
+        inert: !isMobile && isCoveredByFixedOverlay || undefined,
         children: /*#__PURE__*/ _jsx("div", {
             className: styles.cellContentStyles({
                 alignment: alignment

package/dist/esm/components/Tabs.js

@@ -106,6 +106,7 @@ import Icon from "./Icon.js";
 import Popover from "./Popover.js";
 import { CaretDownMinor, CaretUpMinor } from "@shopify/polaris-icons";
 import * as PolarisIcons from "@shopify/polaris-icons";
+import Badge from "./Badge.js";
 var styles = tv({
     base: "Litho-Tabs flex overflow-x-hidden whitespace-nowrap",
     variants: {
@@ -140,6 +141,8 @@ var containerStyles = tv({
  * @param {boolean} [props.padded=true] - If true, applies padding to the Tabs container.
  * @param {boolean} [props.borderBottom=true] - If true, applies a bottom border to the Tabs container.
  * @param {boolean} [props.simpleTabs=false] - If true, simplifies the styling for the selected tab.
+ * @param {number} [props.badgeCount] - The number of badges to display for the tab.
+ * @param {string} [props.badgeStatus="default"] - The status of the badge.
  * @returns {JSX.Element} The Tabs component.
  */ function Tabs() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
@@ -253,6 +256,8 @@ var containerStyles = tv({
                         fullWidth: fullWidth,
                         hidden: tab.hidden,
                         simple: simpleTabs,
+                        badgeCount: tab.badgeCount,
+                        badgeStatus: tab.badgeStatus,
                         children: tab.content
                     }, "tab-".concat(tab.originalIndex));
                 })
@@ -345,9 +350,30 @@ var tabStyles = tv({
         }
     ]
 });
-function Tab() {
+/**
+ * Individual tab item component used within the Tabs component.
+ *
+ * @param {Object} props - Component props.
+ * @param {string} [props.id] - Unique identifier for the tab, used to generate the DOM element ID.
+ * @param {boolean} [props.active] - Whether the tab's disclosure popover is currently active/open.
+ * @param {boolean} [props.selected] - Whether this tab is currently selected.
+ * @param {number} [props.index] - The index position of this tab in the tabs array.
+ * @param {string|React.ReactNode} [props.icon] - Icon to display. Can be a Polaris icon name string or a custom React node.
+ * @param {Function} [props.onSelect] - Callback fired when the tab is selected, receives the tab's index.
+ * @param {Function} [props.onClick] - Custom click handler that overrides the default onSelect behavior.
+ * @param {React.ReactNode} [props.children] - The content/label to display inside the tab.
+ * @param {boolean} [props.fullWidth] - Whether the tab should expand to fill available space.
+ * @param {boolean} [props.hidden] - Whether the tab should be visually hidden (used for overflow handling).
+ * @param {boolean} [props.simple] - Whether to use simplified styling (no background, column layout).
+ * @param {boolean} [props.disclosure=false] - Whether to show a disclosure caret icon when selected.
+ * @param {boolean} [props.alwaysShowDisclosureIcon=false] - Whether to always show the disclosure icon regardless of selection state.
+ * @param {boolean} [props.disabled=false] - Whether the tab is disabled.
+ * @param {string} [props.badgeStatus="default"] - The status variant of the badge (e.g., "default", "success", "warning").
+ * @param {number} [props.badgeCount] - If provided (>= 0), displays a badge with this count.
+ * @returns {JSX.Element} The Tab component.
+ */ function Tab() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var id = props.id, active = props.active, selected = props.selected, index = props.index, icon = props.icon, onSelect = props.onSelect, onClick = props.onClick, children = props.children, fullWidth = props.fullWidth, hidden = props.hidden, simple = props.simple, _props_disclosure = props.disclosure, disclosure = _props_disclosure === void 0 ? false : _props_disclosure, _props_alwaysShowDisclosureIcon = props.alwaysShowDisclosureIcon, alwaysShowDisclosureIcon = _props_alwaysShowDisclosureIcon === void 0 ? false : _props_alwaysShowDisclosureIcon, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled;
+    var id = props.id, active = props.active, selected = props.selected, index = props.index, icon = props.icon, onSelect = props.onSelect, onClick = props.onClick, children = props.children, fullWidth = props.fullWidth, hidden = props.hidden, simple = props.simple, _props_disclosure = props.disclosure, disclosure = _props_disclosure === void 0 ? false : _props_disclosure, _props_alwaysShowDisclosureIcon = props.alwaysShowDisclosureIcon, alwaysShowDisclosureIcon = _props_alwaysShowDisclosureIcon === void 0 ? false : _props_alwaysShowDisclosureIcon, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, _props_badgeStatus = props.badgeStatus, badgeStatus = _props_badgeStatus === void 0 ? "default" : _props_badgeStatus, badgeCount = props.badgeCount;
     var polarisIcon = typeof icon === "string" ? PolarisIcons[icon] : PolarisIcons[icon === null || icon === void 0 ? void 0 : icon.displayName];
     var showDisclosure = disclosure && (selected || alwaysShowDisclosureIcon);
     var tabClasses = tabStyles({
@@ -388,6 +414,11 @@ function Tab() {
                     color: selected && simple ? "default" : selected ? "active" : "subdued",
                     size: simple ? "lg" : undefined
                 })
+            }),
+            badgeCount >= 0 && /*#__PURE__*/ _jsx(Badge, {
+                status: badgeStatus,
+                className: "ml-1",
+                children: badgeCount
             })
         ]
     });