@heymantle/litho 0.0.12 → 0.0.14

package/dist/cjs/components/ToastProvider.js

@@ -0,0 +1,342 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get default () {
+        return _default;
+    },
+    get useToast () {
+        return useToast;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _react = require("react");
+var _reactdom = require("react-dom");
+var _ToastNotification = /*#__PURE__*/ _interop_require_default(require("./ToastNotification"));
+var _Frame = require("./Frame");
+var _Stack = /*#__PURE__*/ _interop_require_default(require("./Stack"));
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+var ToastContext = /*#__PURE__*/ (0, _react.createContext)(null);
+var useToast = function() {
+    var context = (0, _react.useContext)(ToastContext);
+    if (!context) {
+        // Return a no-op function if used outside provider
+        return {
+            show: function() {
+                console.warn("useToast must be used within a ToastProvider");
+            },
+            dismiss: function() {},
+            dismissAll: function() {}
+        };
+    }
+    return context;
+};
+/**
+ * ToastProvider component that manages multiple toast notifications.
+ * Handles stacking and positioning of multiple toasts.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {React.ReactNode} props.children - Child components that can use the toast system.
+ * @param {'topRight' | 'topLeft' | 'topCenter' | 'bottomRight' | 'bottomLeft' | 'bottomCenter'} [props.defaultPosition='topRight'] - Default position for toasts.
+ * @param {number} [props.maxToasts=5] - Maximum number of toasts to display at once.
+ * @param {number} [props.stackGap=2] - Gap in pixels between stacked toasts.
+ * @returns {JSX.Element} The provider component.
+ */ function ToastProvider(param) {
+    var children = param.children, _param_defaultPosition = param.defaultPosition, defaultPosition = _param_defaultPosition === void 0 ? "topRight" : _param_defaultPosition, _param_maxToasts = param.maxToasts, maxToasts = _param_maxToasts === void 0 ? 5 : _param_maxToasts, _param_stackGap = param.stackGap, stackGap = _param_stackGap === void 0 ? 2 : _param_stackGap;
+    var _useState = _sliced_to_array((0, _react.useState)([]), 2), toasts = _useState[0], setToasts = _useState[1];
+    var _useState1 = _sliced_to_array((0, _react.useState)([]), 2), dismissingToasts = _useState1[0], setDismissingToasts = _useState1[1];
+    var _useState2 = _sliced_to_array((0, _react.useState)(null), 2), container = _useState2[0], setContainer = _useState2[1];
+    var paneIsOpen = (0, _Frame.useFrame)().paneIsOpen;
+    // Create portal container on mount
+    (0, _react.useEffect)(function() {
+        if (typeof window !== "undefined") {
+            var div = document.createElement("div");
+            div.className = "Litho-ToastProvider";
+            div.setAttribute("data-toast-container", "true");
+            document.body.appendChild(div);
+            setContainer(div);
+            return function() {
+                if (document.body.contains(div)) {
+                    document.body.removeChild(div);
+                }
+            };
+        }
+    }, []);
+    var show = (0, _react.useCallback)(function() {
+        var options = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+        var prefix = options.prefix, icon = options.icon, title = options.title, subtitle = options.subtitle, _options_duration = options.duration, duration = _options_duration === void 0 ? 2000 : _options_duration, _options_position = options.position, position = _options_position === void 0 ? defaultPosition : _options_position, _options_dismissible = options.dismissible, dismissible = _options_dismissible === void 0 ? true : _options_dismissible, onDismiss = options.onDismiss, onClick = options.onClick, id = options.id;
+        if (!title) {
+            console.warn("Toast requires a title");
+            return null;
+        }
+        var toastId = id || "toast-".concat(Date.now(), "-").concat(Math.random().toString(36).substr(2, 9));
+        setToasts(function(prev) {
+            // Limit number of toasts
+            var newToasts = _to_consumable_array(prev).concat([
+                {
+                    id: toastId,
+                    prefix: prefix,
+                    icon: icon,
+                    title: title,
+                    subtitle: subtitle,
+                    duration: duration,
+                    position: position,
+                    dismissible: dismissible,
+                    onDismiss: onDismiss,
+                    onClick: onClick
+                }
+            ]);
+            return newToasts.slice(-maxToasts);
+        });
+        return toastId;
+    }, [
+        defaultPosition,
+        maxToasts
+    ]);
+    var dismiss = (0, _react.useCallback)(function(id) {
+        // Move toast to dismissing state for exit animation, remove from active toasts immediately
+        (0, _reactdom.flushSync)(function() {
+            setToasts(function(prev) {
+                var toast = prev.find(function(t) {
+                    return t.id === id;
+                });
+                if (toast) {
+                    // Add to dismissing toasts for exit animation
+                    setDismissingToasts(function(prevDismissing) {
+                        // Avoid duplicates
+                        if (prevDismissing.find(function(t) {
+                            return t.id === id;
+                        })) {
+                            return prevDismissing;
+                        }
+                        return _to_consumable_array(prevDismissing).concat([
+                            toast
+                        ]);
+                    });
+                    // Remove from active toasts immediately so others slide up
+                    return prev.filter(function(t) {
+                        return t.id !== id;
+                    });
+                }
+                return prev;
+            });
+        });
+        // Clean up dismissing toast after animation completes
+        setTimeout(function() {
+            setDismissingToasts(function(prev) {
+                return prev.filter(function(t) {
+                    return t.id !== id;
+                });
+            });
+        }, 300); // Match transition duration
+    }, []);
+    var dismissAll = (0, _react.useCallback)(function() {
+        setToasts([]);
+    }, []);
+    var handleToastDismiss = (0, _react.useCallback)(function(id, onDismiss) {
+        // Remove from state immediately so other toasts can slide up
+        dismiss(id);
+        // Call onDismiss callback after a brief delay to allow exit animation to start
+        if (onDismiss) {
+            setTimeout(function() {
+                onDismiss();
+            }, 0);
+        }
+    }, [
+        dismiss
+    ]);
+    // Group toasts by position
+    var toastsByPosition = toasts.reduce(function(acc, toast) {
+        var position = toast.position || defaultPosition;
+        if (!acc[position]) {
+            acc[position] = [];
+        }
+        acc[position].push(toast);
+        return acc;
+    }, {});
+    if (!container) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+            children: children
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(ToastContext.Provider, {
+        value: {
+            show: show,
+            dismiss: dismiss,
+            dismissAll: dismissAll
+        },
+        children: [
+            children,
+            /*#__PURE__*/ (0, _reactdom.createPortal)(/*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    dismissingToasts.map(function(toast) {
+                        var position = toast.position || defaultPosition;
+                        var isTop = position.startsWith("top");
+                        var isBottom = position.startsWith("bottom");
+                        var dismissingStyle = {
+                            position: "fixed",
+                            zIndex: 9998
+                        };
+                        if (isTop) {
+                            dismissingStyle.top = "calc(12px + var(--litho-header-height))";
+                        } else if (isBottom) {
+                            dismissingStyle.bottom = "12px";
+                        }
+                        if (position.includes("Right")) {
+                            if (paneIsOpen) {
+                                dismissingStyle.right = "calc(12px + var(--litho-pane-width))";
+                            } else {
+                                dismissingStyle.right = "12px";
+                            }
+                        } else if (position.includes("Left")) {
+                            dismissingStyle.left = "12px";
+                        } else if (position.includes("Center")) {
+                            dismissingStyle.left = "50%";
+                            dismissingStyle.transform = "translateX(-50%)";
+                        }
+                        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            style: dismissingStyle,
+                            className: "Litho-ToastProvider__DismissingToast",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ToastNotification.default, {
+                                prefix: toast.prefix,
+                                icon: toast.icon,
+                                title: toast.title,
+                                subtitle: toast.subtitle,
+                                duration: 0,
+                                position: toast.position || defaultPosition,
+                                dismissible: false,
+                                fixed: false,
+                                isDismissing: true,
+                                onClick: toast.onClick,
+                                onDismiss: function() {}
+                            })
+                        }, "dismissing-".concat(toast.id));
+                    }),
+                    Object.entries(toastsByPosition).map(function(param) {
+                        var _param = _sliced_to_array(param, 2), position = _param[0], positionToasts = _param[1];
+                        var isTop = position.startsWith("top");
+                        var isBottom = position.startsWith("bottom");
+                        var isCenter = position.includes("Center");
+                        var containerStyle = {
+                            position: "fixed",
+                            zIndex: 9999
+                        };
+                        if (isTop) {
+                            containerStyle.top = "calc(12px + var(--litho-header-height))"; // top-4
+                        } else if (isBottom) {
+                            containerStyle.bottom = "12px"; // bottom-4
+                        }
+                        if (position.includes("Right")) {
+                            // Adjust right position when pane is open to avoid covering the pane
+                            if (paneIsOpen) {
+                                containerStyle.right = "calc(12px + var(--litho-pane-width))";
+                            } else {
+                                containerStyle.right = "12px";
+                            }
+                        } else if (position.includes("Left")) {
+                            containerStyle.left = "12px";
+                        } else if (position.includes("Center")) {
+                            containerStyle.left = "50%";
+                            containerStyle.transform = "translateX(-50%)";
+                        }
+                        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            style: containerStyle,
+                            className: "Litho-ToastProvider__Container",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
+                                gap: stackGap,
+                                children: positionToasts.map(function(toast, index) {
+                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ToastNotification.default, {
+                                        prefix: toast.prefix,
+                                        icon: toast.icon,
+                                        title: toast.title,
+                                        subtitle: toast.subtitle,
+                                        duration: toast.duration,
+                                        position: toast.position || defaultPosition,
+                                        dismissible: toast.dismissible,
+                                        fixed: false,
+                                        onClick: toast.onClick,
+                                        onDismiss: function() {
+                                            return handleToastDismiss(toast.id, toast.onDismiss);
+                                        }
+                                    }, toast.id);
+                                })
+                            })
+                        }, position);
+                    })
+                ]
+            }), container)
+        ]
+    });
+}
+var _default = ToastProvider;

package/dist/cjs/index.js

@@ -192,6 +192,12 @@ _export(exports, {
     get Tip () {
         return _Tip.default;
     },
+    get ToastNotification () {
+        return _ToastNotification.default;
+    },
+    get ToastProvider () {
+        return _ToastProvider.default;
+    },
     get Tooltip () {
         return _Tooltip.default;
     },
@@ -206,6 +212,9 @@ _export(exports, {
     },
     get useIndexResourceState () {
         return _useIndexResourceState.useIndexResourceState;
+    },
+    get useToast () {
+        return _ToastProvider.useToast;
     }
 });
 var _ActionList = /*#__PURE__*/ _interop_require_default(require("./components/ActionList"));
@@ -268,6 +277,8 @@ var _TextField = /*#__PURE__*/ _interop_require_default(require("./components/Te
 var _Thumbnail = /*#__PURE__*/ _interop_require_default(require("./components/Thumbnail"));
 var _TimePicker = /*#__PURE__*/ _interop_require_default(require("./components/TimePicker"));
 var _Tip = /*#__PURE__*/ _interop_require_default(require("./components/Tip"));
+var _ToastNotification = /*#__PURE__*/ _interop_require_default(require("./components/ToastNotification"));
+var _ToastProvider = /*#__PURE__*/ _interop_require_wildcard(require("./components/ToastProvider"));
 var _Tooltip = /*#__PURE__*/ _interop_require_default(require("./components/Tooltip"));
 var _TopBar = /*#__PURE__*/ _interop_require_default(require("./components/TopBar"));
 var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("./components/VerticalStack"));

package/dist/esm/components/DropZone.js

@@ -68,7 +68,7 @@ import Link from "./Link.js";
 import SkeletonText from "./SkeletonText.js";
 import Spinner from "./Spinner.js";
 import Text from "./Text.js";
-import { CancelMajor, CircleAlertMajor, FileMinor, ImageMajor, ImagesMajor } from "@shopify/polaris-icons";
+import { CancelMajor, CircleAlertMajor, FileMinor, ImageMajor, ImagesMajor, MagicMajor } from "@shopify/polaris-icons";
 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: {
@@ -276,6 +276,10 @@ var dropZoneStyles = tv({
                             }),
                             labelAction && /*#__PURE__*/ _jsx(Link, {
                                 onClick: labelAction.onAction,
+                                insight: labelAction.insight,
+                                icon: labelAction.insight ? MagicMajor : undefined,
+                                color: labelAction.insight ? "insight" : undefined,
+                                disabled: labelAction.disabled,
                                 removeUnderline: true,
                                 children: labelAction.content
                             })

package/dist/esm/components/Navigation.js

@@ -27,6 +27,7 @@ function _object_spread(target) {
     return target;
 }
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
 import { tv } from "tailwind-variants";
 import Badge from "./Badge.js";
 import Icon from "./Icon.js";
@@ -225,7 +226,7 @@ var linkStyles = tv({
                             })
                         ]
                     }),
-                    badge ? /*#__PURE__*/ _jsx(Badge, {
+                    badge ? /*#__PURE__*/ React.isValidElement(badge) ? badge : /*#__PURE__*/ _jsx(Badge, {
                         status: badge.status,
                         children: badge.label
                     }) : external ? /*#__PURE__*/ _jsx(Icon, {
@@ -314,10 +315,10 @@ var subLinkStyles = tv({
                     })
                 ]
             }),
-            badge && /*#__PURE__*/ _jsx(Badge, {
+            badge && /*#__PURE__*/ (React.isValidElement(badge) ? badge : /*#__PURE__*/ _jsx(Badge, {
                 status: badge.status,
                 children: badge.label
-            }),
+            })),
             accessory
         ]
     });

package/dist/esm/components/Popover.js

@@ -138,7 +138,7 @@ var styles = tv({
  * @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;
+    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 = activatorWrapper || "div";
     var idValue = useId();
     var idRef = useRef(idValue);
@@ -154,6 +154,25 @@ var styles = tv({
     }, zIndexOverride ? {
         zIndex: zIndexOverride
     } : {})), 2), popoverStyle = _useState[0], setPopoverStyle = _useState[1];
+    // Reset popover style to hidden when it becomes active - this prevents flash
+    // of stale position from previous open. useLayoutEffect ensures this happens
+    // synchronously before paint.
+    useLayoutEffect(function() {
+        if (active) {
+            setPopoverStyle(_object_spread({
+                visibility: "hidden",
+                opacity: 0,
+                position: "absolute",
+                top: 0,
+                left: 0
+            }, zIndexOverride ? {
+                zIndex: zIndexOverride
+            } : {}));
+        }
+    }, [
+        active,
+        zIndexOverride
+    ]);
     useEffect(function() {
         if (active) {
             PopoverManager.open(idRef.current);
@@ -283,7 +302,8 @@ var styles = tv({
             observer.disconnect();
         };
     }, [
-        active
+        active,
+        debounceResizeObserver
     ]);
     useLayoutEffect(function() {
         if (!active || !popoverRef.current) return;
@@ -328,7 +348,7 @@ var styles = tv({
             }
         };
         var handleResize = function handleResize() {
-            if (onClose) {
+            if (onClose && closeOnResize) {
                 onClose();
             }
         };
@@ -371,7 +391,15 @@ var styles = tv({
                 className: "Litho-PopoverActivator ".concat(activatorDisplayType),
                 children: memoizedActivator
             }),
-            active && typeof children !== "undefined" && /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsx("div", {
+            active && typeof children !== "undefined" && (usePortal ? /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsx("div", {
+                className: "@container",
+                children: /*#__PURE__*/ _jsx("div", {
+                    ref: popoverRef,
+                    style: popoverStyle,
+                    className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+                    children: children
+                })
+            }), document.body) : /*#__PURE__*/ _jsx("div", {
                 className: "@container",
                 children: /*#__PURE__*/ _jsx("div", {
                     ref: popoverRef,
@@ -379,7 +407,7 @@ var styles = tv({
                     className: "".concat(classes).concat(className ? " ".concat(className) : ""),
                     children: children
                 })
-            }), document.body)
+            }))
         ]
     });
 }

package/dist/esm/components/Select.js

@@ -52,7 +52,7 @@ import Icon from "./Icon.js";
 import Label from "./Label.js";
 import Link from "./Link.js";
 import Text from "./Text.js";
-import { CaretDownMinor, CircleAlertMajor } from "@shopify/polaris-icons";
+import { CaretDownMinor, CircleAlertMajor, MagicMajor } from "@shopify/polaris-icons";
 var styles = tv({
     base: "Litho-Select relative border border-form-border rounded-md",
     variants: {
@@ -188,6 +188,10 @@ var contentStyles = tv({
                     }),
                     labelAction && /*#__PURE__*/ _jsx(Link, {
                         onClick: labelAction.onAction,
+                        insight: labelAction.insight,
+                        icon: labelAction.insight ? MagicMajor : undefined,
+                        color: labelAction.insight ? "insight" : undefined,
+                        disabled: labelAction.disabled,
                         removeUnderline: true,
                         children: labelAction.content
                     })

package/dist/esm/components/TabNavigation.js

@@ -84,9 +84,57 @@ var gradientOverlayStyles = tv({
         }
     }
 });
+var containerStyles = tv({
+    base: "w-2 h-2 rounded-full relative overflow-hidden bg-tint-2 flex-shrink-0",
+    variants: {
+        readStatus: {
+            full: ""
+        }
+    },
+    defaultVariants: {
+        readStatus: "read"
+    }
+});
+var readStatusStyles = tv({
+    base: "absolute w-full h-full",
+    variants: {
+        readStatus: {
+            read: "",
+            partiallyRead: "bg-brand-saturated",
+            unread: "bg-brand-saturated"
+        }
+    },
+    defaultVariants: {
+        readStatus: "read"
+    }
+});
+// Small read status indicator for tabs
+function TabReadStatusIndicator(param) {
+    var readStatus = param.readStatus;
+    if (!readStatus || !readStatus.status) {
+        return null;
+    }
+    var status = readStatus.status;
+    // Don't show indicator for read threads
+    if (status === "read") {
+        return null;
+    }
+    var containerClasses = containerStyles({
+        readStatus: status
+    });
+    var readStatusClasses = readStatusStyles({
+        readStatus: status
+    });
+    return /*#__PURE__*/ _jsx("div", {
+        className: containerClasses,
+        children: /*#__PURE__*/ _jsx("div", {
+            className: readStatusClasses
+        })
+    });
+}
 // Component to handle truncation detection and tooltip
 function TabTitle(param) {
-    var title = param.title, isActive = param.isActive, tabContainerRef = param.tabContainerRef;
+    var title = param.title, isActive = param.isActive, tabContainerRef = param.tabContainerRef, readStatus = param.readStatus;
     var _useState = _sliced_to_array(useState(false), 2), shouldShowTooltip = _useState[0], setShouldShowTooltip = _useState[1];
     useLayoutEffect(function() {
         if (!title || !(tabContainerRef === null || tabContainerRef === void 0 ? void 0 : tabContainerRef.current)) {
@@ -123,16 +171,21 @@ function TabTitle(param) {
         title,
         tabContainerRef
     ]);
-    var textElement = /*#__PURE__*/ _jsx("div", {
-        className: "overflow-hidden",
-        children: /*#__PURE__*/ _jsx(Text, {
-            variant: "bodyXs",
-            className: textStyles({
-                isActive: isActive
+    var textElement = /*#__PURE__*/ _jsxs("div", {
+        className: "overflow-hidden flex items-center gap-1.5 min-w-0",
+        children: [
+            /*#__PURE__*/ _jsx(Text, {
+                variant: "bodyXs",
+                className: "".concat(textStyles({
+                    isActive: isActive
+                }), " min-w-0 flex-1"),
+                clampLines: 1,
+                children: title
             }),
-            clampLines: 1,
-            children: title
-        })
+            readStatus && /*#__PURE__*/ _jsx(TabReadStatusIndicator, {
+                readStatus: readStatus
+            })
+        ]
     });
     // Only show tooltip if text is likely truncated based on character count vs tab width
     if (shouldShowTooltip) {
@@ -251,7 +304,8 @@ function TabNavigation() {
                                 }) : /*#__PURE__*/ _jsx(TabTitle, {
                                     title: tab.title,
                                     isActive: isActive,
-                                    tabContainerRef: tabRef
+                                    tabContainerRef: tabRef,
+                                    readStatus: tab.readStatus
                                 }),
                                 /*#__PURE__*/ _jsx("div", {
                                     className: "".concat(gradientOverlayStyles({

package/dist/esm/components/TextField.js

@@ -226,10 +226,11 @@ var clearButtonStyles = tv({
  * @param {Function} [props.onKeyDown] - Handler for key down.
  * @param {ReactNode} [props.tooltip] - Tooltip content for the label.
  * @param {string} [props.className] - Additional CSS classes.
+ * @param {boolean} [props.disableFocusStyles=false] - Whether to disable focused styles when the input is focused.
  * @returns {JSX.Element} The rendered TextField component.
  */ function TextField() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var prefix = props.prefix, _suffix = props.suffix, placeholder = props.placeholder, _props_value = props.value, value = _props_value === void 0 ? "" : _props_value, helpText = props.helpText, label = props.label, _props_labelVariant = props.labelVariant, labelVariant = _props_labelVariant === void 0 ? "bodyMd" : _props_labelVariant, labelAction = props.labelAction, labelHidden = props.labelHidden, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, clearButton = props.clearButton, readOnly = props.readOnly, autoFocus = props.autoFocus, _focused = props.focused, _props_multiline = props.multiline, multiline = _props_multiline === void 0 ? 1 : _props_multiline, _props_autoGrow = props.autoGrow, autoGrow = _props_autoGrow === void 0 ? false : _props_autoGrow, maxHeight = props.maxHeight, error = props.error, connectedRight = props.connectedRight, connectedLeft = props.connectedLeft, _props_type = props.type, type = _props_type === void 0 ? "text" : _props_type, _props_subdued = props.subdued, subdued = _props_subdued === void 0 ? false : _props_subdued, name = props.name, _id = props.id, role = props.role, step = props.step, _props_largeStep = props.largeStep, largeStep = _props_largeStep === void 0 ? 10 : _props_largeStep, autoComplete = props.autoComplete, max = props.max, maxLength = props.maxLength, min = props.min, minLength = props.minLength, _props_showCharacterCount = props.showCharacterCount, showCharacterCount = _props_showCharacterCount === void 0 ? false : _props_showCharacterCount, pattern = props.pattern, spellCheck = props.spellCheck, ariaOwns = props.ariaOwns, ariaControls = props.ariaControls, ariaExpanded = props.ariaExpanded, ariaActiveDescendant = props.ariaActiveDescendant, ariaAutocomplete = props.ariaAutocomplete, _props_align = props.align, align = _props_align === void 0 ? "left" : _props_align, requiredIndicator = props.requiredIndicator, selectTextOnFocus = props.selectTextOnFocus, onClearButtonClick = props.onClearButtonClick, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, tooltip = props.tooltip, className = props.className, _inputRef = props.inputRef, icon = props.icon, _props_transparent = props.transparent, transparent = _props_transparent === void 0 ? false : _props_transparent, _props_showNumberSteppers = props.showNumberSteppers, showNumberSteppers = _props_showNumberSteppers === void 0 ? true : _props_showNumberSteppers, onKeyDown = props.onKeyDown;
+    var prefix = props.prefix, _suffix = props.suffix, placeholder = props.placeholder, _props_value = props.value, value = _props_value === void 0 ? "" : _props_value, helpText = props.helpText, label = props.label, _props_labelVariant = props.labelVariant, labelVariant = _props_labelVariant === void 0 ? "bodyMd" : _props_labelVariant, labelAction = props.labelAction, labelHidden = props.labelHidden, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, clearButton = props.clearButton, readOnly = props.readOnly, autoFocus = props.autoFocus, _focused = props.focused, _props_multiline = props.multiline, multiline = _props_multiline === void 0 ? 1 : _props_multiline, _props_autoGrow = props.autoGrow, autoGrow = _props_autoGrow === void 0 ? false : _props_autoGrow, maxHeight = props.maxHeight, error = props.error, connectedRight = props.connectedRight, connectedLeft = props.connectedLeft, _props_type = props.type, type = _props_type === void 0 ? "text" : _props_type, _props_subdued = props.subdued, subdued = _props_subdued === void 0 ? false : _props_subdued, name = props.name, _id = props.id, role = props.role, step = props.step, _props_largeStep = props.largeStep, largeStep = _props_largeStep === void 0 ? 10 : _props_largeStep, autoComplete = props.autoComplete, max = props.max, maxLength = props.maxLength, min = props.min, minLength = props.minLength, _props_showCharacterCount = props.showCharacterCount, showCharacterCount = _props_showCharacterCount === void 0 ? false : _props_showCharacterCount, pattern = props.pattern, spellCheck = props.spellCheck, ariaOwns = props.ariaOwns, ariaControls = props.ariaControls, ariaExpanded = props.ariaExpanded, ariaActiveDescendant = props.ariaActiveDescendant, ariaAutocomplete = props.ariaAutocomplete, _props_align = props.align, align = _props_align === void 0 ? "left" : _props_align, requiredIndicator = props.requiredIndicator, selectTextOnFocus = props.selectTextOnFocus, onClearButtonClick = props.onClearButtonClick, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, tooltip = props.tooltip, className = props.className, _inputRef = props.inputRef, icon = props.icon, _props_transparent = props.transparent, transparent = _props_transparent === void 0 ? false : _props_transparent, _props_showNumberSteppers = props.showNumberSteppers, showNumberSteppers = _props_showNumberSteppers === void 0 ? true : _props_showNumberSteppers, onKeyDown = props.onKeyDown, _props_disableFocusStyles = props.disableFocusStyles, disableFocusStyles = _props_disableFocusStyles === void 0 ? false : _props_disableFocusStyles;
     var suffix = maxLength && showCharacterCount ? "".concat(value.length, " / ").concat(maxLength) : _suffix;
     var _internalRef = useRef(null);
     var inputRef = _inputRef || _internalRef;
@@ -288,7 +289,7 @@ var clearButtonStyles = tv({
     var classes = styles({
         disabled: Boolean(disabled || readOnly),
         hasError: hasError,
-        focused: Boolean(focused && !readOnly),
+        focused: Boolean(focused && !readOnly && !disableFocusStyles),
         subdued: subdued,
         transparent: transparent
     });
@@ -511,6 +512,7 @@ var clearButtonStyles = tv({
                         insight: labelAction.insight,
                         icon: labelAction.insight ? MagicMajor : undefined,
                         color: labelAction.insight ? "insight" : undefined,
+                        disabled: labelAction.disabled,
                         removeUnderline: true,
                         children: labelAction.content
                     })