@heymantle/litho 0.0.1

package/dist/esm/components/Filters.js

@@ -0,0 +1,823 @@
+"use client";
+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 _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return 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 _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+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);
+}
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { tv } from "tailwind-variants";
+import { ActionList, Button, Icon, Link, Popover, Text, TextField, Tooltip } from "../index.js";
+import { CancelSmallMinor, CaretDownMinor, DeleteMinor, HorizontalDotsMinor, PlusMinor, SearchMajor, ChevronLeftMinor, ChevronRightMinor } from "@shopify/polaris-icons";
+import { DarkModeContext } from "./AppProvider.js";
+var styles = tv({
+    base: "Litho-Filters flex items-center",
+    variants: {
+        showTextField: {
+            true: "justify-between",
+            false: ""
+        }
+    }
+});
+var filterContainerStyles = tv({
+    base: "Litho-FiltersContainer flex flex-wrap gap-1.5 items-center",
+    variants: {
+        showTextField: {
+            true: "p-2",
+            false: ""
+        },
+        padded: {
+            true: "p-2",
+            false: ""
+        }
+    }
+});
+/**
+ * Filters Component - A React component that manages filters for a given dataset.
+ * Includes functionality for visible filters, more filters, and a query field.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {Array<{
+ *   key: string,
+ *   label: string,
+ *   filter: React.ReactNode,
+ *   shortcut?: boolean,
+ *   promoted?: boolean,
+ *   onRemove?: () => void
+ * }>} props.filters - The available filters to display.
+ * @param {Array<{
+ *   key: string,
+ *   label: string,
+ *   onRemove?: () => void
+ * }>} props.appliedFilters - The currently applied filters.
+ * @param {Function} [props.onClearAll] - Callback for clearing all applied filters.
+ * @param {boolean} [props.showTextField=false] - Whether to show the query text field.
+ * @param {boolean} [props.textFieldSubdued=false] - Whether the text field should appear subdued.
+ * @param {boolean} [props.padded=false] - Whether to apply padding to the filters container.
+ * @param {string} [props.queryValue] - The current value of the query text field.
+ * @param {Function} [props.onQueryChange] - Callback for when the query text field value changes.
+ * @param {Function} [props.onQueryBlur] - Callback for when the query text field loses focus.
+ * @param {Function} [props.onQueryFocus] - Callback for when the query text field gains focus.
+ * @param {Function} [props.onQueryClear] - Callback for clearing the query text field.
+ * @param {string} [props.queryPlaceholder="Search"] - Placeholder text for the query text field.
+ * @param {boolean} [props.ignorePromotedFiltersWhenRemoving=true] - Whether to ignore promoted filters when clearing filters.
+ * @param {boolean} [props.disableQueryField=false] - Whether the query text field is disabled.
+ * @param {string} [props.className] - Additional class names for the component.
+ * @returns {JSX.Element|null} The Filters component or null if no filters are available.
+ */ function Filters(props) {
+    var _filters_filter;
+    var _props_filters = props.filters, filters = _props_filters === void 0 ? [] : _props_filters, _props_appliedFilters = props.appliedFilters, appliedFilters = _props_appliedFilters === void 0 ? [] : _props_appliedFilters, onClearAll = props.onClearAll, _props_showTextField = props.showTextField, showTextField = _props_showTextField === void 0 ? false : _props_showTextField, _props_textFieldSubdued = props.textFieldSubdued, textFieldSubdued = _props_textFieldSubdued === void 0 ? false : _props_textFieldSubdued, _props_padded = props.padded, padded = _props_padded === void 0 ? false : _props_padded, queryValue = props.queryValue, onQueryChange = props.onQueryChange, onQueryBlur = props.onQueryBlur, onQueryFocus = props.onQueryFocus, onQueryClear = props.onQueryClear, _props_queryPlaceholder = props.queryPlaceholder, queryPlaceholder = _props_queryPlaceholder === void 0 ? "Search" : _props_queryPlaceholder, _props_ignorePromotedFiltersWhenRemoving = props.ignorePromotedFiltersWhenRemoving, ignorePromotedFiltersWhenRemoving = _props_ignorePromotedFiltersWhenRemoving === void 0 ? true : _props_ignorePromotedFiltersWhenRemoving, disableQueryField = props.disableQueryField, className = props.className;
+    var classes = styles({
+        showTextField: showTextField
+    });
+    var filterContainerClasses = filterContainerStyles({
+        showTextField: showTextField,
+        padded: padded
+    });
+    var _useState = _sliced_to_array(useState(""), 2), filterSearchValue = _useState[0], setFilterSearchValue = _useState[1];
+    var _useState1 = _sliced_to_array(useState(null), 2), activePopoverKey = _useState1[0], setActivePopoverKey = _useState1[1];
+    var _useState2 = _sliced_to_array(useState([]), 2), manuallyAddedFilters = _useState2[0], setManuallyAddedFilters = _useState2[1];
+    var visibleFilters = filters.filter(function(filter) {
+        if (manuallyAddedFilters.some(function(manuallyAddedFilter) {
+            return manuallyAddedFilter.key === filter.key;
+        })) return true;
+        if (filter.shortcut) return true;
+        if (appliedFilters.some(function(appliedFilter) {
+            return appliedFilter.key === filter.key || appliedFilter.key.startsWith("".concat(filter.key, "."));
+        })) return true;
+        return false;
+    }).sort(function(a, b) {
+        if (a.shortcut && !b.shortcut) return -1;
+        if (!a.shortcut && b.shortcut) return 1;
+        return 0;
+    });
+    var moreFilters = filters.filter(function(filter) {
+        var isVisible = visibleFilters.some(function(visibleFilter) {
+            return visibleFilter.key === filter.key;
+        });
+        return !isVisible && filter.label.toLowerCase().includes(filterSearchValue.toLowerCase());
+    });
+    if (filters.length === 0) return null;
+    var showMoreFilters = ((_filters_filter = filters.filter(function(f) {
+        return !visibleFilters.some(function(v) {
+            return v.key === f.key;
+        });
+    })) === null || _filters_filter === void 0 ? void 0 : _filters_filter.length) > 0;
+    var showClearAction = onClearAll && appliedFilters.length > 0;
+    if (ignorePromotedFiltersWhenRemoving) {
+        var promotedFilters = filters.filter(function(f) {
+            return f.promoted;
+        }).map(function(f) {
+            return f.key;
+        });
+        var appliedFiltersWithoutPromoted = appliedFilters.filter(function(f) {
+            return !promotedFilters.includes(f.key);
+        });
+        showClearAction = showClearAction && appliedFiltersWithoutPromoted.length > 0;
+    }
+    var popoverAlignment = showTextField ? "right" : "left";
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+        children: [
+            showTextField && /*#__PURE__*/ _jsx("div", {
+                className: "flex-1",
+                children: /*#__PURE__*/ _jsx(Filters.TextField, {
+                    subdued: textFieldSubdued,
+                    queryValue: queryValue,
+                    onQueryChange: onQueryChange,
+                    onQueryBlur: onQueryBlur,
+                    onQueryFocus: onQueryFocus,
+                    onQueryClear: onQueryClear,
+                    queryPlaceholder: queryPlaceholder,
+                    disableQueryField: disableQueryField
+                })
+            }),
+            filters.length > 0 && /*#__PURE__*/ _jsxs("div", {
+                className: filterContainerClasses,
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "flex items-center gap-1.5",
+                        children: (visibleFilters === null || visibleFilters === void 0 ? void 0 : visibleFilters.length) > 0 && visibleFilters.map(function(filter, index) {
+                            var _visibleFilters_;
+                            var appliedFilter = appliedFilters.find(function(appliedFilter) {
+                                return appliedFilter.key === filter.key || appliedFilter.key.startsWith("".concat(filter.key, "."));
+                            });
+                            var isApplied = !!appliedFilter;
+                            var showDivider = index > 0 && ((_visibleFilters_ = visibleFilters[index - 1]) === null || _visibleFilters_ === void 0 ? void 0 : _visibleFilters_.promoted);
+                            return /*#__PURE__*/ _jsxs(React.Fragment, {
+                                children: [
+                                    showDivider && /*#__PURE__*/ _jsx("div", {
+                                        className: "h-full min-h-3 disclosure-line mx-1"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Popover, {
+                                        active: activePopoverKey === filter.key,
+                                        activatorDisplayType: "block",
+                                        onClose: function() {
+                                            return setActivePopoverKey(null);
+                                        },
+                                        preferredAlignment: popoverAlignment,
+                                        preferredPosition: "cover",
+                                        activator: /*#__PURE__*/ _jsx("div", {
+                                            children: /*#__PURE__*/ _jsx(Filters.Pill, {
+                                                label: isApplied ? appliedFilter.label : filter.label,
+                                                applied: isApplied,
+                                                onClick: function() {
+                                                    return setActivePopoverKey(activePopoverKey === filter.key ? null : filter.key);
+                                                }
+                                            }, "filter-pill-".concat(filter.key))
+                                        }),
+                                        children: /*#__PURE__*/ _jsxs("div", {
+                                            className: "flex flex-col gap-2 px-4 pt-2 pb-4 min-w-60",
+                                            children: [
+                                                /*#__PURE__*/ _jsxs("div", {
+                                                    className: "flex items-center justify-between",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(Text, {
+                                                            variant: "headingSm",
+                                                            fontWeight: "medium",
+                                                            children: filter.label
+                                                        }),
+                                                        /*#__PURE__*/ _jsx("div", {
+                                                            className: "relative -right-2",
+                                                            children: /*#__PURE__*/ _jsx(Button, {
+                                                                plain: true,
+                                                                size: "small",
+                                                                icon: CancelSmallMinor,
+                                                                onClick: function() {
+                                                                    return setActivePopoverKey(null);
+                                                                }
+                                                            })
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ _jsx("div", {
+                                                    children: filter.filter
+                                                }, "filter-content-".concat(filter.key)),
+                                                ((appliedFilter === null || appliedFilter === void 0 ? void 0 : appliedFilter.onRemove) || (filter === null || filter === void 0 ? void 0 : filter.onRemove)) && /*#__PURE__*/ _jsx("div", {
+                                                    className: "pt-1",
+                                                    children: /*#__PURE__*/ _jsx(Link, {
+                                                        bold: true,
+                                                        onClick: function() {
+                                                            if (appliedFilter === null || appliedFilter === void 0 ? void 0 : appliedFilter.onRemove) {
+                                                                appliedFilter.onRemove();
+                                                            }
+                                                            if (filter === null || filter === void 0 ? void 0 : filter.onRemove) {
+                                                                filter.onRemove();
+                                                            }
+                                                            if (isApplied) {
+                                                                setManuallyAddedFilters(function(currentManuallyAddedFilters) {
+                                                                    return currentManuallyAddedFilters.filter(function(f) {
+                                                                        return f.key !== appliedFilter.key;
+                                                                    });
+                                                                });
+                                                            }
+                                                            setActivePopoverKey(null);
+                                                        },
+                                                        children: "Remove filter"
+                                                    })
+                                                })
+                                            ]
+                                        })
+                                    }, "filter-popover-".concat(filter.key))
+                                ]
+                            }, "visible-filter-".concat(filter.key));
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(_Fragment, {
+                        children: (showMoreFilters || showClearAction) && /*#__PURE__*/ _jsxs("div", {
+                            className: "flex gap-1.5",
+                            children: [
+                                showMoreFilters && /*#__PURE__*/ _jsx(Popover, {
+                                    active: activePopoverKey === "moreFilters",
+                                    activatorDisplayType: "block",
+                                    onClose: function() {
+                                        return setActivePopoverKey(null);
+                                    },
+                                    preferredAlignment: popoverAlignment,
+                                    preferredPosition: "below",
+                                    activator: /*#__PURE__*/ _jsx(Filters.Pill, {
+                                        label: visibleFilters.length > 0 ? "More filters" : "Filters",
+                                        onClick: function() {
+                                            return setActivePopoverKey("moreFilters");
+                                        }
+                                    }),
+                                    children: /*#__PURE__*/ _jsxs("div", {
+                                        className: "max-h-75 overflow-auto",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("div", {
+                                                className: "p-2 pb-0 sticky top-0 bg-surface-highest",
+                                                children: /*#__PURE__*/ _jsx(TextField, {
+                                                    value: filterSearchValue,
+                                                    onChange: function(value) {
+                                                        return setFilterSearchValue(value);
+                                                    },
+                                                    placeholder: "Search",
+                                                    autoFocus: true,
+                                                    clearButton: true,
+                                                    onClearButtonClick: function() {
+                                                        return setFilterSearchValue("");
+                                                    }
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsx(ActionList, {
+                                                items: moreFilters.map(function(filter) {
+                                                    return {
+                                                        content: filter.label,
+                                                        onAction: function() {
+                                                            setFilterSearchValue("");
+                                                            setManuallyAddedFilters(function(currentManuallyAddedFilters) {
+                                                                return _to_consumable_array(currentManuallyAddedFilters).concat([
+                                                                    filter
+                                                                ]);
+                                                            });
+                                                            setActivePopoverKey(filter.key);
+                                                        }
+                                                    };
+                                                })
+                                            })
+                                        ]
+                                    })
+                                }),
+                                showClearAction && /*#__PURE__*/ _jsx(Filters.Pill, {
+                                    destructive: true,
+                                    onClick: onClearAll
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+var pillStyles = tv({
+    base: "Litho-Filters-Pill flex items-center justify-center rounded-full h-6.5 truncate font-medium text-sm border",
+    variants: {
+        disabled: {
+            true: "opacity-50 cursor-not-allowed",
+            false: "cursor-pointer"
+        },
+        applied: {
+            true: "",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            destructive: true,
+            class: "px-1"
+        },
+        {
+            destructive: false,
+            applied: true,
+            class: "bg-surface-highest text-highest pl-2.5 pr-1"
+        },
+        {
+            destructive: false,
+            applied: false,
+            class: "pl-1 pr-2.5 border-dashed bg-surface-normal hover:bg-surface-lower dark:border-edge-alt-subdued"
+        }
+    ]
+});
+var pillTextStyles = tv({
+    base: "leading-5",
+    variants: {
+        applied: {
+            true: "text-high",
+            false: "text-normal"
+        }
+    }
+});
+/**
+ * Filters.Pill - A subcomponent for rendering filter pills.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {string} props.label - The label of the filter pill.
+ * @param {boolean} [props.applied=false] - Whether the pill represents an applied filter.
+ * @param {boolean} [props.disabled=false] - Whether the pill is disabled.
+ * @param {boolean} [props.destructive=false] - Whether the pill represents a destructive action (e.g., remove filters).
+ * @param {Function} [props.onClick] - Callback when the pill is clicked.
+ * @returns {JSX.Element} The filter pill component.
+ */ Filters.Pill = function FiltersPill() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var label = props.label, _props_applied = props.applied, applied = _props_applied === void 0 ? false : _props_applied, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, _props_destructive = props.destructive, destructive = _props_destructive === void 0 ? false : _props_destructive, onClick = props.onClick;
+    var classes = pillStyles({
+        applied: applied,
+        disabled: disabled,
+        destructive: destructive
+    });
+    var textClasses = pillTextStyles({
+        applied: applied
+    });
+    var content = /*#__PURE__*/ _jsx("div", {
+        className: classes,
+        onClick: onClick,
+        children: destructive ? /*#__PURE__*/ _jsx(Icon, {
+            source: DeleteMinor,
+            color: "subdued"
+        }) : /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                !applied && /*#__PURE__*/ _jsx(Icon, {
+                    source: PlusMinor,
+                    color: "subdued"
+                }),
+                label && /*#__PURE__*/ _jsx("span", {
+                    className: textClasses,
+                    children: label
+                }),
+                applied && /*#__PURE__*/ _jsx(Icon, {
+                    source: CaretDownMinor,
+                    color: "subdued"
+                })
+            ]
+        })
+    });
+    if (destructive) {
+        return /*#__PURE__*/ _jsx(Tooltip, {
+            content: "Remove filters",
+            preferredPosition: "above",
+            children: content
+        });
+    }
+    return content;
+};
+Filters.Pill.displayName = "Filters.Pill";
+var tabsStyles = tv({
+    base: "Litho-FilterTabs relative"
+});
+var leftGradientStyles = tv({
+    base: "pointer-events-none absolute flex items-center justify-center top-0 left-0 h-full bg-linear-to-r from-surface-normal to-transparent transition-opacity duration-150",
+    variants: {
+        canScrollLeft: {
+            true: "opacity-100",
+            false: "opacity-0 pointer-events-none"
+        }
+    }
+});
+var rightGradientStyles = tv({
+    base: "pointer-events-none absolute flex items-center justify-center top-0 right-0 h-full bg-linear-to-l from-surface-normal to-transparent transition-opacity duration-150",
+    variants: {
+        canScrollRight: {
+            true: "opacity-100",
+            false: "opacity-0 pointer-events-none"
+        }
+    }
+});
+/**
+ * Filters.Tabs - A subcomponent for managing tabs with scrollable functionality.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {Array} props.tabs - The tabs to display.
+ * @param {Object} [props.insertBeforeTabs] - Tab to insert before the main tabs.
+ * @param {number} props.selected - The index of the selected tab.
+ * @param {Function} props.onSelect - Callback when a tab is selected.
+ * @returns {JSX.Element} The tabs component.
+ */ Filters.Tabs = function FiltersTabs() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var tabs = props.tabs, insertBeforeTabs = props.insertBeforeTabs, selected = props.selected, onSelect = props.onSelect;
+    var containerRef = useRef(null);
+    var _useState = _sliced_to_array(useState(false), 2), canScrollLeft = _useState[0], setCanScrollLeft = _useState[1];
+    var _useState1 = _sliced_to_array(useState(false), 2), canScrollRight = _useState1[0], setCanScrollRight = _useState1[1];
+    var classes = tabsStyles();
+    var leftGradientClasses = leftGradientStyles({
+        canScrollLeft: canScrollLeft
+    });
+    var rightGradientClasses = rightGradientStyles({
+        canScrollRight: canScrollRight
+    });
+    useEffect(function() {
+        var _containerRef_current;
+        var checkOverflow = function() {
+            if (containerRef.current) {
+                var _containerRef_current = containerRef.current, scrollWidth = _containerRef_current.scrollWidth, clientWidth = _containerRef_current.clientWidth;
+                setCanScrollRight(scrollWidth > clientWidth);
+            }
+        };
+        var checkScrollPosition = function() {
+            if (containerRef.current) {
+                var _containerRef_current = containerRef.current, scrollWidth = _containerRef_current.scrollWidth, scrollLeft = _containerRef_current.scrollLeft, clientWidth = _containerRef_current.clientWidth;
+                setCanScrollLeft(scrollLeft > 0);
+                setCanScrollRight(scrollLeft + clientWidth < scrollWidth);
+            }
+        };
+        checkOverflow();
+        checkScrollPosition();
+        (_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.addEventListener("scroll", checkScrollPosition);
+        window.addEventListener("resize", checkOverflow);
+        return function() {
+            var _containerRef_current;
+            window.removeEventListener("resize", checkOverflow);
+            (_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.removeEventListener("scroll", checkScrollPosition);
+        };
+    }, []);
+    var scrollToSelectedTab = function() {
+        if (containerRef.current && selected !== undefined) {
+            var selectedTab = containerRef.current.children[selected];
+            if (selectedTab) {
+                var offsetLeft = selectedTab.offsetLeft, offsetWidth = selectedTab.offsetWidth;
+                var clientWidth = containerRef.current.clientWidth;
+                var targetScrollLeft = offsetLeft + offsetWidth / 2 - clientWidth / 2;
+                containerRef.current.scrollTo({
+                    left: targetScrollLeft,
+                    behavior: "smooth"
+                });
+            }
+        }
+    };
+    useEffect(function() {
+        if (!canScrollLeft && !canScrollRight) return;
+        scrollToSelectedTab();
+    }, [
+        selected
+    ]);
+    var handleScroll = function(direction) {
+        if (!containerRef.current) return;
+        var _containerRef_current = containerRef.current, scrollLeft = _containerRef_current.scrollLeft, offsetWidth = _containerRef_current.offsetWidth;
+        var children = Array.from(containerRef.current.children);
+        var overlayOffset = 44;
+        var visibleStart = scrollLeft + overlayOffset;
+        var visibleEnd = scrollLeft + offsetWidth - overlayOffset;
+        var targetIndex = -1;
+        if (direction === "left") {
+            var reversedChildren = _to_consumable_array(children).reverse();
+            for(var i = 0; i < reversedChildren.length; i++){
+                var child = reversedChildren[i];
+                var childStart = child.offsetLeft;
+                var childEnd = child.offsetLeft + child.offsetWidth;
+                if (childEnd > visibleStart && childStart < visibleStart) {
+                    targetIndex = children.length - 1 - i;
+                    break;
+                }
+            }
+        } else {
+            for(var i1 = 0; i1 < children.length; i1++){
+                var child1 = children[i1];
+                var childStart1 = child1.offsetLeft;
+                var childEnd1 = child1.offsetLeft + child1.offsetWidth;
+                if (childStart1 < visibleEnd && childEnd1 > visibleEnd) {
+                    targetIndex = i1;
+                    break;
+                }
+            }
+        }
+        if (targetIndex === -1) {
+            targetIndex = direction === "left" ? 0 : children.length - 1;
+        }
+        containerRef.current.scrollTo({
+            left: children[targetIndex].offsetLeft - overlayOffset,
+            behavior: "smooth"
+        });
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: classes,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                ref: containerRef,
+                className: "flex w-full gap-1.5 p-px overflow-x-auto no-scrollbar",
+                children: [
+                    insertBeforeTabs && /*#__PURE__*/ _jsx(Filters.Tab, _object_spread_props(_object_spread({}, insertBeforeTabs), {
+                        selected: true,
+                        onClick: function() {
+                            var _insertBeforeTabs_onAction;
+                            (_insertBeforeTabs_onAction = insertBeforeTabs.onAction) === null || _insertBeforeTabs_onAction === void 0 ? void 0 : _insertBeforeTabs_onAction.call(insertBeforeTabs);
+                        }
+                    }), insertBeforeTabs.id),
+                    tabs.map(function(tab, index) {
+                        return /*#__PURE__*/ _jsx(Filters.Tab, _object_spread_props(_object_spread({}, tab), {
+                            index: index,
+                            selected: parseInt(selected) === index,
+                            onClick: function() {
+                                return onSelect(index);
+                            }
+                        }), tab.id);
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: leftGradientClasses,
+                children: /*#__PURE__*/ _jsx(Button, {
+                    rounded: true,
+                    shadow: true,
+                    icon: ChevronLeftMinor,
+                    className: "relative -left-2 @md:left-0 ".concat(canScrollLeft ? "pointer-events-auto" : "pointer-events-none"),
+                    onClick: function() {
+                        return handleScroll("left");
+                    }
+                })
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: rightGradientClasses,
+                children: /*#__PURE__*/ _jsx(Button, {
+                    rounded: true,
+                    shadow: true,
+                    icon: ChevronRightMinor,
+                    className: "relative -right-2 @md:right-0 ".concat(canScrollRight ? "pointer-events-auto" : "pointer-events-none"),
+                    onClick: function() {
+                        return handleScroll("right");
+                    }
+                })
+            })
+        ]
+    });
+};
+Filters.Tabs.displayName = "Filters.Tabs";
+var tabStyles = tv({
+    base: "Litho-FilterTabs-Tab group cursor-pointer flex shrink-0 items-start justify-center rounded-md px-2 py-1 truncate font-medium text-sm",
+    variants: {
+        selected: {
+            true: "shadow-card bg-surface-highest outline outline-tint-1",
+            false: "bg-transparent hover-dark outline outline-tint-3 dark:outline-tint-alt-2"
+        }
+    }
+});
+var tabActionStyles = tv({
+    base: "Litho-FilterTabs-TabAction h-5 w-5 rounded-sm flex items-center justify-end",
+    variants: {
+        selected: {
+            true: "",
+            false: "opacity-0 pointer-events-none"
+        },
+        disabled: {
+            true: "",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            interactive: true,
+            selected: true,
+            class: "relative -right-2 hover:bg-surface-higher"
+        },
+        {
+            interactive: false,
+            selected: false,
+            class: "absolute top-0 -right-1"
+        },
+        {
+            interactive: false,
+            selected: true,
+            class: "absolute top-0 -right-1 opacity-0 group-hover:opacity-100 bg-surface-highest hover:bg-surface-higher transition-all duration-150"
+        }
+    ]
+});
+var tabActionIconStyles = tv({
+    base: "opacity-80"
+});
+/**
+ * Filters.Tab - A subcomponent for rendering individual tabs within the Filters.Tabs component.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {React.ReactNode} [props.icon=HorizontalDotsMinor] - The icon displayed in the tab (default is a horizontal dots icon).
+ * @param {boolean} [props.selected=false] - Whether the tab is currently selected.
+ * @param {string|React.ReactNode} props.content - The content displayed in the tab (e.g., tab label).
+ * @param {Function} [props.onClick] - Callback when the tab is clicked.
+ * @param {Function} [props.onAction] - Callback for an optional tab action (e.g., a secondary click area).
+ * @param {React.ReactNode} [props.accessory] - Additional content displayed below the tab label (e.g., a badge or description).
+ * @param {boolean} [props.interactive=false] - Whether the tab action is interactive.
+ * @param {string} [props.tooltip="Edit"] - Tooltip text displayed when hovering over the tab action icon.
+ * @returns {JSX.Element} The tab component.
+ */ Filters.Tab = function FiltersTab() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var _props_icon = props.icon, icon = _props_icon === void 0 ? HorizontalDotsMinor : _props_icon, _props_selected = props.selected, selected = _props_selected === void 0 ? false : _props_selected, content = props.content, onClick = props.onClick, onAction = props.onAction, accessory = props.accessory, _props_interactive = props.interactive, interactive = _props_interactive === void 0 ? false : _props_interactive, _props_tooltip = props.tooltip, tooltip = _props_tooltip === void 0 ? "Edit" : _props_tooltip;
+    var classes = tabStyles({
+        selected: selected,
+        onAction: onAction
+    });
+    var actionClasses = tabActionStyles({
+        selected: selected,
+        interactive: interactive,
+        disabled: false
+    });
+    var color = interactive ? "link" : selected ? "default" : "subdued";
+    var actionIconClasses = tabActionIconStyles();
+    return /*#__PURE__*/ _jsx("div", {
+        className: classes,
+        onClick: onClick,
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col items-start justify-start",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "relative w-full flex items-center justify-between gap-0 min-h-5 pr-1",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingXs",
+                            color: color,
+                            fontWeight: "medium",
+                            children: content
+                        }),
+                        onAction && /*#__PURE__*/ _jsxs("div", {
+                            className: actionClasses,
+                            onClick: onAction,
+                            children: [
+                                !interactive && /*#__PURE__*/ _jsx("div", {
+                                    className: "min-h-full min-w-2 bg-linear-to-l from-surface-highest to-transparent"
+                                }),
+                                tooltip ? /*#__PURE__*/ _jsx(Tooltip, {
+                                    content: tooltip,
+                                    preferredPosition: "above",
+                                    children: /*#__PURE__*/ _jsx(Icon, {
+                                        source: icon,
+                                        color: interactive ? "link" : "subdued",
+                                        className: actionIconClasses
+                                    })
+                                }) : /*#__PURE__*/ _jsx(Icon, {
+                                    source: icon,
+                                    color: interactive ? "link" : "subdued",
+                                    className: actionIconClasses
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                accessory
+            ]
+        })
+    });
+};
+/**
+ * Filters.TextField - A subcomponent for the query text field.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {string} [props.queryValue] - The current value of the text field.
+ * @param {Function} [props.onQueryChange] - Callback for when the text field value changes.
+ * @param {Function} [props.onQueryBlur] - Callback for when the text field loses focus.
+ * @param {Function} [props.onQueryFocus] - Callback for when the text field gains focus.
+ * @param {Function} [props.onQueryClear] - Callback for clearing the text field.
+ * @param {string} [props.queryPlaceholder="Search"] - Placeholder text for the text field.
+ * @param {boolean} [props.subdued=false] - Whether the text field appears subdued.
+ * @param {boolean} [props.disableQueryField=false] - Whether the text field is disabled.
+ * @param {boolean} [props.transparent=true] - Whether the text field has a transparent background.
+ * @returns {JSX.Element} The text field component.
+ */ Filters.TextField = function FiltersTextField() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var darkMode = useContext(DarkModeContext).darkMode;
+    var queryValue = props.queryValue, onQueryChange = props.onQueryChange, onQueryBlur = props.onQueryBlur, onQueryFocus = props.onQueryFocus, onQueryClear = props.onQueryClear, _props_queryPlaceholder = props.queryPlaceholder, queryPlaceholder = _props_queryPlaceholder === void 0 ? "Search" : _props_queryPlaceholder, disableQueryField = props.disableQueryField;
+    return /*#__PURE__*/ _jsx("div", {
+        className: "p-1",
+        children: /*#__PURE__*/ _jsx(TextField, {
+            icon: SearchMajor,
+            value: queryValue,
+            onChange: onQueryChange,
+            onBlur: onQueryBlur,
+            onFocus: onQueryFocus,
+            placeholder: queryPlaceholder,
+            disabled: disableQueryField,
+            subdued: darkMode,
+            transparent: !darkMode,
+            clearButton: true,
+            onClearButtonClick: onQueryClear
+        })
+    });
+};
+Filters.TextField.displayName = "Filters.TextField";
+export default Filters;