@akinon/akifilter 1.6.1 → 1.7.0-260706-0

package/dist/cjs/akifilter.d.ts

@@ -3,7 +3,7 @@ import { FieldValues, Path } from '@akinon/akiform';
 import { type PanelProps } from '@akinon/ui-collapse';
 import React from 'react';
 import { type AppliedFilter } from './components/applied-filters';
-import type { AkifilterActionsRef, AkifilterSchema } from './types';
+import type { AkifilterActionsRef, AkifilterButton, AkifilterSchema } from './types';
 type AkifilterFieldValues = FieldValues;
 export type AkifilterProps<TFieldValues extends AkifilterFieldValues = AkifilterFieldValues> = {
     /**
@@ -61,6 +61,17 @@ export type AkifilterProps<TFieldValues extends AkifilterFieldValues = Akifilter
      * Called when the user removes an externally-provided chip.
      */
     onRemoveExternalFilter?: (key: string) => void;
+    /**
+     * Quick-filter toggle buttons rendered above the filter form. Active button
+     * values are merged into the `onValuesChange` payload under each button's
+     * `key` (buttons sharing a key produce an array of values), persisted with
+     * the rest of the filters and shown as removable chips.
+     */
+    filterButtons?: AkifilterButton[];
+    /**
+     * Notified whenever the set of active filter buttons changes.
+     */
+    onFilterButtonsChange?: (activeButtons: AkifilterButton[]) => void;
 };
 export declare const ExpandIcon: ({ isActive }: PanelProps) => {
     name: "chevron_down";

package/dist/cjs/akifilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"akifilter.d.ts","sourceRoot":"","sources":["../../src/akifilter.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAGtB,OAAO,EAIL,WAAW,EACX,IAAI,EAIL,MAAM,iBAAiB,CAAC;AAIzB,OAAO,EAAY,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAShE,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,EACL,KAAK,aAAa,EAEnB,MAAM,8BAA8B,CAAC;AActC,OAAO,KAAK,EACV,mBAAmB,EAEnB,eAAe,EAChB,MAAM,SAAS,CAAC;AAcjB,KAAK,oBAAoB,GAAG,WAAW,CAAC;AAoKxC,MAAM,MAAM,cAAc,CACxB,YAAY,SAAS,oBAAoB,GAAG,oBAAoB,IAC9D;IACF;;OAEG;IACH,YAAY,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAC7C;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACtC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IACzD;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,KAAK,IAAI,CAAC;IAClE;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;IAClD;;;OAGG;IACH,sBAAsB,CAAC,EAAE,aAAa,EAAE,CAAC;IACzC;;OAEG;IACH,sBAAsB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD,CAAC;AA4zBF,eAAO,MAAM,UAAU,GAAI,cAAc,UAAU;;;;;;;;CAQjD,CAAC;AA8CH,eAAO,MAAM,SAAS;KACpB,YAAY,SAAS,oBAAoB,uBAElC,cAAc,CAAC,YAAY,CAAC;;CAmBpC,CAAC"}
+{"version":3,"file":"akifilter.d.ts","sourceRoot":"","sources":["../../src/akifilter.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAGtB,OAAO,EAIL,WAAW,EACX,IAAI,EAIL,MAAM,iBAAiB,CAAC;AAIzB,OAAO,EAAY,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAShE,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,OAAO,EACL,KAAK,aAAa,EAEnB,MAAM,8BAA8B,CAAC;AAetC,OAAO,KAAK,EACV,mBAAmB,EACnB,eAAe,EAEf,eAAe,EAChB,MAAM,SAAS,CAAC;AAcjB,KAAK,oBAAoB,GAAG,WAAW,CAAC;AA2KxC,MAAM,MAAM,cAAc,CACxB,YAAY,SAAS,oBAAoB,GAAG,oBAAoB,IAC9D;IACF;;OAEG;IACH,YAAY,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAC7C;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACtC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IACzD;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,KAAK,IAAI,CAAC;IAClE;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;IAClD;;;OAGG;IACH,sBAAsB,CAAC,EAAE,aAAa,EAAE,CAAC;IACzC;;OAEG;IACH,sBAAsB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C;;;;;OAKG;IACH,aAAa,CAAC,EAAE,eAAe,EAAE,CAAC;IAClC;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,aAAa,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;CACpE,CAAC;AAq9BF,eAAO,MAAM,UAAU,GAAI,cAAc,UAAU;;;;;;;;CAQjD,CAAC;AA8CH,eAAO,MAAM,SAAS;KACpB,YAAY,SAAS,oBAAoB,uBAElC,cAAc,CAAC,YAAY,CAAC;;CAoBpC,CAAC"}

package/dist/cjs/akifilter.js

@@ -31,6 +31,7 @@ const react_error_boundary_1 = require("react-error-boundary");
 const storage_1 = require("./common/storage");
 const theme_overrides_1 = require("./common/theme-overrides");
 const applied_filters_1 = require("./components/applied-filters");
+const filter_buttons_1 = require("./components/filter-buttons");
 const filter_toolbar_1 = require("./components/filter-toolbar");
 const visibility_modal_1 = require("./components/visibility-modal");
 const constants_1 = require("./constants");
@@ -40,6 +41,12 @@ const use_visibility_cleanup_1 = require("./hooks/use-visibility-cleanup");
 const i18n_1 = require("./i18n");
 const schema_1 = require("./utils/schema");
 const values_1 = require("./utils/values");
+/**
+ * Prefix for applied-filter chip keys that originate from filter buttons.
+ * Keeps button chips from colliding with schema field keys so removals can be
+ * routed back to the owning button.
+ */
+const BUTTON_CHIP_PREFIX = 'akifilter-button:';
 const FilterFormItem = (_a) => {
     var _b, _c;
     var { children, control, name, valuePropName } = _a, props = __rest(_a, ["children", "control", "name", "valuePropName"]);
@@ -120,7 +127,7 @@ const resolveClearedFieldValue = (field, defaultValue) => {
             return undefined;
     }
 };
-const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onValuesChange, onVisibleFieldsChange, onImportCsv, onImportXls, onClearAll, enableImportCsv, enableImportXls, filterActionsRef, externalAppliedFilters, onRemoveExternalFilter }) => {
+const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onValuesChange, onVisibleFieldsChange, onImportCsv, onImportXls, onClearAll, enableImportCsv, enableImportXls, filterActionsRef, externalAppliedFilters, onRemoveExternalFilter, filterButtons, onFilterButtonsChange }) => {
     // Separate regular fields from section fields
     const { regularFields, sectionFields } = react_1.default.useMemo(() => (0, schema_1.partitionSchema)(filterSchema), [filterSchema]);
     const excludeSectionKeys = react_1.default.useMemo(() => (0, schema_1.deriveExcludeSectionKeys)(sectionFields), [sectionFields]);
@@ -149,6 +156,34 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
     const [searchTerm, setSearchTerm] = react_1.default.useState('');
     const [modalPage, setModalPage] = react_1.default.useState(1);
     const [modalPageSize, setModalPageSize] = react_1.default.useState(constants_1.DEFAULT_MODAL_PAGE_SIZE);
+    // --- Filter buttons (quick-filter toggles) ---------------------------------
+    // A button is identified by its `value`, which must be unique across the
+    // whole `filterButtons` array.
+    const [activeButtonValues, setActiveButtonValues] = react_1.default.useState(() => { var _a; return (_a = (0, storage_1.readStoredButtonValues)(storageKey)) !== null && _a !== void 0 ? _a : []; });
+    // Re-read persisted button state when the storage key changes.
+    react_1.default.useEffect(() => {
+        var _a;
+        setActiveButtonValues((_a = (0, storage_1.readStoredButtonValues)(storageKey)) !== null && _a !== void 0 ? _a : []);
+    }, [storageKey]);
+    // Build the `{ key: value[] }` object contributed by the active buttons.
+    // Buttons that share a key are merged into an array (legacy behaviour).
+    const computeButtonValues = react_1.default.useCallback((values) => {
+        return (filterButtons !== null && filterButtons !== void 0 ? filterButtons : []).reduce((acc, button) => {
+            var _a;
+            var _b;
+            if (!values.includes(button.value)) {
+                return acc;
+            }
+            ((_a = acc[_b = button.key]) !== null && _a !== void 0 ? _a : (acc[_b] = [])).push(button.value);
+            return acc;
+        }, {});
+    }, [filterButtons]);
+    // Mirror the current button values in a ref so the value-emission callbacks
+    // can merge them without taking button state as a dependency.
+    const buttonValuesRef = react_1.default.useRef(computeButtonValues(activeButtonValues));
+    react_1.default.useEffect(() => {
+        buttonValuesRef.current = computeButtonValues(activeButtonValues);
+    }, [computeButtonValues, activeButtonValues]);
     const appliedFilters = react_1.default.useMemo(() => {
         if (!formValues) {
             return [];
@@ -237,6 +272,17 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
             return acc;
         }, []);
     }, [flattenedSchema, formValues, excludeSectionKeys]);
+    // Chips for the currently active filter buttons. The chip key is prefixed
+    // with the button value so removals can be routed back to the owning button.
+    const buttonAppliedFilters = react_1.default.useMemo(() => {
+        return (filterButtons !== null && filterButtons !== void 0 ? filterButtons : [])
+            .filter(button => activeButtonValues.includes(button.value))
+            .map(button => ({
+            key: `${BUTTON_CHIP_PREFIX}${button.value}`,
+            label: button.appliedPrefix,
+            value: button.label
+        }));
+    }, [filterButtons, activeButtonValues]);
     const resolveInitialVisibleKeys = react_1.default.useCallback(() => {
         const storedKeys = (0, storage_1.readVisibleKeys)(regularFields, storageKey);
         const defaultKeys = (0, schema_1.deriveDefaultVisibleKeys)(regularFields);
@@ -292,6 +338,12 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
         (0, storage_1.writeStoredValues)(storageKey, values);
         return nextSerialised;
     }, [storageKey]);
+    // Emit the normalised form values merged with the active filter-button
+    // values. Buttons live outside the form state, so every emission point routes
+    // through here to keep the two slices combined in the payload.
+    const emitValues = react_1.default.useCallback((values) => {
+        onValuesChange === null || onValuesChange === void 0 ? void 0 : onValuesChange(Object.assign(Object.assign({}, values), buttonValuesRef.current));
+    }, [onValuesChange]);
     // Use a ref to track the current serialised values for staleness checks
     const currentSerialisedValuesRef = react_1.default.useRef(serialisedValues);
     react_1.default.useEffect(() => {
@@ -315,15 +367,17 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
         const isEmpty = Object.keys(parsedValues).length === 0;
         if (!hasEmittedValuesRef.current &&
             isEmpty &&
-            !hasInitialValuesRef.current) {
+            !hasInitialValuesRef.current &&
+            // Only reached on the first-emit path; short-circuits away on later cycles.
+            Object.keys(buttonValuesRef.current).length === 0) {
             hasEmittedValuesRef.current = true;
             persistValues(parsedValues, debouncedSerialisedValues);
             return;
         }
         hasEmittedValuesRef.current = true;
-        onValuesChange === null || onValuesChange === void 0 ? void 0 : onValuesChange(parsedValues);
+        emitValues(parsedValues);
         persistValues(parsedValues, debouncedSerialisedValues);
-    }, [debouncedSerialisedValues, onValuesChange, persistValues]);
+    }, [debouncedSerialisedValues, emitValues, persistValues]);
     react_1.default.useEffect(() => {
         lastPersistedValuesRef.current = null;
     }, [storageKey]);
@@ -356,9 +410,9 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
             currentSerialisedValuesRef.current = nextSerialised;
             // Update persistedDefaults to prevent stale mergedDefaultValues on re-render
             setPersistedDefaults(currParsed);
-            onValuesChange === null || onValuesChange === void 0 ? void 0 : onValuesChange(currParsed);
+            emitValues(currParsed);
         }
-    }, [serialisedValues, onValuesChange, persistValues]);
+    }, [serialisedValues, emitValues, persistValues]);
     const handleClearAll = react_1.default.useCallback(() => {
         const clearedDefaults = Object.assign({}, schemaDefaults);
         flattenedSchema.forEach(field => {
@@ -385,13 +439,13 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
         const nextSerialised = persistValues(nextValues);
         hasEmittedValuesRef.current = true;
         lastPersistedValuesRef.current = nextSerialised !== null && nextSerialised !== void 0 ? nextSerialised : null;
-        onValuesChange === null || onValuesChange === void 0 ? void 0 : onValuesChange(nextValues);
+        emitValues(nextValues);
     }, [
         schemaDefaults,
         flattenedSchema,
         formMethods,
         onClearAll,
-        onValuesChange,
+        emitValues,
         persistValues
     ]);
     const handleOpenModal = react_1.default.useCallback(() => {
@@ -445,14 +499,48 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
         hasEmittedValuesRef.current = true;
         hasInitialValuesRef.current = Object.keys(nextValues).length > 0;
         // Emit the change to parent
-        onValuesChange === null || onValuesChange === void 0 ? void 0 : onValuesChange(nextValues);
+        emitValues(nextValues);
+    }, [schemaDefaults, flattenedSchema, formMethods, emitValues, persistValues]);
+    // Toggle a filter button. Button state lives outside the form, so this syncs
+    // the value ref, persists, and emits immediately (bypassing the form debounce).
+    const handleButtonToggle = react_1.default.useCallback((button) => {
+        const isActive = activeButtonValues.includes(button.value);
+        let nextValues;
+        if (isActive) {
+            nextValues = activeButtonValues.filter(value => value !== button.value);
+        }
+        else if (button.singleChoice) {
+            nextValues = [button.value];
+        }
+        else {
+            nextValues = [...activeButtonValues, button.value];
+        }
+        // Sync the ref synchronously so emitValues sees the new button values
+        // before the state-update effect runs.
+        buttonValuesRef.current = computeButtonValues(nextValues);
+        setActiveButtonValues(nextValues);
+        (0, storage_1.writeStoredButtonValues)(storageKey, nextValues);
+        const formValuesNow = (0, values_1.normaliseOutputValues)(flattenedSchema, formMethods.getValues());
+        hasEmittedValuesRef.current = true;
+        emitValues(formValuesNow);
+        onFilterButtonsChange === null || onFilterButtonsChange === void 0 ? void 0 : onFilterButtonsChange((filterButtons !== null && filterButtons !== void 0 ? filterButtons : []).filter(item => nextValues.includes(item.value)));
     }, [
-        schemaDefaults,
+        activeButtonValues,
+        computeButtonValues,
+        storageKey,
         flattenedSchema,
         formMethods,
-        onValuesChange,
-        persistValues
+        emitValues,
+        onFilterButtonsChange,
+        filterButtons
     ]);
+    // Deactivate a button from its applied-filter chip.
+    const handleButtonRemove = react_1.default.useCallback((value) => {
+        const button = (filterButtons !== null && filterButtons !== void 0 ? filterButtons : []).find(item => String(item.value) === value);
+        if (button) {
+            handleButtonToggle(button);
+        }
+    }, [filterButtons, handleButtonToggle]);
     // Expose imperative methods via ref
     react_1.default.useImperativeHandle(filterActionsRef, () => ({
         clearValue: (keys) => {
@@ -490,17 +578,40 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
         onRemove: handleRemoveFilter
     });
     const handleAppliedFilterRemove = react_1.default.useCallback((key) => {
-        if (externalAppliedFilters === null || externalAppliedFilters === void 0 ? void 0 : externalAppliedFilters.some(f => f.key === key)) {
+        if (key.startsWith(BUTTON_CHIP_PREFIX)) {
+            handleButtonRemove(key.slice(BUTTON_CHIP_PREFIX.length));
+        }
+        else if (externalAppliedFilters === null || externalAppliedFilters === void 0 ? void 0 : externalAppliedFilters.some(f => f.key === key)) {
             onRemoveExternalFilter === null || onRemoveExternalFilter === void 0 ? void 0 : onRemoveExternalFilter(key);
         }
         else {
             handleRemoveFilter(key);
         }
-    }, [externalAppliedFilters, onRemoveExternalFilter, handleRemoveFilter]);
+    }, [
+        externalAppliedFilters,
+        onRemoveExternalFilter,
+        handleRemoveFilter,
+        handleButtonRemove
+    ]);
     const handleClearAllApplied = react_1.default.useCallback(() => {
+        // Reset filter buttons before clearing the form so the merged emission in
+        // handleClearAll no longer carries button values.
+        if (activeButtonValues.length > 0) {
+            buttonValuesRef.current = {};
+            setActiveButtonValues([]);
+            (0, storage_1.clearStoredButtonValues)(storageKey);
+            onFilterButtonsChange === null || onFilterButtonsChange === void 0 ? void 0 : onFilterButtonsChange([]);
+        }
         handleClearAll();
         externalAppliedFilters === null || externalAppliedFilters === void 0 ? void 0 : externalAppliedFilters.forEach(f => onRemoveExternalFilter === null || onRemoveExternalFilter === void 0 ? void 0 : onRemoveExternalFilter(f.key));
-    }, [handleClearAll, externalAppliedFilters, onRemoveExternalFilter]);
+    }, [
+        handleClearAll,
+        externalAppliedFilters,
+        onRemoveExternalFilter,
+        activeButtonValues,
+        storageKey,
+        onFilterButtonsChange
+    ]);
     const renderFieldComponent = (field) => {
         const ariaLabel = (0, schema_1.getFieldAriaLabel)(field);
         const isDisabled = checkIsDisabled(field, formValues !== null && formValues !== void 0 ? formValues : {});
@@ -545,12 +656,16 @@ const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onVal
     return (react_1.default.createElement(ui_card_1.Card, { size: "small", className: "akinon-filter shadow", "data-testid": "akifilter-root" },
         react_1.default.createElement(antd_1.ConfigProvider, { theme: theme_overrides_1.themeOverrides },
             react_1.default.createElement(filter_toolbar_1.FilterToolbar, { onOpenModal: handleOpenModal, enableImportCsv: enableImportCsv, enableImportXls: enableImportXls, onImportCsv: onImportCsv, onImportXls: onImportXls }),
-            react_1.default.createElement(applied_filters_1.AppliedFilters, { filters: [...appliedFilters, ...(externalAppliedFilters !== null && externalAppliedFilters !== void 0 ? externalAppliedFilters : [])], onRemove: handleAppliedFilterRemove, onClearAll: handleClearAllApplied }),
+            react_1.default.createElement(applied_filters_1.AppliedFilters, { filters: [
+                    ...appliedFilters,
+                    ...buttonAppliedFilters,
+                    ...(externalAppliedFilters !== null && externalAppliedFilters !== void 0 ? externalAppliedFilters : [])
+                ], onRemove: handleAppliedFilterRemove, onClearAll: handleClearAllApplied, leading: react_1.default.createElement(filter_buttons_1.FilterButtons, { buttons: filterButtons !== null && filterButtons !== void 0 ? filterButtons : [], activeValues: activeButtonValues, onToggle: handleButtonToggle }) }),
             react_1.default.createElement("div", { className: "akinon-filter__body" },
                 react_1.default.createElement(akiform_1.Akiform, { layout: "vertical", className: "akinon-filter__form" },
                     react_1.default.createElement("div", { className: "akinon-filter__form-grid", "data-testid": "akifilter-form-grid" },
                         visibleFields.map(renderFormField),
-                        visibleFields.length === 0 ? (react_1.default.createElement("div", { className: "akinon-filter__empty" }, i18n_1.i18n.t('form.noVisibleFields'))) : null),
+                        visibleFields.length === 0 && regularFields.length > 0 ? (react_1.default.createElement("div", { className: "akinon-filter__empty" }, i18n_1.i18n.t('form.noVisibleFields'))) : null),
                     sectionFields.length > 0 && (react_1.default.createElement("div", { className: "akinon-filter__section-fields" }, sectionFields.map(section => {
                         return (react_1.default.createElement(ui_collapse_1.Collapse, { expandIconPosition: "end", key: section.key, expandIcon: exports.ExpandIcon, defaultActiveKey: section.defaultExpanded === false ? [] : [section.key], ghost: true, items: [
                                 {
@@ -598,10 +713,12 @@ const renderErrorFallback = ({ resetErrorBoundary }) => {
                 react_1.default.createElement(ui_button_1.Button, { type: "primary", onClick: resetErrorBoundary, size: "small" }, t('errors.retry'))))));
 };
 const Akifilter = (props) => {
+    var _a, _b;
     const { filterSchema } = props, restProps = __rest(props, ["filterSchema"]);
     const resolvedSchema = (filterSchema !== null && filterSchema !== void 0 ? filterSchema : []);
     const hasSchema = resolvedSchema.length > 0;
-    return (react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { fallbackRender: renderErrorFallback }, hasSchema ? (react_1.default.createElement(AkifilterContent, Object.assign({}, restProps, { filterSchema: resolvedSchema }))) : (react_1.default.createElement(AkifilterEmptyState, null))));
+    const hasButtons = ((_b = (_a = props.filterButtons) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0;
+    return (react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { fallbackRender: renderErrorFallback }, hasSchema || hasButtons ? (react_1.default.createElement(AkifilterContent, Object.assign({}, restProps, { filterSchema: resolvedSchema }))) : (react_1.default.createElement(AkifilterEmptyState, null))));
 };
 exports.Akifilter = Akifilter;
 exports.Akifilter.displayName = 'Akifilter';

package/dist/cjs/common/storage.d.ts

@@ -7,4 +7,7 @@ export declare const clearVisibleKeys: (storageKey: string) => void;
 export declare const readStoredValues: <TFieldValues extends FieldValues>(schema: AkifilterField<TFieldValues>[], storageKey: string) => Partial<TFieldValues> | null;
 export declare const writeStoredValues: <TFieldValues extends FieldValues>(storageKey: string, values: Partial<TFieldValues>) => void;
 export declare const clearStoredValues: (storageKey: string) => void;
+export declare const readStoredButtonValues: (storageKey: string) => Array<string | number> | null;
+export declare const writeStoredButtonValues: (storageKey: string, values: Array<string | number>) => void;
+export declare const clearStoredButtonValues: (storageKey: string) => void;
 //# sourceMappingURL=storage.d.ts.map

package/dist/cjs/common/storage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"storage.d.ts","sourceRoot":"","sources":["../../../src/common/storage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AA2B/C,eAAO,MAAM,eAAe,GAAI,YAAY,SAAS,WAAW,EAC9D,QAAQ,cAAc,CAAC,YAAY,CAAC,EAAE,EACtC,YAAY,MAAM,KACjB,MAKF,CAAC;AAIF,eAAO,MAAM,eAAe,GAAI,YAAY,SAAS,WAAW,EAC9D,QAAQ,cAAc,CAAC,YAAY,CAAC,EAAE,EACtC,YAAY,MAAM,KACjB,MAAM,EAAE,GAAG,IAoBb,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,YAAY,MAAM,EAAE,MAAM,MAAM,EAAE,KAAG,IAQrE,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,YAAY,MAAM,KAAG,IAQrD,CAAC;AAKF,eAAO,MAAM,gBAAgB,GAAI,YAAY,SAAS,WAAW,EAC/D,QAAQ,cAAc,CAAC,YAAY,CAAC,EAAE,EACtC,YAAY,MAAM,KACjB,OAAO,CAAC,YAAY,CAAC,GAAG,IA+B1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,YAAY,SAAS,WAAW,EAChE,YAAY,MAAM,EAClB,QAAQ,OAAO,CAAC,YAAY,CAAC,KAC5B,IAeF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,YAAY,MAAM,KAAG,IAQtD,CAAC"}
+{"version":3,"file":"storage.d.ts","sourceRoot":"","sources":["../../../src/common/storage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AA4B/C,eAAO,MAAM,eAAe,GAAI,YAAY,SAAS,WAAW,EAC9D,QAAQ,cAAc,CAAC,YAAY,CAAC,EAAE,EACtC,YAAY,MAAM,KACjB,MAKF,CAAC;AAIF,eAAO,MAAM,eAAe,GAAI,YAAY,SAAS,WAAW,EAC9D,QAAQ,cAAc,CAAC,YAAY,CAAC,EAAE,EACtC,YAAY,MAAM,KACjB,MAAM,EAAE,GAAG,IAoBb,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,YAAY,MAAM,EAAE,MAAM,MAAM,EAAE,KAAG,IAQrE,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,YAAY,MAAM,KAAG,IAQrD,CAAC;AAKF,eAAO,MAAM,gBAAgB,GAAI,YAAY,SAAS,WAAW,EAC/D,QAAQ,cAAc,CAAC,YAAY,CAAC,EAAE,EACtC,YAAY,MAAM,KACjB,OAAO,CAAC,YAAY,CAAC,GAAG,IA+B1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,YAAY,SAAS,WAAW,EAChE,YAAY,MAAM,EAClB,QAAQ,OAAO,CAAC,YAAY,CAAC,KAC5B,IAeF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,YAAY,MAAM,KAAG,IAQtD,CAAC;AAKF,eAAO,MAAM,sBAAsB,GACjC,YAAY,MAAM,KACjB,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,IAwB3B,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAClC,YAAY,MAAM,EAClB,QAAQ,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,KAC7B,IAcF,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,YAAY,MAAM,KAAG,IAQ5D,CAAC"}

package/dist/cjs/common/storage.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.clearStoredValues = exports.writeStoredValues = exports.readStoredValues = exports.clearVisibleKeys = exports.writeVisibleKeys = exports.readVisibleKeys = exports.buildStorageKey = void 0;
+exports.clearStoredButtonValues = exports.writeStoredButtonValues = exports.readStoredButtonValues = exports.clearStoredValues = exports.writeStoredValues = exports.readStoredValues = exports.clearVisibleKeys = exports.writeVisibleKeys = exports.readVisibleKeys = exports.buildStorageKey = void 0;
 const i18n_1 = require("../i18n");
 const STORAGE_PREFIX = 'akifilter:v1';
 const VALUES_SUFFIX = ':values';
+const BUTTONS_SUFFIX = ':buttons';
 const hashString = (value) => {
     let hash = 0;
     for (let i = 0; i < value.length; i += 1) {
@@ -128,3 +129,51 @@ const clearStoredValues = (storageKey) => {
     }
 };
 exports.clearStoredValues = clearStoredValues;
+const buildButtonsStorageKey = (storageKey) => `${storageKey}${BUTTONS_SUFFIX}`;
+const readStoredButtonValues = (storageKey) => {
+    if (!isBrowser)
+        return null;
+    try {
+        const rawValue = window.localStorage.getItem(buildButtonsStorageKey(storageKey));
+        if (!rawValue) {
+            return null;
+        }
+        const parsed = JSON.parse(rawValue);
+        if (!Array.isArray(parsed)) {
+            return null;
+        }
+        return parsed.filter((value) => typeof value === 'string' || typeof value === 'number');
+    }
+    catch (error) {
+        console.warn(i18n_1.i18n.t('errors.storage.readButtons'), error);
+        return null;
+    }
+};
+exports.readStoredButtonValues = readStoredButtonValues;
+const writeStoredButtonValues = (storageKey, values) => {
+    if (!isBrowser)
+        return;
+    const buttonsKey = buildButtonsStorageKey(storageKey);
+    try {
+        if (values.length === 0) {
+            window.localStorage.removeItem(buttonsKey);
+            return;
+        }
+        window.localStorage.setItem(buttonsKey, JSON.stringify(values));
+    }
+    catch (error) {
+        console.warn(i18n_1.i18n.t('errors.storage.writeButtons'), error);
+    }
+};
+exports.writeStoredButtonValues = writeStoredButtonValues;
+const clearStoredButtonValues = (storageKey) => {
+    if (!isBrowser)
+        return;
+    try {
+        window.localStorage.removeItem(buildButtonsStorageKey(storageKey));
+    }
+    catch (error) {
+        console.warn(i18n_1.i18n.t('errors.storage.clearButtons'), error);
+    }
+};
+exports.clearStoredButtonValues = clearStoredButtonValues;

package/dist/cjs/components/applied-filters.d.ts

@@ -9,7 +9,12 @@ type AppliedFiltersProps = {
     filters: AppliedFilter[];
     onRemove: (key: string) => void;
     onClearAll: () => void;
+    /**
+     * Content rendered at the start of the bar, before the active-filters
+     * summary (e.g. quick-filter toggle buttons).
+     */
+    leading?: React.ReactNode;
 };
-export declare const AppliedFilters: ({ filters, onRemove, onClearAll }: AppliedFiltersProps) => React.JSX.Element;
+export declare const AppliedFilters: ({ filters, onRemove, onClearAll, leading }: AppliedFiltersProps) => React.JSX.Element;
 export type { AppliedFilter };
 //# sourceMappingURL=applied-filters.d.ts.map

package/dist/cjs/components/applied-filters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"applied-filters.d.ts","sourceRoot":"","sources":["../../../src/components/applied-filters.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,aAAa,GAAG;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,mCAI5B,mBAAmB,sBA+DrB,CAAC;AAEF,YAAY,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"applied-filters.d.ts","sourceRoot":"","sources":["../../../src/components/applied-filters.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,aAAa,GAAG;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,4CAK5B,mBAAmB,sBAgErB,CAAC;AAEF,YAAY,EAAE,aAAa,EAAE,CAAC"}

package/dist/cjs/components/applied-filters.js

@@ -7,9 +7,10 @@ const ui_space_1 = require("@akinon/ui-space");
 const ui_typography_1 = require("@akinon/ui-typography");
 const react_1 = require("react");
 const i18n_1 = require("../i18n");
-const AppliedFilters = ({ filters, onRemove, onClearAll }) => {
+const AppliedFilters = ({ filters, onRemove, onClearAll, leading }) => {
     const hasFilters = filters.length > 0;
     return (react_1.default.createElement("div", { className: "akinon-filter__applied", "data-testid": "akifilter-applied" },
+        leading,
         react_1.default.createElement(ui_space_1.Space, { className: "akinon-filter__applied-summary", size: 8 },
             react_1.default.createElement(ui_typography_1.Text, { className: "akinon-filter__applied-label" }, i18n_1.i18n.t('applied.label')),
             hasFilters ? (react_1.default.createElement(ui_space_1.Space, { className: "akinon-filter__applied-items", size: 8, wrap: true }, filters.map(item => (react_1.default.createElement("div", { key: `${item.key}-${item.value}`, className: `akinon-filter__chip${item.isExclude ? ' akinon-filter__chip--exclude' : ''}` },

package/dist/cjs/components/filter-buttons.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { AkifilterButton } from '../types';
+type FilterButtonsProps = {
+    buttons: AkifilterButton[];
+    activeValues: Array<string | number>;
+    onToggle: (button: AkifilterButton) => void;
+};
+/**
+ * Row of quick-filter toggle buttons rendered above the filter form. Active
+ * state is owned by the parent; clicking a button delegates to `onToggle`.
+ */
+export declare const FilterButtons: ({ buttons, activeValues, onToggle }: FilterButtonsProps) => React.JSX.Element | null;
+export {};
+//# sourceMappingURL=filter-buttons.d.ts.map

package/dist/cjs/components/filter-buttons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-buttons.d.ts","sourceRoot":"","sources":["../../../src/components/filter-buttons.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,KAAK,kBAAkB,GAAG;IACxB,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,YAAY,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IACrC,QAAQ,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,qCAI3B,kBAAkB,6BA4BpB,CAAC"}

package/dist/cjs/components/filter-buttons.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterButtons = void 0;
+const ui_button_1 = require("@akinon/ui-button");
+const ui_space_1 = require("@akinon/ui-space");
+const react_1 = require("react");
+/**
+ * Row of quick-filter toggle buttons rendered above the filter form. Active
+ * state is owned by the parent; clicking a button delegates to `onToggle`.
+ */
+const FilterButtons = ({ buttons, activeValues, onToggle }) => {
+    if (buttons.length === 0) {
+        return null;
+    }
+    return (react_1.default.createElement("div", { className: "akinon-filter__buttons", "data-testid": "akifilter-buttons" },
+        react_1.default.createElement(ui_space_1.Space, { size: 6 }, buttons.map(button => {
+            const isActive = activeValues.includes(button.value);
+            return (react_1.default.createElement(ui_button_1.Button, { key: button.value, className: `akinon-filter__button${isActive ? ' akinon-filter__button--active' : ''}`, icon: button.icon, iconSize: 20, type: "text", onClick: () => onToggle(button), tooltip: button.label, "aria-label": button.label, "aria-pressed": isActive }));
+        }))));
+};
+exports.FilterButtons = FilterButtons;

package/dist/cjs/i18n/translations/en.d.ts

@@ -36,6 +36,9 @@ declare const translations: {
             readonly readValues: "Akifilter: unable to read values from storage";
             readonly writeValues: "Akifilter: unable to persist values";
             readonly clearValues: "Akifilter: unable to clear stored values";
+            readonly readButtons: "Akifilter: unable to read filter buttons from storage";
+            readonly writeButtons: "Akifilter: unable to persist filter buttons";
+            readonly clearButtons: "Akifilter: unable to clear stored filter buttons";
         };
     };
 };

package/dist/cjs/i18n/translations/en.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/en.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCR,CAAC;AAEX,eAAe,YAAY,CAAC"}
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/en.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CR,CAAC;AAEX,eAAe,YAAY,CAAC"}

package/dist/cjs/i18n/translations/en.js

@@ -37,7 +37,10 @@ const translations = {
             clearVisibility: 'Akifilter: unable to clear visibility state',
             readValues: 'Akifilter: unable to read values from storage',
             writeValues: 'Akifilter: unable to persist values',
-            clearValues: 'Akifilter: unable to clear stored values'
+            clearValues: 'Akifilter: unable to clear stored values',
+            readButtons: 'Akifilter: unable to read filter buttons from storage',
+            writeButtons: 'Akifilter: unable to persist filter buttons',
+            clearButtons: 'Akifilter: unable to clear stored filter buttons'
         }
     }
 };

package/dist/cjs/i18n/translations/tr.d.ts

@@ -36,6 +36,9 @@ declare const translations: {
             readonly readValues: "Akifilter: değerler depodan okunamadı";
             readonly writeValues: "Akifilter: değerler kalıcı hale getirilemedi";
             readonly clearValues: "Akifilter: kayıtlı değerler temizlenemedi";
+            readonly readButtons: "Akifilter: filtre butonları depodan okunamadı";
+            readonly writeButtons: "Akifilter: filtre butonları kalıcı hale getirilemedi";
+            readonly clearButtons: "Akifilter: kayıtlı filtre butonları temizlenemedi";
         };
     };
 };

package/dist/cjs/i18n/translations/tr.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tr.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/tr.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCR,CAAC;AAEX,eAAe,YAAY,CAAC"}
+{"version":3,"file":"tr.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/tr.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CR,CAAC;AAEX,eAAe,YAAY,CAAC"}

package/dist/cjs/i18n/translations/tr.js

@@ -37,7 +37,10 @@ const translations = {
             clearVisibility: 'Akifilter: görünürlük durumu temizlenemedi',
             readValues: 'Akifilter: değerler depodan okunamadı',
             writeValues: 'Akifilter: değerler kalıcı hale getirilemedi',
-            clearValues: 'Akifilter: kayıtlı değerler temizlenemedi'
+            clearValues: 'Akifilter: kayıtlı değerler temizlenemedi',
+            readButtons: 'Akifilter: filtre butonları depodan okunamadı',
+            writeButtons: 'Akifilter: filtre butonları kalıcı hale getirilemedi',
+            clearButtons: 'Akifilter: kayıtlı filtre butonları temizlenemedi'
         }
     }
 };

package/dist/cjs/styles.css

@@ -1,4 +1,8 @@
-.akinon-filter {
+.akinon-filter,
+.akinon-filter *,
+.akinon-filter *::before,
+.akinon-filter *::after {
+  box-sizing: border-box;
 }
 
 .akinon-filter__top {
@@ -47,7 +51,7 @@
   background-color: var(--color-ebonyClay-900);
   flex: 1;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   border-radius: 5px;
   padding: 6px 8px;
   margin-right: 6px;
@@ -58,9 +62,7 @@
   color: var(--color-white);
   font-weight: 600;
   font-size: 13px;
-  position: relative;
   white-space: nowrap;
-  top: 7px;
 }
 
 .akinon-filter__section-header span {
@@ -68,6 +70,36 @@
   flex: unset !important;
 }
 
+.akinon-filter__buttons {
+  display: flex;
+  align-items: center;
+  margin-left: 2px;
+  margin-right: 6px;
+}
+
+.akinon-filter .akinon-filter__button {
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  background-color: var(--color-ebonyClay-960);
+}
+
+.akinon-filter .akinon-filter__button--active {
+  box-shadow: 0 0 2px 1px var(--color-azure-500);
+}
+
+@media (max-width: 640px) {
+  .akinon-filter__applied {
+    flex-wrap: wrap;
+  }
+
+  .akinon-filter__buttons {
+    width: 100%;
+    margin-right: 0;
+    margin-bottom: 6px;
+  }
+}
+
 .akinon-filter__form-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -170,8 +202,6 @@
 .akinon-filter__applied-empty {
   color: color(--color-ebonyClay-500);
   font-size: 12px;
-  position: relative;
-  top: 8px;
 }
 
 .akinon-filter__modal-list {