@astra-kit/ui 0.0.0-stage → 0.0.0

package/dist/components/filter-query-bar.js

@@ -0,0 +1,881 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import * as React from "react";
+import { Calendar, Check, CircleDot, CircleMinus, CircleSlash, Folder, Hash, List, Type, User, X } from "lucide-react";
+import { ControlButton } from "./control-button.js";
+import { Input } from "./input.js";
+import { Popover, PopoverAnchor, PopoverContent } from "./primitives/popover.js";
+import { cn } from "../lib/utils.js";
+import { getActiveFilterToken, getValueHighlightRanges, normalizeFilterSlug, parseFilterQuery, PRESENCE_HAS_META_KEY, PRESENCE_NO_META_KEY, UNASSIGNED_FOLDER_FILTER_VALUE } from "./filter-query-grammar.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_PLACEHOLDER = "Filtrar por campo o palabra clave";
+const DEFAULT_ARIA_LABEL = "Filtrar gastos";
+const CLEAR_FILTER_ARIA_LABEL = "Limpiar todos los filtros";
+const KEY_GROUP_LABEL = "Campos";
+const VALUE_GROUP_LABEL = "Valores";
+const LISTBOX_ID = "filter-query-bar-listbox";
+const OPTION_ID_PREFIX = "filter-query-bar-option";
+const NUMBER_RANGE_VALUE_SUGGESTIONS = [
+	{
+		label: "Mayor o igual (≥)",
+		slug: ">="
+	},
+	{
+		label: "Menor o igual (≤)",
+		slug: "<="
+	},
+	{
+		label: "Rango (100..500)",
+		slug: ".."
+	}
+];
+/**
+* Operadores para qualifiers de fecha (mes-año). Reflejan los numéricos: cota
+* inferior (`>=`), cota superior (`<=`) y rango (`..`). La presencia/ausencia de
+* fecha se cubre con las meta-claves `tiene:`/`no:` del bloque universal.
+*/
+const YEAR_MONTH_VALUE_SUGGESTIONS = [
+	{
+		keepOpen: true,
+		label: "Desde (≥)",
+		slug: ">="
+	},
+	{
+		keepOpen: true,
+		label: "Hasta (≤)",
+		slug: "<="
+	},
+	{
+		keepOpen: true,
+		label: "Rango (2026-01..2026-06)",
+		slug: ".."
+	}
+];
+const TEXT_MATCH_VALUE_SUGGESTIONS = [
+	{
+		caretOffset: 0,
+		insertText: "*",
+		keepOpen: true,
+		label: "Empieza por…",
+		name: "starts",
+		slug: ""
+	},
+	{
+		caretOffset: 1,
+		insertText: "**",
+		keepOpen: true,
+		label: "Contiene…",
+		name: "contains",
+		slug: ""
+	},
+	{
+		insertText: "*",
+		keepOpen: true,
+		label: "Termina con…",
+		name: "ends",
+		slug: ""
+	}
+];
+/** Meta-claves de presencia ofrecidas también como campos de primer nivel. */
+const PRESENCE_META_KEY_SUGGESTIONS = [{
+	icon: Check,
+	key: PRESENCE_HAS_META_KEY,
+	label: "Tiene…"
+}, {
+	icon: CircleSlash,
+	key: PRESENCE_NO_META_KEY,
+	label: "No tiene…"
+}];
+/** Icono representativo de cada tipo de qualifier, mostrado a su izquierda. */
+function getKindIcon(kind) {
+	switch (kind) {
+		case "numberRange": return Hash;
+		case "textMatch": return Type;
+		case "enum": return List;
+		case "presence": return CircleDot;
+		case "yearMonthRange": return Calendar;
+		case "folder": return Folder;
+		default: return Type;
+	}
+}
+/** Iconos por nombre lógico declarado en el qualifier (`config.iconName`). */
+const ICON_BY_NAME = { user: User };
+/** Icono de un qualifier: override por `iconName`, o el icono por defecto del kind. */
+function getQualifierIcon(config) {
+	if (config.iconName && ICON_BY_NAME[config.iconName]) {
+		return ICON_BY_NAME[config.iconName];
+	}
+	return getKindIcon(config.kind);
+}
+function startsWithNormalized(candidate, prefix) {
+	if (!prefix) {
+		return true;
+	}
+	return normalizeFilterSlug(candidate).startsWith(normalizeFilterSlug(prefix));
+}
+/** Etiqueta de la opción raíz de exclusión (arranca un token `-campo:`). */
+const EXCLUDE_ROOT_LABEL = "Excluir";
+function buildKeySuggestions(configs, keyPart, { negated, includeExclude, appliedFilters }) {
+	const prefix = negated ? "-" : "";
+	const fieldSuggestions = configs.filter((config) => config.kind !== "text" && config.key).filter((config) => getAppliedPresenceValue(config, appliedFilters) !== "noValue").filter((config) => startsWithNormalized(config.key, keyPart) || startsWithNormalized(config.label, keyPart)).map((config) => ({
+		group: "key",
+		icon: getQualifierIcon(config),
+		id: `${OPTION_ID_PREFIX}-key-${negated ? "neg-" : ""}${config.key}`,
+		insertText: `${prefix}${config.key}:`,
+		keepOpen: true,
+		label: config.label
+	}));
+	const hasPresenceCapableFields = configs.some((config) => config.kind !== "text" && Boolean(config.key) && config.supportsPresence !== false);
+	const metaSuggestions = negated || !hasPresenceCapableFields ? [] : PRESENCE_META_KEY_SUGGESTIONS.filter((meta) => startsWithNormalized(meta.key, keyPart) || startsWithNormalized(meta.label, keyPart)).map((meta) => ({
+		group: "meta",
+		icon: meta.icon,
+		id: `${OPTION_ID_PREFIX}-key-${meta.key}`,
+		insertText: `${meta.key}:`,
+		keepOpen: true,
+		label: meta.label
+	}));
+	const excludeSuggestion = includeExclude ? [{
+		group: "meta",
+		icon: CircleMinus,
+		id: `${OPTION_ID_PREFIX}-exclude-root`,
+		insertText: "-",
+		keepOpen: true,
+		label: EXCLUDE_ROOT_LABEL
+	}] : [];
+	return [
+		...fieldSuggestions,
+		...metaSuggestions,
+		...excludeSuggestion
+	];
+}
+/**
+* Sugerencias de valor para una meta-clave de presencia (`tiene:` / `no:`): el
+* "valor" es la clave del campo destino (`tiene:enviados`, `no:carpeta`).
+*/
+function buildMetaValueSuggestions(configs, metaKey, valuePart, appliedFilters) {
+	return configs.filter((config) => config.kind !== "text" && config.key).filter((config) => config.supportsPresence !== false).filter((config) => !hasPresenceMetaFilterAlreadyApplied(config, appliedFilters)).filter((config) => startsWithNormalized(config.key, valuePart) || startsWithNormalized(config.label, valuePart)).map((config) => ({
+		group: "value",
+		icon: getQualifierIcon(config),
+		id: `${OPTION_ID_PREFIX}-meta-${metaKey}-${config.key}`,
+		insertText: `${config.key} `,
+		keepOpen: false,
+		label: config.label
+	}));
+}
+/**
+* Bloque universal que aparece al entrar a cualquier filtro: presencia
+* (`tiene:<clave>`), ausencia (`no:<clave>`) y exclusión de un valor
+* (`-<clave>:`). Reescriben el token completo, por eso usan `replaceTokenStart`.
+*/
+function buildPresenceAndExcludeSuggestions(config, appliedFilters) {
+	const appliedPresenceValue = getAppliedPresenceValue(config, appliedFilters);
+	const hasAppliedPresence = appliedPresenceValue != null;
+	const suggestions = hasAppliedPresence || config.supportsPresence === false ? [] : [{
+		group: "meta",
+		icon: CircleSlash,
+		id: `${OPTION_ID_PREFIX}-presence-no-${config.key}`,
+		insertText: `${PRESENCE_NO_META_KEY}:${config.key} `,
+		keepOpen: false,
+		label: `No tiene ${config.label}`,
+		replaceTokenStart: true
+	}, {
+		group: "meta",
+		icon: Check,
+		id: `${OPTION_ID_PREFIX}-presence-has-${config.key}`,
+		insertText: `${PRESENCE_HAS_META_KEY}:${config.key} `,
+		keepOpen: false,
+		label: `Tiene ${config.label}`,
+		replaceTokenStart: true
+	}];
+	if (config.kind !== "presence" && appliedPresenceValue !== "noValue") {
+		suggestions.push({
+			group: "meta",
+			icon: CircleMinus,
+			id: `${OPTION_ID_PREFIX}-exclude-${config.key}`,
+			insertText: `-${config.key}:`,
+			keepOpen: true,
+			label: `Excluir ${config.label}…`,
+			replaceTokenStart: true
+		});
+	}
+	return suggestions;
+}
+function getValueSuggestionSource(config) {
+	if (config.kind === "enum" || config.kind === "folder") {
+		return (config.options ?? []).map((option) => ({
+			label: option.label,
+			slug: option.slug,
+			value: option.value
+		}));
+	}
+	if (config.kind === "presence") {
+		return [];
+	}
+	if (config.kind === "yearMonthRange") {
+		return YEAR_MONTH_VALUE_SUGGESTIONS;
+	}
+	if (config.kind === "numberRange") {
+		return NUMBER_RANGE_VALUE_SUGGESTIONS;
+	}
+	if (config.kind === "textMatch") {
+		return TEXT_MATCH_VALUE_SUGGESTIONS;
+	}
+	return [];
+}
+function hasPresenceMetaFilterAlreadyApplied(config, appliedFilters) {
+	return appliedFilters.some((appliedFilter) => appliedFilter.key === config.key && !appliedFilter.negated && appliedFilter.value.kind === "presence");
+}
+function hasSelectableValueAlreadyApplied(config, option, appliedFilters) {
+	if (config.kind === "enum") {
+		return appliedFilters.some((appliedFilter) => appliedFilter.key === config.key && appliedFilter.value.kind === "enum" && appliedFilter.value.value === option.value);
+	}
+	if (config.kind === "folder") {
+		return appliedFilters.some((appliedFilter) => appliedFilter.key === config.key && appliedFilter.value.kind === "folder" && appliedFilter.value.folderId === option.value);
+	}
+	return false;
+}
+function getAppliedPresenceValue(config, appliedFilters) {
+	const presenceFilter = appliedFilters.find((appliedFilter) => appliedFilter.key === config.key && !appliedFilter.negated && appliedFilter.value.kind === "presence");
+	return presenceFilter?.value.kind === "presence" ? presenceFilter.value.value : null;
+}
+function isSelectableValueCompatibleWithPresence(config, option, appliedFilters) {
+	const presenceValue = getAppliedPresenceValue(config, appliedFilters);
+	if (presenceValue === "noValue") {
+		return false;
+	}
+	if (config.kind !== "folder") {
+		return true;
+	}
+	if (presenceValue === "hasValue") {
+		return option.value !== UNASSIGNED_FOLDER_FILTER_VALUE;
+	}
+	return true;
+}
+function buildValueSuggestions(config, valuePart, negated, appliedFilters) {
+	const defaultKeepOpen = config.kind === "numberRange";
+	const sourceOptions = config.kind === "textMatch" && valuePart !== "" ? [] : getValueSuggestionSource(config);
+	const filterValuePart = config.kind === "enum" || config.kind === "folder" ? valuePart.replace(/^@/, "") : valuePart;
+	const valueSuggestions = sourceOptions.filter((option) => !hasSelectableValueAlreadyApplied(config, option, appliedFilters) && isSelectableValueCompatibleWithPresence(config, option, appliedFilters)).filter((option) => startsWithNormalized(option.slug, filterValuePart)).map((option) => {
+		const keepOpen = option.keepOpen ?? defaultKeepOpen;
+		const insertText = option.insertText ?? (keepOpen ? option.slug : `${option.slug} `);
+		return {
+			caretOffset: option.caretOffset,
+			group: "value",
+			icon: getQualifierIcon(config),
+			id: `${OPTION_ID_PREFIX}-value-${config.key}-${option.name ?? option.slug}`,
+			insertText,
+			keepOpen,
+			label: option.label
+		};
+	});
+	if (negated || valuePart.length > 0) {
+		return valueSuggestions;
+	}
+	return [...buildPresenceAndExcludeSuggestions(config, appliedFilters), ...valueSuggestions];
+}
+function resolveConfigByKey(configs, rawKey) {
+	const normalized = normalizeFilterSlug(rawKey);
+	return configs.find((config) => {
+		if (config.kind === "text" || !config.key) {
+			return false;
+		}
+		if (normalizeFilterSlug(config.key) === normalized) {
+			return true;
+		}
+		return (config.aliases ?? []).some((alias) => normalizeFilterSlug(alias) === normalized);
+	});
+}
+/**
+* Parte la query en nodos para el overlay de resaltado: los rangos de valores
+* válidos se pintan con color de acento; el resto queda con el color normal.
+*/
+function renderHighlightedQuery(value, ranges) {
+	if (ranges.length === 0) {
+		return value;
+	}
+	const nodes = [];
+	let cursor = 0;
+	ranges.forEach((range, index) => {
+		if (range.start > cursor) {
+			nodes.push(value.slice(cursor, range.start));
+		}
+		nodes.push(/* @__PURE__ */ _jsx("span", {
+			className: "text-primary",
+			children: value.slice(range.start, range.end)
+		}, `highlight-${index}`));
+		cursor = range.end;
+	});
+	if (cursor < value.length) {
+		nodes.push(value.slice(cursor));
+	}
+	return nodes;
+}
+/**
+* Barra de filtro estilo GitHub Issues: input único con autocompletado de
+* `clave:valor`. Sugiere primero los campos disponibles y luego los valores de
+* cada campo, con navegación por teclado y semántica ARIA de combobox/listbox.
+* La navegación es virtual: el foco real nunca abandona el input.
+*/
+export function FilterQueryBar(t0) {
+	const $ = _c(98);
+	const { configs, value, onValueChange, placeholder: t1, ariaLabel: t2, className, onFocusChange, trailingAction } = t0;
+	const placeholder = t1 === undefined ? DEFAULT_PLACEHOLDER : t1;
+	const ariaLabel = t2 === undefined ? DEFAULT_ARIA_LABEL : t2;
+	const instanceId = React.useId();
+	const listboxId = `${instanceId}-${LISTBOX_ID}`;
+	const inputRef = React.useRef(null);
+	const highlightOverlayRef = React.useRef(null);
+	const pendingCaretRef = React.useRef(null);
+	const [caretIndex, setCaretIndex] = React.useState(0);
+	const [isOpen, setIsOpen] = React.useState(false);
+	const [activeIndex, setActiveIndex] = React.useState(0);
+	const [hasNavigatedSuggestions, setHasNavigatedSuggestions] = React.useState(false);
+	let t3;
+	if ($[0] !== caretIndex || $[1] !== configs || $[2] !== value) {
+		bb0: {
+			const activeToken = getActiveFilterToken(value, caretIndex);
+			const appliedFilters = parseFilterQuery(value, configs).appliedFilters;
+			if (activeToken.mode === "key") {
+				t3 = buildKeySuggestions(configs, activeToken.keyPart, {
+					appliedFilters,
+					includeExclude: !activeToken.negated && activeToken.keyPart === "",
+					negated: activeToken.negated
+				});
+				break bb0;
+			}
+			const normalizedResolvedKey = normalizeFilterSlug(activeToken.resolvedKey ?? "");
+			if (normalizedResolvedKey === PRESENCE_HAS_META_KEY || normalizedResolvedKey === PRESENCE_NO_META_KEY) {
+				t3 = buildMetaValueSuggestions(configs, normalizedResolvedKey, activeToken.valuePart, appliedFilters);
+				break bb0;
+			}
+			const config = resolveConfigByKey(configs, activeToken.resolvedKey ?? "");
+			if (!config) {
+				let t4;
+				if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+					t4 = [];
+					$[4] = t4;
+				} else {
+					t4 = $[4];
+				}
+				t3 = t4;
+				break bb0;
+			}
+			t3 = buildValueSuggestions(config, activeToken.valuePart, activeToken.negated, appliedFilters);
+		}
+		$[0] = caretIndex;
+		$[1] = configs;
+		$[2] = value;
+		$[3] = t3;
+	} else {
+		t3 = $[3];
+	}
+	const suggestions = t3;
+	let t4;
+	if ($[5] !== configs || $[6] !== value) {
+		t4 = parseFilterQuery(value, configs);
+		$[5] = configs;
+		$[6] = value;
+		$[7] = t4;
+	} else {
+		t4 = $[7];
+	}
+	const invalidTokenCount = t4.invalidTokens.length;
+	let t5;
+	if ($[8] !== configs || $[9] !== value) {
+		t5 = getValueHighlightRanges(value, configs);
+		$[8] = configs;
+		$[9] = value;
+		$[10] = t5;
+	} else {
+		t5 = $[10];
+	}
+	const highlightRanges = t5;
+	let t6;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = () => {
+			if (highlightOverlayRef.current && inputRef.current) {
+				highlightOverlayRef.current.scrollLeft = inputRef.current.scrollLeft;
+			}
+		};
+		$[11] = t6;
+	} else {
+		t6 = $[11];
+	}
+	const syncOverlayScroll = t6;
+	let t7;
+	if ($[12] !== suggestions.length) {
+		t7 = () => {
+			setActiveIndex((previousIndex) => previousIndex < suggestions.length ? previousIndex : 0);
+		};
+		$[12] = suggestions.length;
+		$[13] = t7;
+	} else {
+		t7 = $[13];
+	}
+	let t8;
+	if ($[14] !== suggestions) {
+		t8 = [suggestions];
+		$[14] = suggestions;
+		$[15] = t8;
+	} else {
+		t8 = $[15];
+	}
+	React.useEffect(t7, t8);
+	let t9;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = () => {
+			const pendingCaret = pendingCaretRef.current;
+			if (pendingCaret == null || !inputRef.current) {
+				return;
+			}
+			inputRef.current.setSelectionRange(pendingCaret, pendingCaret);
+			setCaretIndex(pendingCaret);
+			pendingCaretRef.current = null;
+		};
+		$[16] = t9;
+	} else {
+		t9 = $[16];
+	}
+	let t10;
+	if ($[17] !== value) {
+		t10 = [value];
+		$[17] = value;
+		$[18] = t10;
+	} else {
+		t10 = $[18];
+	}
+	React.useLayoutEffect(t9, t10);
+	let t11;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = () => {
+			syncOverlayScroll();
+		};
+		$[19] = t11;
+	} else {
+		t11 = $[19];
+	}
+	let t12;
+	if ($[20] !== value) {
+		t12 = [syncOverlayScroll, value];
+		$[20] = value;
+		$[21] = t12;
+	} else {
+		t12 = $[21];
+	}
+	React.useLayoutEffect(t11, t12);
+	const isPopoverOpen = isOpen && suggestions.length > 0;
+	const activeSuggestion = isPopoverOpen ? suggestions[activeIndex] : undefined;
+	let t13;
+	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = () => {
+			if (inputRef.current) {
+				setCaretIndex(inputRef.current.selectionStart ?? 0);
+			}
+		};
+		$[22] = t13;
+	} else {
+		t13 = $[22];
+	}
+	const syncCaretFromInput = t13;
+	let t14;
+	if ($[23] !== caretIndex || $[24] !== onValueChange || $[25] !== value) {
+		t14 = (suggestion) => {
+			const activeToken_0 = getActiveFilterToken(value, inputRef.current?.selectionStart ?? caretIndex);
+			const replaceStart = suggestion.replaceTokenStart ? activeToken_0.tokenStart : activeToken_0.replaceStart;
+			const before = value.slice(0, replaceStart);
+			const after = value.slice(activeToken_0.replaceEnd);
+			const nextValue = before + suggestion.insertText + after;
+			pendingCaretRef.current = before.length + (suggestion.caretOffset ?? suggestion.insertText.length);
+			onValueChange(nextValue);
+			setIsOpen(true);
+			setActiveIndex(0);
+			setHasNavigatedSuggestions(false);
+			if (!suggestion.keepOpen) {
+				setIsOpen(false);
+			}
+		};
+		$[23] = caretIndex;
+		$[24] = onValueChange;
+		$[25] = value;
+		$[26] = t14;
+	} else {
+		t14 = $[26];
+	}
+	const applySuggestion = t14;
+	let t15;
+	if ($[27] !== activeSuggestion || $[28] !== applySuggestion || $[29] !== hasNavigatedSuggestions || $[30] !== isPopoverOpen || $[31] !== suggestions.length) {
+		t15 = (event) => {
+			if (event.key === "ArrowDown") {
+				event.preventDefault();
+				setHasNavigatedSuggestions(true);
+				if (!isPopoverOpen) {
+					setIsOpen(true);
+					return;
+				}
+				setActiveIndex((previousIndex_0) => suggestions.length === 0 ? 0 : (previousIndex_0 + 1) % suggestions.length);
+				return;
+			}
+			if (event.key === "ArrowUp") {
+				event.preventDefault();
+				setHasNavigatedSuggestions(true);
+				if (!isPopoverOpen) {
+					setIsOpen(true);
+					return;
+				}
+				setActiveIndex((previousIndex_1) => suggestions.length === 0 ? 0 : (previousIndex_1 - 1 + suggestions.length) % suggestions.length);
+				return;
+			}
+			if (event.key === "Enter" && activeSuggestion) {
+				event.preventDefault();
+				applySuggestion(activeSuggestion);
+				return;
+			}
+			if (event.key === "Tab" && hasNavigatedSuggestions && activeSuggestion) {
+				event.preventDefault();
+				applySuggestion(activeSuggestion);
+				return;
+			}
+			if (event.key === "Escape" && isPopoverOpen) {
+				event.preventDefault();
+				event.stopPropagation();
+				setIsOpen(false);
+			}
+		};
+		$[27] = activeSuggestion;
+		$[28] = applySuggestion;
+		$[29] = hasNavigatedSuggestions;
+		$[30] = isPopoverOpen;
+		$[31] = suggestions.length;
+		$[32] = t15;
+	} else {
+		t15 = $[32];
+	}
+	const handleKeyDown = t15;
+	let t16;
+	if ($[33] !== onValueChange) {
+		t16 = () => {
+			onValueChange("");
+			pendingCaretRef.current = 0;
+			setIsOpen(false);
+			inputRef.current?.focus();
+		};
+		$[33] = onValueChange;
+		$[34] = t16;
+	} else {
+		t16 = $[34];
+	}
+	const handleClear = t16;
+	let t17;
+	if ($[35] !== className) {
+		t17 = cn("grid w-full gap-2", className);
+		$[35] = className;
+		$[36] = t17;
+	} else {
+		t17 = $[36];
+	}
+	const t18 = activeSuggestion ? `${instanceId}-${activeSuggestion.id}` : undefined;
+	const t19 = trailingAction ? "pr-16" : "pr-9";
+	let t20;
+	if ($[37] !== t19) {
+		t20 = cn("w-full text-transparent", t19);
+		$[37] = t19;
+		$[38] = t20;
+	} else {
+		t20 = $[38];
+	}
+	let t21;
+	if ($[39] !== onValueChange) {
+		t21 = (event_0) => {
+			onValueChange(event_0.target.value);
+			setIsOpen(true);
+			setActiveIndex(0);
+			setHasNavigatedSuggestions(false);
+			setCaretIndex(event_0.target.selectionStart ?? event_0.target.value.length);
+		};
+		$[39] = onValueChange;
+		$[40] = t21;
+	} else {
+		t21 = $[40];
+	}
+	let t22;
+	let t23;
+	if ($[41] !== onFocusChange) {
+		t22 = () => {
+			setHasNavigatedSuggestions(false);
+			onFocusChange?.(false);
+		};
+		t23 = () => {
+			syncCaretFromInput();
+			setIsOpen(true);
+			onFocusChange?.(true);
+		};
+		$[41] = onFocusChange;
+		$[42] = t22;
+		$[43] = t23;
+	} else {
+		t22 = $[42];
+		t23 = $[43];
+	}
+	let t24;
+	if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
+		t24 = { caretColor: "var(--foreground)" };
+		$[44] = t24;
+	} else {
+		t24 = $[44];
+	}
+	let t25;
+	if ($[45] !== ariaLabel || $[46] !== handleKeyDown || $[47] !== isPopoverOpen || $[48] !== listboxId || $[49] !== placeholder || $[50] !== t18 || $[51] !== t20 || $[52] !== t21 || $[53] !== t22 || $[54] !== t23 || $[55] !== value) {
+		t25 = /* @__PURE__ */ _jsx(Input, {
+			"aria-activedescendant": t18,
+			"aria-autocomplete": "list",
+			"aria-controls": listboxId,
+			"aria-expanded": isPopoverOpen,
+			"aria-label": ariaLabel,
+			autoComplete: "off",
+			className: t20,
+			onChange: t21,
+			onClick: syncCaretFromInput,
+			onBlur: t22,
+			onFocus: t23,
+			onKeyDown: handleKeyDown,
+			onKeyUp: syncCaretFromInput,
+			onScroll: syncOverlayScroll,
+			placeholder,
+			ref: inputRef,
+			role: "combobox",
+			style: t24,
+			type: "text",
+			value
+		});
+		$[45] = ariaLabel;
+		$[46] = handleKeyDown;
+		$[47] = isPopoverOpen;
+		$[48] = listboxId;
+		$[49] = placeholder;
+		$[50] = t18;
+		$[51] = t20;
+		$[52] = t21;
+		$[53] = t22;
+		$[54] = t23;
+		$[55] = value;
+		$[56] = t25;
+	} else {
+		t25 = $[56];
+	}
+	const t26 = trailingAction ? "pr-16" : "pr-9";
+	let t27;
+	if ($[57] !== t26) {
+		t27 = cn("pointer-events-none absolute inset-0 flex items-center overflow-hidden rounded-lg border border-transparent px-2.5 text-base text-foreground select-none md:text-sm", t26);
+		$[57] = t26;
+		$[58] = t27;
+	} else {
+		t27 = $[58];
+	}
+	let t28;
+	if ($[59] !== highlightRanges || $[60] !== value) {
+		t28 = renderHighlightedQuery(value, highlightRanges);
+		$[59] = highlightRanges;
+		$[60] = value;
+		$[61] = t28;
+	} else {
+		t28 = $[61];
+	}
+	let t29;
+	if ($[62] !== t28) {
+		t29 = /* @__PURE__ */ _jsx("span", {
+			className: "whitespace-pre",
+			children: t28
+		});
+		$[62] = t28;
+		$[63] = t29;
+	} else {
+		t29 = $[63];
+	}
+	let t30;
+	if ($[64] !== t27 || $[65] !== t29) {
+		t30 = /* @__PURE__ */ _jsx("div", {
+			"aria-hidden": "true",
+			className: t27,
+			ref: highlightOverlayRef,
+			children: t29
+		});
+		$[64] = t27;
+		$[65] = t29;
+		$[66] = t30;
+	} else {
+		t30 = $[66];
+	}
+	let t31;
+	if ($[67] !== handleClear || $[68] !== value) {
+		t31 = value ? /* @__PURE__ */ _jsx(ControlButton, {
+			"aria-label": CLEAR_FILTER_ARIA_LABEL,
+			className: "active:-translate-y-0",
+			onClick: handleClear,
+			size: "icon-xs",
+			type: "button",
+			variant: "ghost",
+			children: /* @__PURE__ */ _jsx(X, { "aria-hidden": "true" })
+		}) : null;
+		$[67] = handleClear;
+		$[68] = value;
+		$[69] = t31;
+	} else {
+		t31 = $[69];
+	}
+	let t32;
+	if ($[70] !== t31 || $[71] !== trailingAction) {
+		t32 = /* @__PURE__ */ _jsxs("div", {
+			className: "absolute right-1 top-1/2 flex -translate-y-1/2 items-center gap-0.5",
+			children: [t31, trailingAction]
+		});
+		$[70] = t31;
+		$[71] = trailingAction;
+		$[72] = t32;
+	} else {
+		t32 = $[72];
+	}
+	let t33;
+	if ($[73] !== t25 || $[74] !== t30 || $[75] !== t32) {
+		t33 = /* @__PURE__ */ _jsx(PopoverAnchor, {
+			asChild: true,
+			children: /* @__PURE__ */ _jsxs("div", {
+				className: "relative w-full",
+				children: [
+					t25,
+					t30,
+					t32
+				]
+			})
+		});
+		$[73] = t25;
+		$[74] = t30;
+		$[75] = t32;
+		$[76] = t33;
+	} else {
+		t33 = $[76];
+	}
+	let t34;
+	if ($[77] === Symbol.for("react.memo_cache_sentinel")) {
+		t34 = (event_2) => {
+			if (event_2.target === inputRef.current) {
+				event_2.preventDefault();
+			}
+		};
+		$[77] = t34;
+	} else {
+		t34 = $[77];
+	}
+	const t35 = suggestions.some(_temp3) ? VALUE_GROUP_LABEL : KEY_GROUP_LABEL;
+	let t36;
+	if ($[78] !== activeIndex || $[79] !== applySuggestion || $[80] !== instanceId || $[81] !== suggestions) {
+		t36 = suggestions.map((suggestion_1, index) => {
+			const SuggestionIcon = suggestion_1.icon;
+			const showSeparator = index > 0 && suggestions[index - 1].group !== suggestion_1.group;
+			return /* @__PURE__ */ _jsxs(React.Fragment, { children: [showSeparator ? /* @__PURE__ */ _jsx("li", {
+				"aria-hidden": "true",
+				className: "my-1 border-t border-border",
+				role: "presentation"
+			}) : null, /* @__PURE__ */ _jsxs("li", {
+				"aria-selected": index === activeIndex,
+				className: cn("flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm", index === activeIndex ? "bg-accent text-accent-foreground" : "text-foreground"),
+				id: `${instanceId}-${suggestion_1.id}`,
+				onPointerMove: () => setActiveIndex(index),
+				onMouseDown: (event_4) => {
+					event_4.preventDefault();
+					applySuggestion(suggestion_1);
+				},
+				role: "option",
+				children: [/* @__PURE__ */ _jsx(SuggestionIcon, {
+					"aria-hidden": "true",
+					className: "size-4 shrink-0 text-muted-foreground"
+				}), /* @__PURE__ */ _jsx("span", {
+					className: "truncate",
+					children: suggestion_1.label
+				})]
+			})] }, suggestion_1.id);
+		});
+		$[78] = activeIndex;
+		$[79] = applySuggestion;
+		$[80] = instanceId;
+		$[81] = suggestions;
+		$[82] = t36;
+	} else {
+		t36 = $[82];
+	}
+	let t37;
+	if ($[83] !== listboxId || $[84] !== t35 || $[85] !== t36) {
+		t37 = /* @__PURE__ */ _jsx(PopoverContent, {
+			align: "start",
+			className: "w-[250px] max-h-[280px] gap-0 overflow-y-auto p-1",
+			onCloseAutoFocus: _temp,
+			onInteractOutside: t34,
+			onOpenAutoFocus: _temp2,
+			children: /* @__PURE__ */ _jsx("ul", {
+				"aria-label": t35,
+				className: "grid gap-0.5",
+				"data-slot": "filter-query-bar-suggestions",
+				id: listboxId,
+				role: "listbox",
+				children: t36
+			})
+		});
+		$[83] = listboxId;
+		$[84] = t35;
+		$[85] = t36;
+		$[86] = t37;
+	} else {
+		t37 = $[86];
+	}
+	let t38;
+	if ($[87] !== isPopoverOpen || $[88] !== t33 || $[89] !== t37) {
+		t38 = /* @__PURE__ */ _jsxs(Popover, {
+			onOpenChange: setIsOpen,
+			open: isPopoverOpen,
+			children: [t33, t37]
+		});
+		$[87] = isPopoverOpen;
+		$[88] = t33;
+		$[89] = t37;
+		$[90] = t38;
+	} else {
+		t38 = $[90];
+	}
+	const t39 = isPopoverOpen ? `${suggestions.length} sugerencias disponibles` : "";
+	const t40 = invalidTokenCount > 0 ? ` ${invalidTokenCount} filtros no aplicados` : "";
+	let t41;
+	if ($[91] !== t39 || $[92] !== t40) {
+		t41 = /* @__PURE__ */ _jsxs("span", {
+			"aria-live": "polite",
+			className: "sr-only",
+			children: [t39, t40]
+		});
+		$[91] = t39;
+		$[92] = t40;
+		$[93] = t41;
+	} else {
+		t41 = $[93];
+	}
+	let t42;
+	if ($[94] !== t17 || $[95] !== t38 || $[96] !== t41) {
+		t42 = /* @__PURE__ */ _jsxs("div", {
+			className: t17,
+			children: [t38, t41]
+		});
+		$[94] = t17;
+		$[95] = t38;
+		$[96] = t41;
+		$[97] = t42;
+	} else {
+		t42 = $[97];
+	}
+	return t42;
+}
+function _temp3(suggestion_0) {
+	return suggestion_0.group === "value";
+}
+function _temp2(event_3) {
+	return event_3.preventDefault();
+}
+function _temp(event_1) {
+	return event_1.preventDefault();
+}