beez-ui 0.8.1 → 0.9.0

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/presence-swap.js

@@ -9,7 +9,6 @@ const PRESENCE_SWAP_ELEMENTS = {
 	div: motion.div,
 	span: motion.span
 };
-const INSTANT_TRANSITION = { duration: 0 };
 /**
 * One keyed state of the swap. While it animates out it turns inert and hidden
 * from assistive technology, so stale controls cannot be clicked or announced.
@@ -17,7 +16,7 @@ const INSTANT_TRANSITION = { duration: 0 };
 * @returns The animated state.
 */
 function PresenceSwapItem(t0) {
-	const $ = _c(20);
+	const $ = _c(14);
 	const { as, className, children } = t0;
 	const MotionElement = PRESENCE_SWAP_ELEMENTS[as];
 	const isPresent = useIsPresent();
@@ -37,78 +36,66 @@ function PresenceSwapItem(t0) {
 		t3 = $[1];
 	}
 	let t4;
-	if ($[2] !== shouldReduceMotion) {
-		t4 = shouldReduceMotion ? INSTANT_TRANSITION : {
-			duration: MOTION_TIMING.enter,
-			ease: MOTION_EASE
-		};
-		$[2] = shouldReduceMotion;
-		$[3] = t4;
-	} else {
-		t4 = $[3];
-	}
-	let t5;
-	if ($[4] !== t4) {
-		t5 = {
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = {
 			opacity: 1,
 			y: 0,
-			transition: t4
+			transition: {
+				duration: MOTION_TIMING.enter,
+				ease: MOTION_EASE
+			}
 		};
-		$[4] = t4;
-		$[5] = t5;
+		$[2] = t4;
 	} else {
-		t5 = $[5];
+		t4 = $[2];
 	}
-	const t6 = -distance;
-	let t7;
-	if ($[6] !== shouldReduceMotion) {
-		t7 = shouldReduceMotion ? INSTANT_TRANSITION : {
+	const t5 = -distance;
+	let t6;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = {
 			duration: MOTION_TIMING.exit,
 			ease: MOTION_EASE
 		};
-		$[6] = shouldReduceMotion;
-		$[7] = t7;
+		$[3] = t6;
 	} else {
-		t7 = $[7];
+		t6 = $[3];
 	}
-	let t8;
-	if ($[8] !== t6 || $[9] !== t7) {
-		t8 = {
+	let t7;
+	if ($[4] !== t5) {
+		t7 = {
 			opacity: 0,
-			y: t6,
-			transition: t7
+			y: t5,
+			transition: t6
 		};
-		$[8] = t6;
-		$[9] = t7;
-		$[10] = t8;
+		$[4] = t5;
+		$[5] = t7;
 	} else {
-		t8 = $[10];
+		t7 = $[5];
 	}
-	let t9;
-	if ($[11] !== MotionElement || $[12] !== children || $[13] !== className || $[14] !== t1 || $[15] !== t2 || $[16] !== t3 || $[17] !== t5 || $[18] !== t8) {
-		t9 = /* @__PURE__ */ _jsx(MotionElement, {
+	let t8;
+	if ($[6] !== MotionElement || $[7] !== children || $[8] !== className || $[9] !== t1 || $[10] !== t2 || $[11] !== t3 || $[12] !== t7) {
+		t8 = /* @__PURE__ */ _jsx(MotionElement, {
 			"data-slot": "presence-swap",
 			"aria-hidden": t1,
 			inert: t2,
 			className,
 			initial: t3,
-			animate: t5,
-			exit: t8,
+			animate: t4,
+			exit: t7,
 			children
 		});
-		$[11] = MotionElement;
-		$[12] = children;
-		$[13] = className;
-		$[14] = t1;
-		$[15] = t2;
-		$[16] = t3;
-		$[17] = t5;
-		$[18] = t8;
-		$[19] = t9;
+		$[6] = MotionElement;
+		$[7] = children;
+		$[8] = className;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t7;
+		$[13] = t8;
 	} else {
-		t9 = $[19];
+		t8 = $[13];
 	}
-	return t9;
+	return t8;
 }
 /**
 * Swaps keyed content with a short lift-and-fade; the first render is not animated.

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;