@fuf-stack/megapixels 0.8.0 → 0.9.0

package/dist/Filter-Bc0LWCnZ.cjs

@@ -0,0 +1,811 @@
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+let debug = require("debug");
+debug = __toESM(debug);
+let __fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
+let __fuf_stack_uniform_Form = require("@fuf-stack/uniform/Form");
+__fuf_stack_uniform_Form = __toESM(__fuf_stack_uniform_Form);
+let react = require("react");
+let __fuf_stack_veto = require("@fuf-stack/veto");
+let __fuf_stack_pixels_Label = require("@fuf-stack/pixels/Label");
+__fuf_stack_pixels_Label = __toESM(__fuf_stack_pixels_Label);
+let __fuf_stack_uniform_hooks_useFormContext = require("@fuf-stack/uniform/hooks/useFormContext");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_icons_fa6 = require("react-icons/fa6");
+let __fuf_stack_pixels_Menu = require("@fuf-stack/pixels/Menu");
+__fuf_stack_pixels_Menu = __toESM(__fuf_stack_pixels_Menu);
+let react_icons_pi = require("react-icons/pi");
+let __fuf_stack_pixels_Button = require("@fuf-stack/pixels/Button");
+__fuf_stack_pixels_Button = __toESM(__fuf_stack_pixels_Button);
+let __fuf_stack_pixels_Modal = require("@fuf-stack/pixels/Modal");
+__fuf_stack_pixels_Modal = __toESM(__fuf_stack_pixels_Modal);
+let __fuf_stack_uniform_SubmitButton = require("@fuf-stack/uniform/SubmitButton");
+__fuf_stack_uniform_SubmitButton = __toESM(__fuf_stack_uniform_SubmitButton);
+let react_icons_fa = require("react-icons/fa");
+let __fuf_stack_pixel_motion = require("@fuf-stack/pixel-motion");
+let __fuf_stack_uniform_Input = require("@fuf-stack/uniform/Input");
+__fuf_stack_uniform_Input = __toESM(__fuf_stack_uniform_Input);
+let __fuf_stack_uniform_Switch = require("@fuf-stack/uniform/Switch");
+__fuf_stack_uniform_Switch = __toESM(__fuf_stack_uniform_Switch);
+let __fuf_stack_uniform_Checkboxes = require("@fuf-stack/uniform/Checkboxes");
+__fuf_stack_uniform_Checkboxes = __toESM(__fuf_stack_uniform_Checkboxes);
+
+//#region src/Filter/hooks/useFilterValidation.ts
+/**
+* useFilterValidation
+*
+* Builds a composite validation schema from all provided filter definitions
+* under "filter" and optionally includes a "search" string field.
+* Memoized by inputs.
+*/
+const useFilterValidation = (filters$1, withSearch) => {
+	return (0, react.useMemo)(() => {
+		let filterSchema = {};
+		filters$1.forEach((f) => {
+			filterSchema = {
+				...filterSchema,
+				[f.name]: f.validation(f.config)
+			};
+		});
+		return (0, __fuf_stack_veto.veto)({
+			filter: (0, __fuf_stack_veto.stringToJSON)().pipe((0, __fuf_stack_veto.object)(filterSchema)).or((0, __fuf_stack_veto.object)(filterSchema)).optional().nullable().transform((val) => {
+				return val ?? void 0;
+			}),
+			...withSearch ? { search: (0, __fuf_stack_veto.string)({ min: 0 }).nullable().optional() } : {}
+		});
+	}, [filters$1, withSearch]);
+};
+
+//#endregion
+//#region src/Filter/Subcomponents/FiltersContext.tsx
+/**
+* FiltersContext
+*
+* Central state for the filter UI with a clear boundary:
+* - The parent component controls committed filter values (via value/onChange)
+* - The form acts as an edit buffer (used by the modal)
+*
+* Design:
+* - activeFilters/unusedFilters are names-only and derived from the controlled
+*   form state
+* - getFilterInstanceByName gives access to the concrete registry entry to
+*   retrieve the correct Form/Display components
+* - add seeds defaults in the form and opens the modal
+* - remove un-registers the form field; if the removed filter is currently
+*   open in the modal, the modal is closed without rollback
+* - on a new successful form submit (Apply), the modal closes without rollback
+*   by subscribing to ex-forms submit state
+*/
+const FiltersContext = (0, react.createContext)(void 0);
+const FiltersContextProvider = ({ children, config: config$2 }) => {
+	const { formState, getFieldState, setValue, triggerSubmit, unregister, watch } = (0, __fuf_stack_uniform_hooks_useFormContext.useFormContext)();
+	/**
+	* currentModalFilter
+	*
+	* Single source of truth for the filter edit modal and its rollback snapshot.
+	* - name: which filter's modal is currently open (null when closed)
+	* - hadValue/previousValue: snapshot of the controlled value taken when the
+	*   modal is opened; used to restore state if the user cancels/closes without
+	*   applying.
+	*
+	* Lifecycle semantics:
+	* - showFilterModal(name): capture snapshot (current controlled value) and open
+	*   the modal for that filter.
+	* - closeFilterModal(): if a snapshot exists, roll back un-applied edits by
+	*   restoring the previous value (setValue) or removing the field (unregister)
+	*   when it did not exist before; then clear currentModalFilter.
+	* - On successful submit (Apply): close and clear currentModalFilter WITHOUT rollback
+	*   so edits remain committed.
+	* - removeFilter(name): unregisters the field; when removing the filter that is
+	*   currently open, close the modal WITHOUT rollback (since removal is explicit).
+	*/
+	const [currentModalFilter, setCurrentModalFilter] = (0, react.useState)(null);
+	const filterValue = watch("filter", {});
+	/**
+	* getFilterFormFieldName
+	*
+	* Returns the fully-qualified field path for a given filter name,
+	* e.g., `${filterUrlParam}.status`.
+	*/
+	const getFilterFormFieldName = (0, react.useCallback)((name) => {
+		return `filter.${name}`;
+	}, []);
+	/**
+	* getFilterValueByName
+	*
+	* Returns the committed value for a filter from the controlled state.
+	*/
+	const getFilterValueByName = (0, react.useCallback)((name) => {
+		return filterValue[name];
+	}, [filterValue]);
+	/** Open the filter edit modal for the given filter name. */
+	const showFilterModal = (0, react.useCallback)((name) => {
+		const prev = getFilterValueByName(name);
+		setCurrentModalFilter({
+			name,
+			hadValue: typeof prev !== "undefined",
+			previousValue: prev
+		});
+	}, [getFilterValueByName]);
+	/** Close the filter edit modal. Rollback un-applied edits to controlled state. */
+	const closeFilterModal = (0, react.useCallback)(() => {
+		if (currentModalFilter?.name) {
+			const fieldName = getFilterFormFieldName(currentModalFilter.name);
+			if (currentModalFilter.hadValue) setValue(fieldName, currentModalFilter.previousValue);
+			else unregister(fieldName);
+		}
+		setCurrentModalFilter(null);
+	}, [
+		getFilterFormFieldName,
+		currentModalFilter,
+		setValue,
+		unregister
+	]);
+	/**
+	* Auto-close on submit success
+	*
+	* Close the modal only on new successful submissions. We track the last
+	* submitCount and only react when it changes AND the form reports a
+	* successful submit. This prevents closing when `isSubmitSuccessful` remains
+	* true without a new submit event.
+	*/
+	const lastSubmitCountRef = (0, react.useRef)(0);
+	(0, react.useEffect)(() => {
+		if (formState.submitCount !== lastSubmitCountRef.current && formState.isSubmitSuccessful) setCurrentModalFilter(null);
+		lastSubmitCountRef.current = formState.submitCount;
+	}, [
+		formState.submitCount,
+		formState.isSubmitSuccessful,
+		setCurrentModalFilter
+	]);
+	/**
+	* activeFilters
+	*
+	* Filter names derived from the controlled form state. A filter is considered
+	* active when a field exists at `filter.<name>`. Newly added filters become
+	* active immediately (seeded default), and will be rolled back on cancel.
+	*/
+	const activeFilters = (0, react.useMemo)(() => {
+		return config$2.filter((f) => {
+			return Object.hasOwn(filterValue ?? {}, f.name);
+		}).map((f) => {
+			return f.name;
+		});
+	}, [config$2, filterValue]);
+	/**
+	* unusedFilters
+	*
+	* Complement of activeFilters (names without a corresponding `filter.<name>`
+	* field in the controlled form state).
+	*/
+	const unusedFilters = (0, react.useMemo)(() => {
+		return config$2.filter((f) => {
+			return !Object.hasOwn(filterValue ?? {}, f.name);
+		}).map((f) => {
+			return f.name;
+		});
+	}, [config$2, filterValue]);
+	/**
+	* getRegistryFilterByName
+	*
+	* Looks up the concrete registry entry for a filter by name, enabling access
+	* to typed Form/Display components and other registry-level metadata.
+	*/
+	const getFilterInstanceByName = (0, react.useCallback)((name) => {
+		return config$2.find((f) => {
+			return f.name === name;
+		});
+	}, [config$2]);
+	/**
+	* addFilter
+	*
+	* Seeds the filter with its registry default value inside the form and opens
+	* the modal for immediate editing. No URL writes happen here.
+	*/
+	const addFilter = (0, react.useCallback)((name) => {
+		const inst = getFilterInstanceByName(name);
+		showFilterModal(name);
+		setValue(getFilterFormFieldName(name), inst.defaultValue);
+	}, [
+		getFilterFormFieldName,
+		getFilterInstanceByName,
+		setValue,
+		showFilterModal
+	]);
+	/**
+	* removeFilter
+	*
+	* Unregisters the filter field from the form. This immediately removes the
+	* filter from the active list since derived state watches the form. It
+	* closes the modal without rollback if the removed filter is currently open.
+	*/
+	const removeFilter = (0, react.useCallback)((name) => {
+		unregister(getFilterFormFieldName(name));
+		if (currentModalFilter?.name === name) setCurrentModalFilter(null);
+		triggerSubmit();
+	}, [
+		getFilterFormFieldName,
+		currentModalFilter,
+		setCurrentModalFilter,
+		triggerSubmit,
+		unregister
+	]);
+	/**
+	* hasError
+	*
+	* Helper that checks the ex-forms field state for a specific filter and
+	* reports whether the field is currently invalid.
+	*/
+	const hasError = (0, react.useCallback)((name) => {
+		return getFieldState(getFilterFormFieldName(name)).invalid;
+	}, [getFieldState, getFilterFormFieldName]);
+	const contextValue = (0, react.useMemo)(() => {
+		return {
+			activeFilters,
+			addFilter,
+			closeFilterModal,
+			getFilterFormFieldName,
+			getFilterValueByName,
+			getFilterInstanceByName,
+			hasError,
+			modalFilterName: currentModalFilter?.name,
+			removeFilter,
+			showFilterModal,
+			unusedFilters
+		};
+	}, [
+		activeFilters,
+		addFilter,
+		closeFilterModal,
+		getFilterFormFieldName,
+		getFilterValueByName,
+		getFilterInstanceByName,
+		hasError,
+		currentModalFilter,
+		removeFilter,
+		showFilterModal,
+		unusedFilters
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FiltersContext.Provider, {
+		value: contextValue,
+		children
+	});
+};
+/**
+* useFilters
+*
+* Convenience hook to consume the FiltersContext. Throws a descriptive error
+* when used outside of a FiltersContextProvider to make integration mistakes
+* obvious during development.
+*/
+const useFilters = () => {
+	const ctx = (0, react.useContext)(FiltersContext);
+	if (!ctx) throw new Error("useFilters must be used within FiltersContextProvider");
+	return ctx;
+};
+
+//#endregion
+//#region src/Filter/Subcomponents/ActiveFilters.tsx
+const ActiveFilters = ({ className = void 0 }) => {
+	const { activeFilters, getFilterValueByName, getFilterInstanceByName, hasError, removeFilter, showFilterModal } = useFilters();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: activeFilters.map((name) => {
+		const instance = getFilterInstanceByName(name);
+		const value = getFilterValueByName(name);
+		const DisplayComponent = instance.components.Display;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			"aria-label": `Open ${name} filter`,
+			type: "button",
+			onClick: () => {
+				showFilterModal(name);
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__fuf_stack_pixels_Label.default, {
+				className,
+				color: hasError(name) ? "danger" : "primary",
+				variant: "flat",
+				onClose: () => {
+					removeFilter(name);
+				},
+				children: [instance.icon, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DisplayComponent, {
+					config: instance.config,
+					value
+				})]
+			})
+		}, name);
+	}) });
+};
+var ActiveFilters_default = ActiveFilters;
+
+//#endregion
+//#region src/Filter/Subcomponents/AddFilterMenu.tsx
+/**
+* AddFilterMenu
+*
+* Renders a menu trigger that opens a list of addable filters. Selecting an
+* item triggers the parent to seed a default value and open the modal.
+*/
+const AddFilterMenu = ({ classNames = {} }) => {
+	const { unusedFilters, addFilter, getFilterInstanceByName } = useFilters();
+	const menuItems = unusedFilters.map((name) => {
+		const instance = getFilterInstanceByName(name);
+		const label = instance.config?.text ?? name;
+		return {
+			key: name,
+			icon: instance.icon,
+			label,
+			onClick: () => {
+				addFilter(name);
+			}
+		};
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__fuf_stack_pixels_Menu.default, {
+		isDisabled: !menuItems.length,
+		items: menuItems,
+		placement: "bottom-start",
+		className: {
+			item: classNames.addFilterMenuItem,
+			trigger: classNames.addFilterMenuButton
+		},
+		triggerButtonProps: {
+			"aria-label": "Add Filter",
+			"data-testid": "add_filter_button",
+			disableRipple: true,
+			size: "sm",
+			variant: "bordered"
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_fa6.FaSliders, {}), "Filter"]
+	});
+};
+var AddFilterMenu_default = AddFilterMenu;
+
+//#endregion
+//#region src/Filter/Subcomponents/FilterModal.tsx
+const FilterModal = ({ classNames = {} }) => {
+	const { closeFilterModal, getFilterFormFieldName, getFilterInstanceByName, modalFilterName, removeFilter } = useFilters();
+	if (!modalFilterName) return null;
+	const instance = getFilterInstanceByName(modalFilterName);
+	const config$2 = instance.config;
+	const FormComponent = instance.components.Form;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__fuf_stack_pixels_Modal.default, {
+		isOpen: true,
+		onClose: closeFilterModal,
+		className: {
+			body: classNames.body,
+			footer: classNames.footer,
+			header: classNames.header
+		},
+		footer: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__fuf_stack_pixels_Button.default, {
+			ariaLabel: "Remove filter",
+			color: "danger",
+			testId: "remove_filter_button",
+			variant: "flat",
+			onClick: () => {
+				removeFilter(modalFilterName);
+			},
+			children: "Remove"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__fuf_stack_uniform_SubmitButton.default, {
+			ariaLabel: "Apply filter",
+			testId: "apply_filter_button",
+			children: "Apply Filter"
+		})] }),
+		header: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [instance.icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_pi.PiSlidersHorizontalBold, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: `${config$2?.text ?? modalFilterName} Filter` })] }),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormComponent, {
+			config: config$2,
+			fieldName: getFilterFormFieldName(modalFilterName)
+		}) })
+	});
+};
+var FilterModal_default = FilterModal;
+
+//#endregion
+//#region src/Filter/Subcomponents/SearchInput.tsx
+/**
+* SearchInput
+*
+* By default renders only a search button. When clicked, the text input animates in
+* and a trailing submit button is shown.
+*/
+const SearchInput = ({ classNames = {}, config: config$2 }) => {
+	const { formState, setFocus, triggerSubmit } = (0, __fuf_stack_uniform_hooks_useFormContext.useFormContext)();
+	const isInitiallyVisible = !!formState?.defaultValues?.search;
+	const [isVisible, setIsVisible] = (0, react.useState)(isInitiallyVisible);
+	const placeholder = typeof config$2 === "object" ? config$2.placeholder : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: classNames.searchWrapper,
+		children: [!isVisible && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__fuf_stack_pixels_Button.default, {
+			ariaLabel: "Show search input",
+			className: classNames.searchShowButton,
+			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_fa.FaSearch, {}),
+			size: "sm",
+			testId: "show_search_input_button",
+			variant: "bordered",
+			onClick: () => {
+				setIsVisible(true);
+			}
+		}), isVisible ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__fuf_stack_pixel_motion.motion.div, {
+			animate: { opacity: 1 },
+			className: classNames.searchMotionDiv,
+			initial: !isInitiallyVisible ? { opacity: .5 } : false,
+			onAnimationComplete: () => {
+				if (!isInitiallyVisible) setFocus("search");
+			},
+			transition: {
+				duration: .3,
+				ease: "circOut"
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__fuf_stack_uniform_Input.default, {
+				clearable: true,
+				debounceDelay: 0,
+				name: "search",
+				placeholder,
+				size: "sm",
+				className: {
+					input: classNames.searchInput,
+					inputWrapper: classNames.searchInputWrapper
+				},
+				onClear: () => {
+					triggerSubmit();
+				}
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__fuf_stack_uniform_SubmitButton.default, {
+				ariaLabel: "Submit search",
+				children: null,
+				className: classNames.searchSubmitButton,
+				color: "primary",
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_fa.FaSearch, {}),
+				size: "sm",
+				testId: "submit_search_button"
+			})]
+		}, "search-input") : null]
+	});
+};
+var SearchInput_default = SearchInput;
+
+//#endregion
+//#region src/Filter/Filter.tsx
+const debug$1 = (0, debug.default)("megapixels:Filter");
+const filterVariants = (0, __fuf_stack_pixel_utils.tv)({ slots: {
+	base: "flex flex-auto flex-col",
+	addFilterMenuButton: "",
+	addFilterMenuItem: "",
+	activeFilterLabel: "h-8 cursor-pointer rounded-md dark:text-foreground",
+	filterModalBody: "",
+	filterModalHeader: "flex items-center gap-3 text-default-700",
+	filterModalFooter: "justify-between",
+	form: "mb-3 flex flex-wrap gap-3",
+	searchInput: "",
+	searchInputWrapper: "",
+	searchMotionDiv: "flex w-72 gap-2",
+	searchShowButton: "",
+	searchSubmitButton: "",
+	searchWrapper: "flex items-center"
+} });
+/**
+* Renders the filter UI bound to a single ex-forms `Form`.
+* The form is the source of truth during user interaction; the committed
+* state is controlled by the parent via `values`/`onChange`.
+*/
+const Filter = ({ children = void 0, className = void 0, config: config$2, formName = "filterComponentForm", onChange, values }) => {
+	const handleSubmit = (nextValues) => {
+		debug$1("handleSubmit", { nextValues });
+		onChange(nextValues);
+	};
+	const validation = useFilterValidation(config$2.filters, Boolean(config$2.search));
+	const { data: valuesValidated, errors, success } = validation.validate(values);
+	const classNames = (0, __fuf_stack_pixel_utils.variantsToClassNames)(filterVariants(), className, "base");
+	debug$1("render", {
+		props: {
+			config: config$2,
+			values
+		},
+		validation: {
+			errors,
+			success,
+			valuesValidated
+		}
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: classNames.base,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__fuf_stack_uniform_Form.default, {
+			className: classNames.form,
+			debug: { disable: true },
+			initialValues: valuesValidated ?? {},
+			name: formName,
+			onSubmit: handleSubmit,
+			validation,
+			children: [config$2.search ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchInput_default, {
+				config: config$2.search,
+				classNames: {
+					searchInput: classNames.searchInput,
+					searchInputWrapper: classNames.searchInputWrapper,
+					searchMotionDiv: classNames.searchMotionDiv,
+					searchShowButton: classNames.searchShowButton,
+					searchSubmitButton: classNames.searchSubmitButton,
+					searchWrapper: classNames.searchWrapper
+				}
+			}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FiltersContextProvider, {
+				config: config$2.filters,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActiveFilters_default, { className: classNames.activeFilterLabel }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddFilterMenu_default, { classNames: {
+						addFilterMenuButton: classNames.addFilterMenuButton,
+						addFilterMenuItem: classNames.addFilterMenuItem
+					} }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterModal_default, { classNames: {
+						body: classNames.filterModalBody,
+						footer: classNames.filterModalFooter,
+						header: classNames.filterModalHeader
+					} })
+				]
+			})]
+		}), children?.(valuesValidated ?? {})]
+	});
+};
+var Filter_default = Filter;
+
+//#endregion
+//#region src/Filter/filters/createFilter.ts
+/**
+* createFilter
+*
+* Builds a filter factory from a static FilterDefinition. The returned factory
+* accepts a usage descriptor (name/icon and optional partial config) and
+* produces a concrete FilterInstance with:
+* - merged config (shallow: definition.defaults.config overlaid by overrides)
+* - Form/Display components
+* - validate function (forwarded from the definition)
+* - defaultValue (forwarded from the definition)
+* - name and icon for UI integration
+*
+* @typeParam Config - Configuration object shape for the filter
+* @typeParam Value  - Runtime value type for the filter
+* @param definition - Static description of the filter (components, defaults, validate)
+* @returns FilterFactory that creates FilterInstance<Config, Value>
+*/
+const createFilter = (definition) => {
+	return ({ name, icon, config: config$2 }) => {
+		return {
+			components: definition.components,
+			config: {
+				...definition.defaults.config,
+				...config$2 ?? {}
+			},
+			defaultValue: definition.defaults.value,
+			icon,
+			name,
+			validation: definition.validation
+		};
+	};
+};
+var createFilter_default = createFilter;
+
+//#endregion
+//#region src/Filter/filters/boolean/Display.tsx
+/**
+* Read-only presentation for the boolean filter.
+* Displays human-readable text based on the current boolean `value`
+* and the provided `config` strings.
+*/
+const Display$1 = ({ value, config: { text, textPrefix, textNoWord } }) => {
+	if (typeof value === "boolean") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: `${value ? textPrefix : `${textPrefix} ${textNoWord ?? "no"}`} ${text}` });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: `${text}...` });
+};
+var Display_default$1 = Display$1;
+
+//#endregion
+//#region src/Filter/filters/boolean/Form.tsx
+/**
+* Renders the form control for the boolean filter.
+* Uses a `Switch` to toggle the boolean value and composes
+* the label from the provided `config` and `fieldName`.
+*/
+const Form$1 = ({ fieldName, config: { text, textPrefix } }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__fuf_stack_uniform_Switch.default, {
+		label: `${textPrefix} ${text}`,
+		name: fieldName
+	});
+};
+var Form_default$1 = Form$1;
+
+//#endregion
+//#region src/Filter/filters/boolean/schema.ts
+/** configuration of the filter */
+const config$1 = (0, __fuf_stack_veto.object)({
+	text: (0, __fuf_stack_veto.string)(),
+	textPrefix: (0, __fuf_stack_veto.string)().optional(),
+	textNoWord: (0, __fuf_stack_veto.string)().optional()
+});
+/** validate the filter value */
+const validate$1 = (_config) => {
+	return (0, __fuf_stack_veto.boolean)().optional();
+};
+
+//#endregion
+//#region src/Filter/filters/boolean/boolean.ts
+/**
+* Boolean filter definition for the Filter system.
+* Provides Display and Form components, default value/config, and validation.
+*
+* Defaults:
+* - value: true
+* - config: { text: 'Active', textPrefix: 'is', textNoWord: 'no' }
+*
+* @see Display
+* @see Form
+* @see validate
+*/
+const boolean = createFilter_default({
+	components: {
+		Display: Display_default$1,
+		Form: Form_default$1
+	},
+	defaults: {
+		value: true,
+		config: {
+			text: "Active",
+			textPrefix: "is",
+			textNoWord: "no"
+		}
+	},
+	validation: validate$1
+});
+
+//#endregion
+//#region src/Filter/filters/checkboxes/Display.tsx
+/**
+* Read-only presentation for the checkboxes filter.
+* Resolves and displays selected option labels based on `value` and `config`.
+* Supports string, ReactNode, and function labels (mode: 'display').
+*/
+const Display = ({ value, config: { text, options } }) => {
+	if (value && value.length > 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "flex items-center gap-1",
+		children: [
+			text,
+			" is",
+			value.map((val) => {
+				const label = options.find((op) => {
+					return op.value === val;
+				})?.label ?? val;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: typeof label === "function" ? label("display") : label }, val);
+			})
+		]
+	});
+	return `${text} is ...`;
+};
+var Display_default = Display;
+
+//#endregion
+//#region src/Filter/filters/checkboxes/Form.tsx
+/**
+* Renders the form control for the checkboxes filter.
+* Uses a `Checkboxes` to select multiple options.
+* Resolves function labels with 'form' mode.
+*/
+const Form = ({ fieldName, config: config$2 }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__fuf_stack_uniform_Checkboxes.default, {
+		name: fieldName,
+		options: config$2.options.map((option) => {
+			return {
+				...option,
+				label: typeof option.label === "function" ? option.label("form") : option.label
+			};
+		})
+	});
+};
+var Form_default = Form;
+
+//#endregion
+//#region src/Filter/filters/checkboxes/schema.ts
+/** configuration of the filter */
+const config = (0, __fuf_stack_veto.object)({
+	text: (0, __fuf_stack_veto.string)(),
+	options: (0, __fuf_stack_veto.array)((0, __fuf_stack_veto.object)({
+		label: (0, __fuf_stack_veto.any)(),
+		value: (0, __fuf_stack_veto.string)()
+	}))
+});
+/** validate the filter value */
+const validate = (cfg) => {
+	return (0, __fuf_stack_veto.refineArray)((0, __fuf_stack_veto.array)((0, __fuf_stack_veto.string)()).optional())({
+		unique: true,
+		custom: (values, ctx) => {
+			if (!cfg) return;
+			values.forEach((value) => {
+				if (!cfg.options.find((option) => {
+					return option?.value === value;
+				})) ctx.addIssue({
+					code: "custom",
+					message: `Invalid value: ${value}`
+				});
+			});
+		}
+	});
+};
+
+//#endregion
+//#region src/Filter/filters/checkboxes/checkboxes.ts
+/**
+* Checkboxes filter definition for the Filter system.
+* Provides Display and Form components, default value/config, and validation.
+*
+* Defaults:
+* - value: []
+* - config: { text: 'Options', options: [] }
+*
+* @see Display
+* @see Form
+* @see validate
+*/
+const checkboxes = createFilter_default({
+	components: {
+		Display: Display_default,
+		Form: Form_default
+	},
+	defaults: {
+		value: [],
+		config: {
+			text: "Options",
+			options: []
+		}
+	},
+	validation: validate
+});
+
+//#endregion
+//#region src/Filter/index.ts
+const filters = {
+	boolean,
+	checkboxes
+};
+var Filter_default$1 = Filter_default;
+
+//#endregion
+Object.defineProperty(exports, 'Filter_default', {
+  enumerable: true,
+  get: function () {
+    return Filter_default$1;
+  }
+});
+Object.defineProperty(exports, 'createFilter_default', {
+  enumerable: true,
+  get: function () {
+    return createFilter_default;
+  }
+});
+Object.defineProperty(exports, 'filterVariants', {
+  enumerable: true,
+  get: function () {
+    return filterVariants;
+  }
+});
+Object.defineProperty(exports, 'filters', {
+  enumerable: true,
+  get: function () {
+    return filters;
+  }
+});
+//# sourceMappingURL=Filter-Bc0LWCnZ.cjs.map