beez-ui 0.8.2 → 0.9.0

package/CHANGELOG.md

@@ -4,6 +4,26 @@ Todos los cambios relevantes de beez-ui se documentan en este archivo con el for
 
 ## [Unreleased]
 
+## [0.9.0] - 2026-09-27
+
+### Added
+
+- `ReactionButton` acepta `activeColor` para elegir el color del ícono activo (por defecto, el color destructivo).
+- Entrypoint `beez-ui/hooks` con los hooks de uso general: `useIsMobile`, `useIsHydrated`, `useViewerTimeZone`, `usePrefersReducedMotion`, `useHorizontalSwipe` y `resolveHorizontalSwipe`.
+- `FilterPresetsBar` y `FilterPresetSaveButton` para guardar, aplicar, editar y borrar consultas con nombre de `FilterQueryBar`, con `parseFilterPresets` para validar las que la app restaura de su almacenamiento.
+
+### Changed
+
+- `useIsHydrated`, `useViewerTimeZone`, `usePrefersReducedMotion`, `useHorizontalSwipe`, `resolveHorizontalSwipe` y `HORIZONTAL_SWIPE_DIRECTION` se importan desde `beez-ui/hooks` en lugar de la raíz; `useIsMobile` sigue también en la raíz.
+
+### Removed
+
+- Se retiran `EmptyState`, `ErrorState`, `BouncingDotsLoader` e `InfoPopover`: son envoltorios simples que cada app mantiene con su propio diseño.
+- `getNameInitials` deja de ser público.
+- Se retiran componentes atados a un solo producto que llegaron en 0.8.0: `ExternalBrowserHandoff`, `OpenInBrowserCta`, `detectInAppBrowser`, `buildExternalBrowserUrl`, `NotificationBell`, `NotificationPanel`, `MonthGrid`, `MonthCalendarHeader`, `PwaUpdateControl` y `ConfirmDeleteButton`. Quien los use debe mantener su propia versión.
+- Se retiran los helpers `createMonthGridDays`, `splitCalendarWeeks`, `groupItemsByDateKey`, `shiftMonthKey`, `useMonthTransitionDirection`, `useMinuteClock`, `advanceMinuteClockTo`, `navigateToUrl`, `reloadCurrentPage`, `replaceCurrentUrlSearchParams` y `replaceCurrentUrlSearchParamValues`.
+- Se retira el entrypoint opcional `beez-ui/emoji-picker` y la dependencia opcional `emoji-picker-react`.
+
 ## [0.8.2] - 2026-09-27
 
 ### Fixed

package/README.md

@@ -173,19 +173,21 @@ Los componentes compartidos conservan el tema de LaTribu. Se incorporaron atribu
 
 ## Componentes de producto reutilizables
 
-Provienen de las carpetas de producto de LaTribu y agenda-mensual y quedaron desacoplados de su dominio: reciben datos ya resueltos y textos por props, con valores por defecto en español.
+Provienen de las carpetas de producto de LaTribu y agenda-mensual y quedaron desacoplados de su dominio: reciben datos ya resueltos y textos por props, con valores por defecto en español. Solo se incorporan piezas genéricas que no fijan decisiones de un producto y que no son una composición trivial de primitivas existentes; los flujos propios de una app (notificaciones, calendarios de eventos, handoff de navegadores internos, actualización de PWA) y los envoltorios simples (estados vacío y de error, loaders, popovers de ayuda) se mantienen en esa app.
 
 - Movimiento: `PresenceSwap`, `AnimatedCount`, `AnimatedCollapse` y `AnimatedListItem`. Los tokens que usa la biblioteca se exportan desde la raíz y desde `beez-ui/motion-tokens`, así las apps animan sus superficies con las mismas curvas y springs en lugar de copiarlos.
-- Feedback: `BouncingDotsLoader`, `ProgressRing`, `EmptyState`, `ErrorState`, `InfoPopover`, `ConfirmDeleteButton` y `ReactionButton`. El loader y la entrada del título de `MonthCalendarHeader` usan keyframes CSS porque se renderizan en el servidor; el fallback de movimiento reducido los detiene.
-- Cuenta y sesión: `AccountMenu` (inicio de sesión mediante `signInHref` o `onSignIn`), `OpenInBrowserCta`, `ExternalBrowserHandoff` y los helpers `detectInAppBrowser` y `buildExternalBrowserUrl`.
+- Indicadores: `ProgressRing` y `ReactionButton`. El color del ícono activo de la reacción se configura con `activeColor`.
+- Cuenta: `AccountMenu`, con inicio de sesión mediante `signInHref` o `onSignIn`.
 - Contenido: `RichTextContent`, `RichMarkdownContent`, `RichLinkEditor` y `useRichLinkEditor`. Solo interpretan links en markdown, URLs sueltas, listas y negrita; el HTML del contenido nunca se renderiza como markup.
-- Notificaciones: `NotificationBell` y `NotificationPanel` reciben `NotificationPanelItem` (`id`, `title`, `detail`, `sentAtLabel`, `href`, `isUnread`); la app traduce sus notificaciones a ese formato. Con `surface="responsive"` se renderizan el popover y el sheet hasta hidratar, y después solo el que corresponde al viewport.
-- Calendario: `MonthGrid` y `MonthCalendarHeader` trabajan con claves `YYYY-MM` y `YYYY-MM-DD` sin zona horaria; la app decide en qué zona convierte cada instante en día. La navegación acepta `href` (link del router) o `onSelect`.
+- Filtros guardados: `FilterPresetsBar` y `FilterPresetSaveButton` guardan, aplican, editan y borran consultas con nombre de `FilterQueryBar`. La app decide dónde persistirlas; `parseFilterPresets` valida lo que vuelve del almacenamiento.
 - Archivos: `FileUpload`, `FileUploadDropZone`, `FileUploadList` y `FileUploadItem` validan tipo y tamaño, pero no suben archivos: el progreso y los errores los informa la app.
-- PWA: `PwaUpdateControl` aparece solo cuando hay un service worker en espera y le envía `{ type: "SKIP_WAITING" }` (configurable con `skipWaitingMessage`).
-- Hooks y utilidades: `useIsHydrated`, `useMinuteClock`, `useViewerTimeZone`, `useHorizontalSwipe`, `usePrefersReducedMotion`, `formatFileSize`, `copyTextToClipboard`, `getNameInitials`, búsqueda difusa y helpers de URL.
+- Utilidades: `formatFileSize`, `copyTextToClipboard` y búsqueda difusa.
 
-`EmojiPicker` vive en el entrypoint opcional `beez-ui/emoji-picker` para no sumar `emoji-picker-react` a quien no lo usa. Hay que instalarlo como dependencia de la app (`pnpm add emoji-picker-react`); la librería se carga recién al abrir el selector, nunca durante el render del servidor.
+Los hooks de uso general se importan desde `beez-ui/hooks`: `useIsMobile`, `useIsHydrated`, `useViewerTimeZone`, `usePrefersReducedMotion` y `useHorizontalSwipe` (con `resolveHorizontalSwipe`). `useIsMobile` también sigue disponible desde la raíz.
+
+```tsx
+import { useIsHydrated } from "beez-ui/hooks";
+```
 
 ## React Compiler
 
@@ -222,7 +224,7 @@ pnpm release:prepare
 
 `pnpm build` genera las declaraciones con TypeScript 7, JavaScript con Oxc/React Compiler y CSS con el CLI de Tailwind. `pnpm check` ejecuta ESLint 10, los typechecks separados de código y tests con TypeScript 7, y Vitest 5. `tests/tsconfig.json` incorpora los matchers de Testing Library y los tipos de Vite sin incluirlos en el código de producción. `test:browser` verifica una app React/Vite nativa y una app Next real en Chromium y WebKit, tanto en desktop como en móvil. Los tests unitarios importan los archivos compilados. Los consumidores de navegador no instalan plugins de Tailwind, y una prueba adicional sirve el tarball por HTTP sin procesadores CSS para verificar estilos computados y carga de fuentes. Una prueba adicional instala el tarball en un consumidor aislado sin Next y verifica render, filtrado y declaraciones públicas.
 
-Los tests resuelven `beez-ui`, `beez-ui/next`, `beez-ui/tanstack` y `beez-ui/emoji-picker` mediante rutas explícitas a las declaraciones compiladas en `tests/tsconfig.json`. Ejecutar `pnpm build` después de clonar o si falta `dist`; los comandos de validación completos ya lo hacen. Si el editor conserva diagnósticos anteriores después del build, reiniciar su servidor de TypeScript.
+Los tests resuelven `beez-ui`, `beez-ui/next`, `beez-ui/tanstack` y `beez-ui/hooks` mediante rutas explícitas a las declaraciones compiladas en `tests/tsconfig.json`. Ejecutar `pnpm build` después de clonar o si falta `dist`; los comandos de validación completos ya lo hacen. Si el editor conserva diagnósticos anteriores después del build, reiniciar su servidor de TypeScript.
 
 El compilador `tsc` es TypeScript 7. Para `typescript-eslint`, se mantiene la [API de compatibilidad oficial de TypeScript 6](https://devblogs.microsoft.com/typescript/announcing-typescript-7-0/#running-side-by-side-with-typescript-6.0) mediante un alias; no reemplaza el compilador de los typechecks.
 

package/dist/components/filter-presets-bar.d.ts

@@ -0,0 +1,71 @@
+import type { FilterQualifierConfig } from "./filter-query-grammar.js";
+/** A named, reusable query of the filter bar. */
+export interface FilterPreset {
+    name: string;
+    query: string;
+}
+/**
+ * Validates presets restored from untrusted storage, trimming names and queries and dropping
+ * malformed or empty entries.
+ * @param value - Parsed stored value, such as the result of `JSON.parse`.
+ * @returns The valid presets, or an empty list when the value is not a list.
+ */
+export declare function parseFilterPresets(value: unknown): FilterPreset[];
+export interface FilterPresetLabels {
+    saveAction: string;
+    saveConfirm: string;
+    saveConfirmAriaLabel: string;
+    presetName: string;
+    presetNamePlaceholder: string;
+    presetQuery: string;
+    presetQueryPlaceholder: string;
+    savedPresets: string;
+    editConfirmAriaLabel: string;
+    cancel: string;
+    delete: string;
+    emptyNameError: string;
+    emptyCurrentQueryError: string;
+    emptyPresetQueryError: string;
+    duplicateNameError: string;
+    applyPresetAriaLabel: (presetName: string) => string;
+    editPresetAriaLabel: (presetName: string) => string;
+    deletePresetAriaLabel: (presetName: string) => string;
+    deleteConfirmation: (presetName: string) => string;
+}
+export declare const FILTER_PRESET_DEFAULT_LABELS: FilterPresetLabels;
+export interface FilterPresetSaveButtonProps {
+    /** Whether the filter bar currently has a query worth saving. */
+    canSaveCurrentQuery: boolean;
+    /** Saves the current query under the given name. Returns `false` when there is no query to save. */
+    onSaveCurrentQuery: (presetName: string) => boolean;
+    labels?: Partial<FilterPresetLabels>;
+}
+/**
+ * Compact icon button that saves the current query as a named preset. Fits the action slot of
+ * the filter bar input.
+ * @param props - Save availability, save callback and optional labels.
+ * @returns The button and its naming popover.
+ */
+export declare function FilterPresetSaveButton({ canSaveCurrentQuery, onSaveCurrentQuery, labels }: FilterPresetSaveButtonProps): import("react").JSX.Element;
+export interface FilterPresetsBarProps {
+    presets: readonly FilterPreset[];
+    /** Qualifiers of the filter bar, offered as suggestions while editing a preset query. */
+    queryFilterConfigs: FilterQualifierConfig[];
+    onApplyPreset: (preset: FilterPreset) => void;
+    onDeletePreset: (presetName: string) => void;
+    /** Replaces the preset named `originalName` with the given name and query. */
+    onUpdatePreset: (update: {
+        name: string;
+        originalName: string;
+        query: string;
+    }) => void;
+    labels?: Partial<FilterPresetLabels>;
+    className?: string;
+}
+/**
+ * Renders one chip per saved preset: its name applies it, the pencil edits its name and query,
+ * and the cross deletes it after a confirmation. Renders nothing without presets.
+ * @param props - Presets, filter configs, callbacks and optional labels.
+ * @returns The presets row, or nothing.
+ */
+export declare function FilterPresetsBar({ presets, queryFilterConfigs, onApplyPreset, onDeletePreset, onUpdatePreset, labels, className, }: FilterPresetsBarProps): import("react").JSX.Element | null;

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

@@ -0,0 +1,508 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Saved queries for `FilterQueryBar`: a button that stores the current query under a name and a
+* row of chips to apply, edit or delete them. Persistence stays with the application.
+*/
+import { useId, useState } from "react";
+import { Bookmark, Pencil, X } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { FilterQueryBar } from "./filter-query-bar.js";
+import { Input } from "./input.js";
+import { Label } from "./label.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ENTER_KEY = "Enter";
+/** Suggestions of the query editor render in their own popover, outside the edit popover. */
+const NESTED_POPOVER_SELECTOR = "[data-slot=\"popover-content\"]";
+/**
+* Tells whether a value is a non-null object.
+* @param value - Untrusted value.
+* @returns Whether its properties can be read.
+*/
+function isRecord(value) {
+	return typeof value === "object" && value !== null;
+}
+/**
+* Validates presets restored from untrusted storage, trimming names and queries and dropping
+* malformed or empty entries.
+* @param value - Parsed stored value, such as the result of `JSON.parse`.
+* @returns The valid presets, or an empty list when the value is not a list.
+*/
+export function parseFilterPresets(value) {
+	if (!Array.isArray(value)) return [];
+	return value.flatMap((entry) => {
+		if (!isRecord(entry) || typeof entry.name !== "string" || typeof entry.query !== "string") return [];
+		const name = entry.name.trim();
+		const query = entry.query.trim();
+		return name && query ? [{
+			name,
+			query
+		}] : [];
+	});
+}
+export const FILTER_PRESET_DEFAULT_LABELS = {
+	saveAction: "Guardar filtro",
+	saveConfirm: "Guardar",
+	saveConfirmAriaLabel: "Guardar filtro con nombre",
+	presetName: "Nombre del filtro",
+	presetNamePlaceholder: "Mi filtro",
+	presetQuery: "Búsqueda del filtro",
+	presetQueryPlaceholder: "",
+	savedPresets: "Filtros guardados:",
+	editConfirmAriaLabel: "Guardar cambios del filtro",
+	cancel: "Cancelar",
+	delete: "Eliminar",
+	emptyNameError: "Ingresá un nombre para el filtro.",
+	emptyCurrentQueryError: "Escribí una búsqueda en la barra antes de guardarla.",
+	emptyPresetQueryError: "Ingresá una búsqueda para el filtro.",
+	duplicateNameError: "Ya existe un filtro con ese nombre.",
+	applyPresetAriaLabel: (presetName) => `Aplicar filtro guardado ${presetName}`,
+	editPresetAriaLabel: (presetName) => `Editar filtro guardado ${presetName}`,
+	deletePresetAriaLabel: (presetName) => `Eliminar filtro guardado ${presetName}`,
+	deleteConfirmation: (presetName) => `¿Querés eliminar el filtro guardado "${presetName}"?`
+};
+const FORM_POPOVER_CLASS_NAME = "grid w-64 gap-2";
+const ERROR_CLASS_NAME = "m-0 text-xs text-destructive";
+const CHIP_ICON_BUTTON_CLASS_NAME = "inline-flex cursor-pointer items-center border-0 bg-transparent py-[0.35rem] text-muted-foreground [&_svg]:size-3";
+/**
+* Compact icon button that saves the current query as a named preset. Fits the action slot of
+* the filter bar input.
+* @param props - Save availability, save callback and optional labels.
+* @returns The button and its naming popover.
+*/
+export function FilterPresetSaveButton(t0) {
+	const $ = _c(45);
+	const { canSaveCurrentQuery, onSaveCurrentQuery, labels } = t0;
+	let t1;
+	if ($[0] !== labels) {
+		t1 = {
+			...FILTER_PRESET_DEFAULT_LABELS,
+			...labels
+		};
+		$[0] = labels;
+		$[1] = t1;
+	} else {
+		t1 = $[1];
+	}
+	const resolvedLabels = t1;
+	const nameInputId = useId();
+	const [isOpen, setIsOpen] = useState(false);
+	const [nameDraft, setNameDraft] = useState("");
+	const [error, setError] = useState(null);
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = (nextOpen) => {
+			setIsOpen(nextOpen);
+			if (!nextOpen) {
+				setNameDraft("");
+				setError(null);
+			}
+		};
+		$[2] = t2;
+	} else {
+		t2 = $[2];
+	}
+	const handleOpenChange = t2;
+	let t3;
+	if ($[3] !== nameDraft || $[4] !== onSaveCurrentQuery || $[5] !== resolvedLabels.emptyCurrentQueryError || $[6] !== resolvedLabels.emptyNameError) {
+		t3 = () => {
+			const presetName = nameDraft.trim();
+			if (!presetName) {
+				setError(resolvedLabels.emptyNameError);
+				return;
+			}
+			if (!onSaveCurrentQuery(presetName)) {
+				setError(resolvedLabels.emptyCurrentQueryError);
+				return;
+			}
+			handleOpenChange(false);
+		};
+		$[3] = nameDraft;
+		$[4] = onSaveCurrentQuery;
+		$[5] = resolvedLabels.emptyCurrentQueryError;
+		$[6] = resolvedLabels.emptyNameError;
+		$[7] = t3;
+	} else {
+		t3 = $[7];
+	}
+	const handleConfirmSave = t3;
+	const t4 = !canSaveCurrentQuery;
+	let t5;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ _jsx(Bookmark, { "aria-hidden": "true" });
+		$[8] = t5;
+	} else {
+		t5 = $[8];
+	}
+	let t6;
+	if ($[9] !== resolvedLabels.saveAction || $[10] !== t4) {
+		t6 = /* @__PURE__ */ _jsx(TooltipTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ _jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ _jsx(Button, {
+					"data-slot": "filter-preset-save-button",
+					"aria-label": resolvedLabels.saveAction,
+					disabled: t4,
+					size: "icon-xs",
+					type: "button",
+					variant: "ghost",
+					children: t5
+				})
+			})
+		});
+		$[9] = resolvedLabels.saveAction;
+		$[10] = t4;
+		$[11] = t6;
+	} else {
+		t6 = $[11];
+	}
+	let t7;
+	if ($[12] !== resolvedLabels.saveAction) {
+		t7 = /* @__PURE__ */ _jsx(TooltipContent, { children: resolvedLabels.saveAction });
+		$[12] = resolvedLabels.saveAction;
+		$[13] = t7;
+	} else {
+		t7 = $[13];
+	}
+	let t8;
+	if ($[14] !== t6 || $[15] !== t7) {
+		t8 = /* @__PURE__ */ _jsxs(Tooltip, { children: [t6, t7] });
+		$[14] = t6;
+		$[15] = t7;
+		$[16] = t8;
+	} else {
+		t8 = $[16];
+	}
+	let t9;
+	if ($[17] !== nameInputId || $[18] !== resolvedLabels.presetName) {
+		t9 = /* @__PURE__ */ _jsx(Label, {
+			htmlFor: nameInputId,
+			children: resolvedLabels.presetName
+		});
+		$[17] = nameInputId;
+		$[18] = resolvedLabels.presetName;
+		$[19] = t9;
+	} else {
+		t9 = $[19];
+	}
+	let t10;
+	if ($[20] !== error) {
+		t10 = (event) => {
+			setNameDraft(event.target.value);
+			if (error) {
+				setError(null);
+			}
+		};
+		$[20] = error;
+		$[21] = t10;
+	} else {
+		t10 = $[21];
+	}
+	let t11;
+	if ($[22] !== handleConfirmSave) {
+		t11 = (event_0) => {
+			if (event_0.key !== ENTER_KEY) {
+				return;
+			}
+			event_0.preventDefault();
+			handleConfirmSave();
+		};
+		$[22] = handleConfirmSave;
+		$[23] = t11;
+	} else {
+		t11 = $[23];
+	}
+	let t12;
+	if ($[24] !== nameDraft || $[25] !== nameInputId || $[26] !== resolvedLabels.presetNamePlaceholder || $[27] !== t10 || $[28] !== t11) {
+		t12 = /* @__PURE__ */ _jsx(Input, {
+			id: nameInputId,
+			onChange: t10,
+			onKeyDown: t11,
+			placeholder: resolvedLabels.presetNamePlaceholder,
+			type: "text",
+			value: nameDraft
+		});
+		$[24] = nameDraft;
+		$[25] = nameInputId;
+		$[26] = resolvedLabels.presetNamePlaceholder;
+		$[27] = t10;
+		$[28] = t11;
+		$[29] = t12;
+	} else {
+		t12 = $[29];
+	}
+	let t13;
+	if ($[30] !== error) {
+		t13 = error ? /* @__PURE__ */ _jsx("p", {
+			className: ERROR_CLASS_NAME,
+			role: "alert",
+			children: error
+		}) : null;
+		$[30] = error;
+		$[31] = t13;
+	} else {
+		t13 = $[31];
+	}
+	let t14;
+	if ($[32] !== handleConfirmSave || $[33] !== resolvedLabels.saveConfirm || $[34] !== resolvedLabels.saveConfirmAriaLabel) {
+		t14 = /* @__PURE__ */ _jsx(Button, {
+			"aria-label": resolvedLabels.saveConfirmAriaLabel,
+			onClick: handleConfirmSave,
+			size: "sm",
+			type: "button",
+			children: resolvedLabels.saveConfirm
+		});
+		$[32] = handleConfirmSave;
+		$[33] = resolvedLabels.saveConfirm;
+		$[34] = resolvedLabels.saveConfirmAriaLabel;
+		$[35] = t14;
+	} else {
+		t14 = $[35];
+	}
+	let t15;
+	if ($[36] !== t12 || $[37] !== t13 || $[38] !== t14 || $[39] !== t9) {
+		t15 = /* @__PURE__ */ _jsxs(PopoverContent, {
+			align: "end",
+			className: FORM_POPOVER_CLASS_NAME,
+			children: [
+				t9,
+				t12,
+				t13,
+				t14
+			]
+		});
+		$[36] = t12;
+		$[37] = t13;
+		$[38] = t14;
+		$[39] = t9;
+		$[40] = t15;
+	} else {
+		t15 = $[40];
+	}
+	let t16;
+	if ($[41] !== isOpen || $[42] !== t15 || $[43] !== t8) {
+		t16 = /* @__PURE__ */ _jsxs(Popover, {
+			onOpenChange: handleOpenChange,
+			open: isOpen,
+			children: [t8, t15]
+		});
+		$[41] = isOpen;
+		$[42] = t15;
+		$[43] = t8;
+		$[44] = t16;
+	} else {
+		t16 = $[44];
+	}
+	return t16;
+}
+/**
+* Renders one chip per saved preset: its name applies it, the pencil edits its name and query,
+* and the cross deletes it after a confirmation. Renders nothing without presets.
+* @param props - Presets, filter configs, callbacks and optional labels.
+* @returns The presets row, or nothing.
+*/
+export function FilterPresetsBar(t0) {
+	const $ = _c(4);
+	const { presets, queryFilterConfigs, onApplyPreset, onDeletePreset, onUpdatePreset, labels, className } = t0;
+	const resolvedLabels = {
+		...FILTER_PRESET_DEFAULT_LABELS,
+		...labels
+	};
+	const nameInputId = useId();
+	const [editingPresetName, setEditingPresetName] = useState(null);
+	const [nameDraft, setNameDraft] = useState("");
+	const [queryDraft, setQueryDraft] = useState("");
+	const [editError, setEditError] = useState(null);
+	const [deletingPresetName, setDeletingPresetName] = useState(null);
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = (preset, nextOpen) => {
+			setEditError(null);
+			if (!nextOpen) {
+				setEditingPresetName(null);
+				return;
+			}
+			setEditingPresetName(preset.name);
+			setNameDraft(preset.name);
+			setQueryDraft(preset.query);
+		};
+		$[0] = t1;
+	} else {
+		t1 = $[0];
+	}
+	const handleEditOpenChange = t1;
+	const handleConfirmEdit = () => {
+		if (editingPresetName === null) {
+			return;
+		}
+		const name = nameDraft.trim();
+		const query = queryDraft.trim();
+		if (!name) {
+			setEditError(resolvedLabels.emptyNameError);
+			return;
+		}
+		if (!query) {
+			setEditError(resolvedLabels.emptyPresetQueryError);
+			return;
+		}
+		if (presets.some((preset_0) => preset_0.name === name && preset_0.name !== editingPresetName)) {
+			setEditError(resolvedLabels.duplicateNameError);
+			return;
+		}
+		onUpdatePreset({
+			name,
+			originalName: editingPresetName,
+			query
+		});
+		setEditingPresetName(null);
+	};
+	if (presets.length === 0) {
+		return null;
+	}
+	let t2;
+	if ($[1] !== className) {
+		t2 = cn("flex flex-wrap items-center gap-[0.4rem]", className);
+		$[1] = className;
+		$[2] = t2;
+	} else {
+		t2 = $[2];
+	}
+	let t3;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ _jsx(Bookmark, { "aria-hidden": "true" });
+		$[3] = t3;
+	} else {
+		t3 = $[3];
+	}
+	return /* @__PURE__ */ _jsxs("div", {
+		"data-slot": "filter-presets-bar",
+		className: t2,
+		children: [/* @__PURE__ */ _jsxs("span", {
+			className: "inline-flex items-center gap-[0.3rem] text-xs font-medium text-muted-foreground [&_svg]:size-[0.8rem]",
+			children: [t3, resolvedLabels.savedPresets]
+		}), presets.map((preset_1) => /* @__PURE__ */ _jsxs("span", {
+			"data-slot": "filter-preset-chip",
+			className: "inline-flex items-center overflow-hidden rounded-full border border-border bg-muted text-xs leading-none",
+			children: [
+				/* @__PURE__ */ _jsx("button", {
+					"aria-label": resolvedLabels.applyPresetAriaLabel(preset_1.name),
+					className: "max-w-48 cursor-pointer truncate border-0 bg-transparent py-[0.35rem] pr-1 pl-[0.65rem] text-inherit hover:text-primary focus-visible:text-primary",
+					onClick: () => onApplyPreset(preset_1),
+					title: preset_1.query,
+					type: "button",
+					children: preset_1.name
+				}),
+				/* @__PURE__ */ _jsxs(Popover, {
+					onOpenChange: (nextOpen_0) => handleEditOpenChange(preset_1, nextOpen_0),
+					open: editingPresetName === preset_1.name,
+					children: [/* @__PURE__ */ _jsx(PopoverTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ _jsx("button", {
+							"aria-label": resolvedLabels.editPresetAriaLabel(preset_1.name),
+							className: cn(CHIP_ICON_BUTTON_CLASS_NAME, "px-[0.15rem] hover:text-primary focus-visible:text-primary"),
+							type: "button",
+							children: /* @__PURE__ */ _jsx(Pencil, { "aria-hidden": "true" })
+						})
+					}), /* @__PURE__ */ _jsxs(PopoverContent, {
+						align: "start",
+						className: FORM_POPOVER_CLASS_NAME,
+						onInteractOutside: _temp,
+						children: [
+							/* @__PURE__ */ _jsx(Label, {
+								htmlFor: nameInputId,
+								children: resolvedLabels.presetName
+							}),
+							/* @__PURE__ */ _jsx(Input, {
+								id: nameInputId,
+								onChange: (event_0) => {
+									setNameDraft(event_0.target.value);
+									if (editError) {
+										setEditError(null);
+									}
+								},
+								type: "text",
+								value: nameDraft
+							}),
+							/* @__PURE__ */ _jsx("span", {
+								className: "text-sm leading-none font-medium",
+								children: resolvedLabels.presetQuery
+							}),
+							/* @__PURE__ */ _jsx(FilterQueryBar, {
+								ariaLabel: resolvedLabels.presetQuery,
+								configs: queryFilterConfigs,
+								onValueChange: (nextQuery) => {
+									setQueryDraft(nextQuery);
+									if (editError) {
+										setEditError(null);
+									}
+								},
+								placeholder: resolvedLabels.presetQueryPlaceholder,
+								value: queryDraft
+							}),
+							editError ? /* @__PURE__ */ _jsx("p", {
+								className: ERROR_CLASS_NAME,
+								role: "alert",
+								children: editError
+							}) : null,
+							/* @__PURE__ */ _jsx(Button, {
+								"aria-label": resolvedLabels.editConfirmAriaLabel,
+								onClick: handleConfirmEdit,
+								size: "sm",
+								type: "button",
+								children: resolvedLabels.saveConfirm
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ _jsxs(Popover, {
+					onOpenChange: (nextOpen_1) => setDeletingPresetName(nextOpen_1 ? preset_1.name : null),
+					open: deletingPresetName === preset_1.name,
+					children: [/* @__PURE__ */ _jsx(PopoverTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ _jsx("button", {
+							"aria-label": resolvedLabels.deletePresetAriaLabel(preset_1.name),
+							className: cn(CHIP_ICON_BUTTON_CLASS_NAME, "pr-2 pl-[0.15rem] hover:text-destructive focus-visible:text-destructive"),
+							type: "button",
+							children: /* @__PURE__ */ _jsx(X, { "aria-hidden": "true" })
+						})
+					}), /* @__PURE__ */ _jsxs(PopoverContent, {
+						align: "start",
+						className: "grid w-68 gap-3",
+						children: [/* @__PURE__ */ _jsx("p", {
+							className: "m-0 text-sm",
+							children: resolvedLabels.deleteConfirmation(preset_1.name)
+						}), /* @__PURE__ */ _jsxs("div", {
+							className: "flex justify-end gap-2",
+							children: [/* @__PURE__ */ _jsx(Button, {
+								onClick: () => setDeletingPresetName(null),
+								size: "sm",
+								type: "button",
+								variant: "outline",
+								children: resolvedLabels.cancel
+							}), /* @__PURE__ */ _jsx(Button, {
+								onClick: () => {
+									setDeletingPresetName(null);
+									onDeletePreset(preset_1.name);
+								},
+								size: "sm",
+								type: "button",
+								variant: "destructive",
+								children: resolvedLabels.delete
+							})]
+						})]
+					})]
+				})
+			]
+		}, preset_1.name))]
+	});
+}
+function _temp(event) {
+	const interactionTarget = event.target;
+	if (interactionTarget instanceof Element && interactionTarget.closest(NESTED_POPOVER_SELECTOR)) {
+		event.preventDefault();
+	}
+}

package/dist/components/reaction-button.d.ts

@@ -10,8 +10,13 @@ export interface ReactionButtonProps {
     count: number;
     onClick: (event: MouseEvent<HTMLButtonElement>) => void;
     isDisabled?: boolean;
-    /** Icon of the reaction. While active it is filled with the destructive color; override it with `[&_svg]:` classes. */
+    /** Icon of the reaction; it is filled with `activeColor` while active. */
     icon?: ComponentType<SVGProps<SVGSVGElement>>;
+    /**
+     * CSS color of the active icon, such as `var(--primary)` or `currentColor` to follow the
+     * button text. Defaults to the destructive color, the usual tone of a like.
+     */
+    activeColor?: string;
     /** Formats the visible count, for example with a locale-aware compact format. */
     formatCount?: (count: number) => string;
     className?: string;
@@ -23,4 +28,4 @@ export interface ReactionButtonProps {
  * @param props - Accessible name, state, count, click handler and optional icon.
  * @returns The reaction button.
  */
-export declare function ReactionButton({ ariaLabel, isActive, count, onClick, isDisabled, icon: Icon, formatCount, className, }: ReactionButtonProps): import("react").JSX.Element;
+export declare function ReactionButton({ ariaLabel, isActive, count, onClick, isDisabled, icon: Icon, formatCount, activeColor, className, }: ReactionButtonProps): import("react").JSX.Element;