@heymantle/litho 0.0.3 → 0.0.4

package/dist/esm/stories/Filters.stories.js

@@ -0,0 +1,1315 @@
+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 } from "react/jsx-runtime";
+import { useState } from "react";
+import Filters from "../components/Filters.js";
+import Text from "../components/Text.js";
+import Card from "../components/Card.js";
+import Button from "../components/Button.js";
+import Select from "../components/Select.js";
+import Checkbox from "../components/Checkbox.js";
+import RangeSlider from "../components/RangeSlider.js";
+import VerticalStack from "../components/VerticalStack.js";
+import HorizontalStack from "../components/HorizontalStack.js";
+import Box from "../components/Box.js";
+import { transformStorySource } from "../utilities/transformers.js";
+export default {
+    title: 'Litho/Filters',
+    component: Filters,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A comprehensive Filters component that manages filters for datasets. It includes visible filters, more filters dropdown, query text field, filter pills, and tabs for complex filtering scenarios."
+            }
+        }
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        filters: {
+            control: 'object',
+            description: 'Array of available filters'
+        },
+        appliedFilters: {
+            control: 'object',
+            description: 'Array of currently applied filters'
+        },
+        showTextField: {
+            control: 'boolean',
+            description: 'Whether to show the query text field'
+        },
+        queryValue: {
+            control: 'text',
+            description: 'Current value of the query text field'
+        },
+        queryPlaceholder: {
+            control: 'text',
+            description: 'Placeholder text for the query field'
+        },
+        padded: {
+            control: 'boolean',
+            description: 'Whether to apply padding to the filters container'
+        }
+    }
+};
+export var Default = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([]), 2), appliedFilters = _useState[0], setAppliedFilters = _useState[1];
+        var _useState1 = _sliced_to_array(useState(''), 2), status = _useState1[0], setStatus = _useState1[1];
+        var _useState2 = _sliced_to_array(useState(''), 2), category = _useState2[0], setCategory = _useState2[1];
+        var _useState3 = _sliced_to_array(useState([
+            0,
+            1000
+        ]), 2), priceRange = _useState3[0], setPriceRange = _useState3[1];
+        var filters = [
+            {
+                key: 'status',
+                label: 'Status',
+                shortcut: true,
+                filter: /*#__PURE__*/ _jsx(Select, {
+                    label: "Status",
+                    labelHidden: true,
+                    options: [
+                        {
+                            label: 'All statuses',
+                            value: ''
+                        },
+                        {
+                            label: 'Active',
+                            value: 'active'
+                        },
+                        {
+                            label: 'Inactive',
+                            value: 'inactive'
+                        },
+                        {
+                            label: 'Pending',
+                            value: 'pending'
+                        }
+                    ],
+                    value: status,
+                    onChange: function(value) {
+                        setStatus(value);
+                        updateAppliedFilters('status', value, value ? "Status: ".concat(value) : null);
+                    }
+                })
+            },
+            {
+                key: 'category',
+                label: 'Category',
+                filter: /*#__PURE__*/ _jsx(Select, {
+                    label: "Category",
+                    labelHidden: true,
+                    options: [
+                        {
+                            label: 'All categories',
+                            value: ''
+                        },
+                        {
+                            label: 'Electronics',
+                            value: 'electronics'
+                        },
+                        {
+                            label: 'Clothing',
+                            value: 'clothing'
+                        },
+                        {
+                            label: 'Books',
+                            value: 'books'
+                        },
+                        {
+                            label: 'Home & Garden',
+                            value: 'home'
+                        }
+                    ],
+                    value: category,
+                    onChange: function(value) {
+                        setCategory(value);
+                        updateAppliedFilters('category', value, value ? "Category: ".concat(value) : null);
+                    }
+                })
+            },
+            {
+                key: 'price',
+                label: 'Price Range',
+                filter: /*#__PURE__*/ _jsxs(VerticalStack, {
+                    gap: "4",
+                    children: [
+                        /*#__PURE__*/ _jsxs(Text, {
+                            variant: "bodySm",
+                            children: [
+                                "Price: $",
+                                priceRange[0],
+                                " - $",
+                                priceRange[1]
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(RangeSlider, {
+                            label: "Price Range",
+                            labelHidden: true,
+                            min: 0,
+                            max: 1000,
+                            value: priceRange,
+                            onChange: function(value) {
+                                setPriceRange(value);
+                                updateAppliedFilters('price', value, "Price: $".concat(value[0], " - $").concat(value[1]));
+                            }
+                        })
+                    ]
+                })
+            }
+        ];
+        var updateAppliedFilters = function(key, value, label) {
+            setAppliedFilters(function(prev) {
+                var filtered = prev.filter(function(f) {
+                    return f.key !== key;
+                });
+                if (value && (Array.isArray(value) && value.some(function(v) {
+                    return v !== 0 && v !== 1000;
+                }) || !Array.isArray(value) && value !== '')) {
+                    return _to_consumable_array(filtered).concat([
+                        {
+                            key: key,
+                            label: label,
+                            onRemove: function() {
+                                if (key === 'status') setStatus('');
+                                if (key === 'category') setCategory('');
+                                if (key === 'price') setPriceRange([
+                                    0,
+                                    1000
+                                ]);
+                                setAppliedFilters(function(prev) {
+                                    return prev.filter(function(f) {
+                                        return f.key !== key;
+                                    });
+                                });
+                            }
+                        }
+                    ]);
+                }
+                return filtered;
+            });
+        };
+        var handleClearAll = function() {
+            setStatus('');
+            setCategory('');
+            setPriceRange([
+                0,
+                1000
+            ]);
+            setAppliedFilters([]);
+        };
+        return /*#__PURE__*/ _jsxs(Card, {
+            title: "Product Filters",
+            padded: true,
+            children: [
+                /*#__PURE__*/ _jsx(Filters, {
+                    filters: filters,
+                    appliedFilters: appliedFilters,
+                    onClearAll: handleClearAll
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    marginBlockStart: "8",
+                    padding: "4",
+                    background: "subdued",
+                    borderRadius: "default",
+                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                        gap: "2",
+                        children: [
+                            /*#__PURE__*/ _jsx(Text, {
+                                variant: "headingSm",
+                                children: "Current Filters:"
+                            }),
+                            appliedFilters.length > 0 ? /*#__PURE__*/ _jsx(VerticalStack, {
+                                gap: "1",
+                                children: appliedFilters.map(function(filter) {
+                                    return /*#__PURE__*/ _jsxs(Text, {
+                                        variant: "bodyXs",
+                                        children: [
+                                            "• ",
+                                            filter.label
+                                        ]
+                                    }, filter.key);
+                                })
+                            }) : /*#__PURE__*/ _jsx(Text, {
+                                variant: "bodyXs",
+                                color: "subdued",
+                                children: "No filters applied"
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Basic filters with status, category, and price range options.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var WithSearchField = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([]), 2), appliedFilters = _useState[0], setAppliedFilters = _useState[1];
+        var _useState1 = _sliced_to_array(useState(''), 2), queryValue = _useState1[0], setQueryValue = _useState1[1];
+        var _useState2 = _sliced_to_array(useState([]), 2), selectedTags = _useState2[0], setSelectedTags = _useState2[1];
+        var _useState3 = _sliced_to_array(useState([]), 2), selectedAuthors = _useState3[0], setSelectedAuthors = _useState3[1];
+        var availableTags = [
+            'React',
+            'JavaScript',
+            'CSS',
+            'Node.js',
+            'TypeScript',
+            'GraphQL'
+        ];
+        var availableAuthors = [
+            'John Doe',
+            'Jane Smith',
+            'Bob Wilson',
+            'Alice Brown'
+        ];
+        var filters = [
+            {
+                key: 'tags',
+                label: 'Tags',
+                shortcut: true,
+                filter: /*#__PURE__*/ _jsx(VerticalStack, {
+                    gap: "2",
+                    children: availableTags.map(function(tag) {
+                        return /*#__PURE__*/ _jsx(Checkbox, {
+                            label: tag,
+                            checked: selectedTags.includes(tag),
+                            onChange: function(checked) {
+                                var newTags = checked ? _to_consumable_array(selectedTags).concat([
+                                    tag
+                                ]) : selectedTags.filter(function(t) {
+                                    return t !== tag;
+                                });
+                                setSelectedTags(newTags);
+                                updateAppliedFilters('tags', newTags, newTags.length > 0 ? "Tags: ".concat(newTags.join(', ')) : null);
+                            }
+                        }, tag);
+                    })
+                })
+            },
+            {
+                key: 'authors',
+                label: 'Authors',
+                filter: /*#__PURE__*/ _jsx(VerticalStack, {
+                    gap: "2",
+                    children: availableAuthors.map(function(author) {
+                        return /*#__PURE__*/ _jsx(Checkbox, {
+                            label: author,
+                            checked: selectedAuthors.includes(author),
+                            onChange: function(checked) {
+                                var newAuthors = checked ? _to_consumable_array(selectedAuthors).concat([
+                                    author
+                                ]) : selectedAuthors.filter(function(a) {
+                                    return a !== author;
+                                });
+                                setSelectedAuthors(newAuthors);
+                                updateAppliedFilters('authors', newAuthors, newAuthors.length > 0 ? "Authors: ".concat(newAuthors.join(', ')) : null);
+                            }
+                        }, author);
+                    })
+                })
+            }
+        ];
+        var updateAppliedFilters = function(key, value, label) {
+            setAppliedFilters(function(prev) {
+                var filtered = prev.filter(function(f) {
+                    return f.key !== key;
+                });
+                if (value && Array.isArray(value) && value.length > 0) {
+                    return _to_consumable_array(filtered).concat([
+                        {
+                            key: key,
+                            label: label,
+                            onRemove: function() {
+                                if (key === 'tags') setSelectedTags([]);
+                                if (key === 'authors') setSelectedAuthors([]);
+                                setAppliedFilters(function(prev) {
+                                    return prev.filter(function(f) {
+                                        return f.key !== key;
+                                    });
+                                });
+                            }
+                        }
+                    ]);
+                }
+                return filtered;
+            });
+        };
+        var handleClearAll = function() {
+            setSelectedTags([]);
+            setSelectedAuthors([]);
+            setAppliedFilters([]);
+        };
+        return /*#__PURE__*/ _jsxs(Card, {
+            title: "Article Search & Filters",
+            padded: true,
+            children: [
+                /*#__PURE__*/ _jsx(Filters, {
+                    filters: filters,
+                    appliedFilters: appliedFilters,
+                    onClearAll: handleClearAll,
+                    showTextField: true,
+                    queryValue: queryValue,
+                    onQueryChange: setQueryValue,
+                    onQueryClear: function() {
+                        return setQueryValue('');
+                    },
+                    queryPlaceholder: "Search articles..."
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    marginBlockStart: "8",
+                    padding: "4",
+                    background: "subdued",
+                    borderRadius: "default",
+                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                        gap: "2",
+                        children: [
+                            /*#__PURE__*/ _jsx(Text, {
+                                variant: "headingSm",
+                                children: "Search & Filter Summary:"
+                            }),
+                            /*#__PURE__*/ _jsxs(VerticalStack, {
+                                gap: "1",
+                                children: [
+                                    /*#__PURE__*/ _jsxs(Text, {
+                                        variant: "bodyXs",
+                                        children: [
+                                            "Search Query: ",
+                                            queryValue || 'None'
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs(Text, {
+                                        variant: "bodyXs",
+                                        children: [
+                                            "Active Filters: ",
+                                            appliedFilters.length
+                                        ]
+                                    }),
+                                    appliedFilters.map(function(filter) {
+                                        return /*#__PURE__*/ _jsxs(Text, {
+                                            variant: "bodyXs",
+                                            style: {
+                                                marginLeft: '1rem'
+                                            },
+                                            children: [
+                                                "• ",
+                                                filter.label
+                                            ]
+                                        }, filter.key);
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Filters with search text field for comprehensive filtering.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var FilterTabs = {
+    render: function() {
+        var _tabs_selectedTab, _tabs_selectedTab_accessory_props, _tabs_selectedTab_accessory, _tabs_selectedTab1;
+        var _useState = _sliced_to_array(useState(0), 2), selectedTab = _useState[0], setSelectedTab = _useState[1];
+        var _useState1 = _sliced_to_array(useState([]), 2), appliedFilters = _useState1[0], setAppliedFilters = _useState1[1];
+        var tabs = [
+            {
+                id: 'all',
+                content: 'All Items',
+                accessory: /*#__PURE__*/ _jsx(Text, {
+                    variant: "bodySm",
+                    color: "subdued",
+                    children: "245 items"
+                })
+            },
+            {
+                id: 'active',
+                content: 'Active',
+                accessory: /*#__PURE__*/ _jsx(Text, {
+                    variant: "bodySm",
+                    color: "subdued",
+                    children: "128 items"
+                })
+            },
+            {
+                id: 'inactive',
+                content: 'Inactive',
+                accessory: /*#__PURE__*/ _jsx(Text, {
+                    variant: "bodySm",
+                    color: "subdued",
+                    children: "89 items"
+                })
+            },
+            {
+                id: 'pending',
+                content: 'Pending Review',
+                accessory: /*#__PURE__*/ _jsx(Text, {
+                    variant: "bodySm",
+                    color: "subdued",
+                    children: "28 items"
+                })
+            },
+            {
+                id: 'draft',
+                content: 'Draft',
+                accessory: /*#__PURE__*/ _jsx(Text, {
+                    variant: "bodySm",
+                    color: "subdued",
+                    children: "15 items"
+                })
+            },
+            {
+                id: 'archived',
+                content: 'Archived',
+                accessory: /*#__PURE__*/ _jsx(Text, {
+                    variant: "bodySm",
+                    color: "subdued",
+                    children: "67 items"
+                })
+            }
+        ];
+        return /*#__PURE__*/ _jsxs(Card, {
+            title: "Status Filters with Tabs",
+            padded: true,
+            children: [
+                /*#__PURE__*/ _jsx(Filters.Tabs, {
+                    tabs: tabs,
+                    selected: selectedTab,
+                    onSelect: setSelectedTab
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    marginBlockStart: "8",
+                    padding: "4",
+                    background: "subdued",
+                    borderRadius: "default",
+                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                        gap: "2",
+                        children: [
+                            /*#__PURE__*/ _jsx(Text, {
+                                variant: "headingSm",
+                                children: "Selected Tab:"
+                            }),
+                            /*#__PURE__*/ _jsxs(Text, {
+                                variant: "bodyXs",
+                                children: [
+                                    (_tabs_selectedTab = tabs[selectedTab]) === null || _tabs_selectedTab === void 0 ? void 0 : _tabs_selectedTab.content,
+                                    " - ",
+                                    (_tabs_selectedTab1 = tabs[selectedTab]) === null || _tabs_selectedTab1 === void 0 ? void 0 : (_tabs_selectedTab_accessory = _tabs_selectedTab1.accessory) === null || _tabs_selectedTab_accessory === void 0 ? void 0 : (_tabs_selectedTab_accessory_props = _tabs_selectedTab_accessory.props) === null || _tabs_selectedTab_accessory_props === void 0 ? void 0 : _tabs_selectedTab_accessory_props.children
+                                ]
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Filter tabs for quick status-based filtering with item counts.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var ComplexFiltering = {
+    render: function() {
+        var _tabs_selectedTab;
+        var _useState = _sliced_to_array(useState([]), 2), appliedFilters = _useState[0], setAppliedFilters = _useState[1];
+        var _useState1 = _sliced_to_array(useState(''), 2), queryValue = _useState1[0], setQueryValue = _useState1[1];
+        var _useState2 = _sliced_to_array(useState(0), 2), selectedTab = _useState2[0], setSelectedTab = _useState2[1];
+        var _useState3 = _sliced_to_array(useState([
+            0,
+            500
+        ]), 2), priceRange = _useState3[0], setPriceRange = _useState3[1];
+        var _useState4 = _sliced_to_array(useState([]), 2), selectedBrands = _useState4[0], setSelectedBrands = _useState4[1];
+        var _useState5 = _sliced_to_array(useState([]), 2), selectedColors = _useState5[0], setSelectedColors = _useState5[1];
+        var _useState6 = _sliced_to_array(useState(''), 2), availability = _useState6[0], setAvailability = _useState6[1];
+        var _useState7 = _sliced_to_array(useState(''), 2), rating = _useState7[0], setRating = _useState7[1];
+        var availableBrands = [
+            'Apple',
+            'Samsung',
+            'Google',
+            'OnePlus',
+            'Xiaomi'
+        ];
+        var availableColors = [
+            'Black',
+            'White',
+            'Blue',
+            'Red',
+            'Gold'
+        ];
+        var tabs = [
+            {
+                id: 'all',
+                content: 'All Products',
+                accessory: /*#__PURE__*/ _jsx(Text, {
+                    variant: "bodySm",
+                    color: "subdued",
+                    children: "1,234"
+                })
+            },
+            {
+                id: 'phones',
+                content: 'Phones',
+                accessory: /*#__PURE__*/ _jsx(Text, {
+                    variant: "bodySm",
+                    color: "subdued",
+                    children: "456"
+                })
+            },
+            {
+                id: 'tablets',
+                content: 'Tablets',
+                accessory: /*#__PURE__*/ _jsx(Text, {
+                    variant: "bodySm",
+                    color: "subdued",
+                    children: "123"
+                })
+            },
+            {
+                id: 'accessories',
+                content: 'Accessories',
+                accessory: /*#__PURE__*/ _jsx(Text, {
+                    variant: "bodySm",
+                    color: "subdued",
+                    children: "655"
+                })
+            }
+        ];
+        var filters = [
+            {
+                key: 'price',
+                label: 'Price Range',
+                shortcut: true,
+                filter: /*#__PURE__*/ _jsxs(VerticalStack, {
+                    gap: "4",
+                    children: [
+                        /*#__PURE__*/ _jsxs(Text, {
+                            variant: "bodySm",
+                            children: [
+                                "$",
+                                priceRange[0],
+                                " - $",
+                                priceRange[1]
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(RangeSlider, {
+                            label: "Price Range",
+                            labelHidden: true,
+                            min: 0,
+                            max: 500,
+                            value: priceRange,
+                            onChange: function(value) {
+                                setPriceRange(value);
+                                updateAppliedFilters('price', value, "Price: $".concat(value[0], " - $").concat(value[1]));
+                            }
+                        })
+                    ]
+                })
+            },
+            {
+                key: 'brand',
+                label: 'Brand',
+                shortcut: true,
+                filter: /*#__PURE__*/ _jsx(VerticalStack, {
+                    gap: "2",
+                    children: availableBrands.map(function(brand) {
+                        return /*#__PURE__*/ _jsx(Checkbox, {
+                            label: brand,
+                            checked: selectedBrands.includes(brand),
+                            onChange: function(checked) {
+                                var newBrands = checked ? _to_consumable_array(selectedBrands).concat([
+                                    brand
+                                ]) : selectedBrands.filter(function(b) {
+                                    return b !== brand;
+                                });
+                                setSelectedBrands(newBrands);
+                                updateAppliedFilters('brand', newBrands, newBrands.length > 0 ? "Brand: ".concat(newBrands.join(', ')) : null);
+                            }
+                        }, brand);
+                    })
+                })
+            },
+            {
+                key: 'color',
+                label: 'Color',
+                filter: /*#__PURE__*/ _jsx(VerticalStack, {
+                    gap: "2",
+                    children: availableColors.map(function(color) {
+                        return /*#__PURE__*/ _jsx(Checkbox, {
+                            label: color,
+                            checked: selectedColors.includes(color),
+                            onChange: function(checked) {
+                                var newColors = checked ? _to_consumable_array(selectedColors).concat([
+                                    color
+                                ]) : selectedColors.filter(function(c) {
+                                    return c !== color;
+                                });
+                                setSelectedColors(newColors);
+                                updateAppliedFilters('color', newColors, newColors.length > 0 ? "Color: ".concat(newColors.join(', ')) : null);
+                            }
+                        }, color);
+                    })
+                })
+            },
+            {
+                key: 'availability',
+                label: 'Availability',
+                filter: /*#__PURE__*/ _jsx(Select, {
+                    label: "Availability",
+                    labelHidden: true,
+                    options: [
+                        {
+                            label: 'All items',
+                            value: ''
+                        },
+                        {
+                            label: 'In stock',
+                            value: 'in-stock'
+                        },
+                        {
+                            label: 'Out of stock',
+                            value: 'out-of-stock'
+                        },
+                        {
+                            label: 'Pre-order',
+                            value: 'pre-order'
+                        }
+                    ],
+                    value: availability,
+                    onChange: function(value) {
+                        setAvailability(value);
+                        updateAppliedFilters('availability', value, value ? "Availability: ".concat(value) : null);
+                    }
+                })
+            },
+            {
+                key: 'rating',
+                label: 'Customer Rating',
+                filter: /*#__PURE__*/ _jsx(Select, {
+                    label: "Rating",
+                    labelHidden: true,
+                    options: [
+                        {
+                            label: 'All ratings',
+                            value: ''
+                        },
+                        {
+                            label: '4+ stars',
+                            value: '4+'
+                        },
+                        {
+                            label: '3+ stars',
+                            value: '3+'
+                        },
+                        {
+                            label: '2+ stars',
+                            value: '2+'
+                        }
+                    ],
+                    value: rating,
+                    onChange: function(value) {
+                        setRating(value);
+                        updateAppliedFilters('rating', value, value ? "Rating: ".concat(value, " stars") : null);
+                    }
+                })
+            }
+        ];
+        var updateAppliedFilters = function(key, value, label) {
+            setAppliedFilters(function(prev) {
+                var filtered = prev.filter(function(f) {
+                    return f.key !== key;
+                });
+                if (value && (Array.isArray(value) && value.length > 0 || !Array.isArray(value) && value !== '' && !(Array.isArray(value) && value[0] === 0 && value[1] === 500))) {
+                    return _to_consumable_array(filtered).concat([
+                        {
+                            key: key,
+                            label: label,
+                            onRemove: function() {
+                                if (key === 'price') setPriceRange([
+                                    0,
+                                    500
+                                ]);
+                                if (key === 'brand') setSelectedBrands([]);
+                                if (key === 'color') setSelectedColors([]);
+                                if (key === 'availability') setAvailability('');
+                                if (key === 'rating') setRating('');
+                                setAppliedFilters(function(prev) {
+                                    return prev.filter(function(f) {
+                                        return f.key !== key;
+                                    });
+                                });
+                            }
+                        }
+                    ]);
+                }
+                return filtered;
+            });
+        };
+        var handleClearAll = function() {
+            setPriceRange([
+                0,
+                500
+            ]);
+            setSelectedBrands([]);
+            setSelectedColors([]);
+            setAvailability('');
+            setRating('');
+            setAppliedFilters([]);
+        };
+        return /*#__PURE__*/ _jsxs(VerticalStack, {
+            gap: "4",
+            children: [
+                /*#__PURE__*/ _jsx(Card, {
+                    title: "Product Category",
+                    padded: true,
+                    children: /*#__PURE__*/ _jsx(Filters.Tabs, {
+                        tabs: tabs,
+                        selected: selectedTab,
+                        onSelect: setSelectedTab
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Card, {
+                    title: "Search & Filters",
+                    padded: true,
+                    children: /*#__PURE__*/ _jsx(Filters, {
+                        filters: filters,
+                        appliedFilters: appliedFilters,
+                        onClearAll: handleClearAll,
+                        showTextField: true,
+                        queryValue: queryValue,
+                        onQueryChange: setQueryValue,
+                        onQueryClear: function() {
+                            return setQueryValue('');
+                        },
+                        queryPlaceholder: "Search products..."
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Card, {
+                    title: "Results Summary",
+                    padded: true,
+                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                gap: "8",
+                                children: [
+                                    /*#__PURE__*/ _jsxs(VerticalStack, {
+                                        gap: "2",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                variant: "headingSm",
+                                                children: "Category:"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                variant: "bodyXs",
+                                                children: (_tabs_selectedTab = tabs[selectedTab]) === null || _tabs_selectedTab === void 0 ? void 0 : _tabs_selectedTab.content
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs(VerticalStack, {
+                                        gap: "2",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                variant: "headingSm",
+                                                children: "Search Query:"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                variant: "bodyXs",
+                                                children: queryValue || 'None'
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            appliedFilters.length > 0 && /*#__PURE__*/ _jsxs(VerticalStack, {
+                                gap: "2",
+                                children: [
+                                    /*#__PURE__*/ _jsxs(Text, {
+                                        variant: "headingSm",
+                                        children: [
+                                            "Active Filters (",
+                                            appliedFilters.length,
+                                            "):"
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsx(VerticalStack, {
+                                        gap: "1",
+                                        children: appliedFilters.map(function(filter) {
+                                            return /*#__PURE__*/ _jsxs(Text, {
+                                                variant: "bodyXs",
+                                                children: [
+                                                    "• ",
+                                                    filter.label
+                                                ]
+                                            }, filter.key);
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Complex filtering scenario with tabs, search, and multiple filter types for e-commerce.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var FilterPills = {
+    render: function() {
+        var _useState = _sliced_to_array(useState({
+            new: false,
+            popular: false,
+            sale: false,
+            featured: false
+        }), 2), pillStates = _useState[0], setPillStates = _useState[1];
+        var togglePill = function(key) {
+            setPillStates(function(prev) {
+                return _object_spread_props(_object_spread({}, prev), _define_property({}, key, !prev[key]));
+            });
+        };
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Filter Pills Demo",
+            padded: true,
+            children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                gap: "8",
+                children: [
+                    /*#__PURE__*/ _jsxs(VerticalStack, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ _jsx(Text, {
+                                variant: "headingSm",
+                                children: "Interactive Pills"
+                            }),
+                            /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                gap: "2",
+                                wrap: true,
+                                children: [
+                                    /*#__PURE__*/ _jsx(Filters.Pill, {
+                                        label: "New Arrivals",
+                                        applied: pillStates.new,
+                                        onClick: function() {
+                                            return togglePill('new');
+                                        }
+                                    }),
+                                    /*#__PURE__*/ _jsx(Filters.Pill, {
+                                        label: "Popular",
+                                        applied: pillStates.popular,
+                                        onClick: function() {
+                                            return togglePill('popular');
+                                        }
+                                    }),
+                                    /*#__PURE__*/ _jsx(Filters.Pill, {
+                                        label: "On Sale",
+                                        applied: pillStates.sale,
+                                        onClick: function() {
+                                            return togglePill('sale');
+                                        }
+                                    }),
+                                    /*#__PURE__*/ _jsx(Filters.Pill, {
+                                        label: "Featured",
+                                        applied: pillStates.featured,
+                                        onClick: function() {
+                                            return togglePill('featured');
+                                        }
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(VerticalStack, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ _jsx(Text, {
+                                variant: "headingSm",
+                                children: "Pill States"
+                            }),
+                            /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                gap: "2",
+                                wrap: true,
+                                children: [
+                                    /*#__PURE__*/ _jsx(Filters.Pill, {
+                                        label: "Available",
+                                        applied: false
+                                    }),
+                                    /*#__PURE__*/ _jsx(Filters.Pill, {
+                                        label: "Applied",
+                                        applied: true
+                                    }),
+                                    /*#__PURE__*/ _jsx(Filters.Pill, {
+                                        label: "Disabled",
+                                        applied: false,
+                                        disabled: true
+                                    }),
+                                    /*#__PURE__*/ _jsx(Filters.Pill, {
+                                        destructive: true
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Box, {
+                        padding: "4",
+                        background: "subdued",
+                        borderRadius: "default",
+                        children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                            gap: "2",
+                            children: [
+                                /*#__PURE__*/ _jsx(Text, {
+                                    variant: "headingSm",
+                                    children: "Current Selection:"
+                                }),
+                                /*#__PURE__*/ _jsxs(VerticalStack, {
+                                    gap: "1",
+                                    children: [
+                                        Object.entries(pillStates).filter(function(param) {
+                                            var _param = _sliced_to_array(param, 2), _ = _param[0], applied = _param[1];
+                                            return applied;
+                                        }).map(function(param) {
+                                            var _param = _sliced_to_array(param, 2), key = _param[0], _ = _param[1];
+                                            return /*#__PURE__*/ _jsxs(Text, {
+                                                variant: "bodyXs",
+                                                children: [
+                                                    "• ",
+                                                    key.charAt(0).toUpperCase() + key.slice(1)
+                                                ]
+                                            }, key);
+                                        }),
+                                        Object.values(pillStates).every(function(v) {
+                                            return !v;
+                                        }) && /*#__PURE__*/ _jsx(Text, {
+                                            color: "subdued",
+                                            variant: "bodyXs",
+                                            children: "No filters selected"
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Standalone filter pills in various states and configurations.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var ResponsiveBehavior = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([]), 2), appliedFilters = _useState[0], setAppliedFilters = _useState[1];
+        var _useState1 = _sliced_to_array(useState(''), 2), queryValue = _useState1[0], setQueryValue = _useState1[1];
+        var _useState2 = _sliced_to_array(useState(0), 2), selectedTab = _useState2[0], setSelectedTab = _useState2[1];
+        var longTabs = [
+            {
+                id: '1',
+                content: 'All Products & Services'
+            },
+            {
+                id: '2',
+                content: 'Electronics & Gadgets'
+            },
+            {
+                id: '3',
+                content: 'Fashion & Accessories'
+            },
+            {
+                id: '4',
+                content: 'Home & Garden Supplies'
+            },
+            {
+                id: '5',
+                content: 'Sports & Outdoor Equipment'
+            },
+            {
+                id: '6',
+                content: 'Books & Educational Materials'
+            },
+            {
+                id: '7',
+                content: 'Health & Beauty Products'
+            },
+            {
+                id: '8',
+                content: 'Automotive & Transportation'
+            }
+        ];
+        var filters = [
+            {
+                key: 'featured',
+                label: 'Featured',
+                shortcut: true,
+                filter: /*#__PURE__*/ _jsx("div", {
+                    children: "Featured filter content"
+                })
+            },
+            {
+                key: 'bestseller',
+                label: 'Best Sellers',
+                shortcut: true,
+                filter: /*#__PURE__*/ _jsx("div", {
+                    children: "Best sellers filter content"
+                })
+            },
+            {
+                key: 'price',
+                label: 'Price Range',
+                filter: /*#__PURE__*/ _jsx("div", {
+                    children: "Price range filter content"
+                })
+            },
+            {
+                key: 'brand',
+                label: 'Brand',
+                filter: /*#__PURE__*/ _jsx("div", {
+                    children: "Brand filter content"
+                })
+            },
+            {
+                key: 'rating',
+                label: 'Customer Rating',
+                filter: /*#__PURE__*/ _jsx("div", {
+                    children: "Rating filter content"
+                })
+            },
+            {
+                key: 'shipping',
+                label: 'Shipping Options',
+                filter: /*#__PURE__*/ _jsx("div", {
+                    children: "Shipping filter content"
+                })
+            }
+        ];
+        return /*#__PURE__*/ _jsxs(VerticalStack, {
+            gap: "4",
+            children: [
+                /*#__PURE__*/ _jsx(Card, {
+                    title: "Responsive Filter Tabs",
+                    padded: true,
+                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ _jsx(Text, {
+                                variant: "bodyXs",
+                                children: "These tabs scroll horizontally on smaller screens with navigation arrows."
+                            }),
+                            /*#__PURE__*/ _jsx(Filters.Tabs, {
+                                tabs: longTabs,
+                                selected: selectedTab,
+                                onSelect: setSelectedTab
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Card, {
+                    title: "Responsive Filters Layout",
+                    padded: true,
+                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ _jsx(Text, {
+                                variant: "bodyXs",
+                                children: "Filter pills wrap to new lines on smaller screens, and the search field adapts to available space."
+                            }),
+                            /*#__PURE__*/ _jsx(Filters, {
+                                filters: filters,
+                                appliedFilters: appliedFilters,
+                                showTextField: true,
+                                queryValue: queryValue,
+                                onQueryChange: setQueryValue,
+                                onQueryClear: function() {
+                                    return setQueryValue('');
+                                },
+                                queryPlaceholder: "Search across all categories..."
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Card, {
+                    title: "Mobile-Optimized Tips",
+                    padded: true,
+                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                        gap: "2",
+                        children: [
+                            /*#__PURE__*/ _jsx(Text, {
+                                variant: "bodyXs",
+                                children: "• Tabs become horizontally scrollable with touch/swipe support"
+                            }),
+                            /*#__PURE__*/ _jsx(Text, {
+                                variant: "bodyXs",
+                                children: "• Filter pills stack vertically when space is limited"
+                            }),
+                            /*#__PURE__*/ _jsx(Text, {
+                                variant: "bodyXs",
+                                children: "• Search field takes full width on mobile"
+                            }),
+                            /*#__PURE__*/ _jsx(Text, {
+                                variant: "bodyXs",
+                                children: "• Popover content adapts to screen size and orientation"
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Demonstrates responsive behavior of filters across different screen sizes.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};