beez-ui 0.8.2 → 0.9.1

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

@@ -0,0 +1,73 @@
+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>;
+    /** Classes of the icon button, for example to adapt it to the action slot of an input. */
+    className?: string;
+}
+/**
+ * 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, className }: 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,510 @@
+"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(46);
+	const { canSaveCurrentQuery, onSaveCurrentQuery, labels, className } = 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] !== className || $[10] !== resolvedLabels.saveAction || $[11] !== 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,
+					className,
+					disabled: t4,
+					size: "icon-xs",
+					type: "button",
+					variant: "ghost",
+					children: t5
+				})
+			})
+		});
+		$[9] = className;
+		$[10] = resolvedLabels.saveAction;
+		$[11] = t4;
+		$[12] = t6;
+	} else {
+		t6 = $[12];
+	}
+	let t7;
+	if ($[13] !== resolvedLabels.saveAction) {
+		t7 = /* @__PURE__ */ _jsx(TooltipContent, { children: resolvedLabels.saveAction });
+		$[13] = resolvedLabels.saveAction;
+		$[14] = t7;
+	} else {
+		t7 = $[14];
+	}
+	let t8;
+	if ($[15] !== t6 || $[16] !== t7) {
+		t8 = /* @__PURE__ */ _jsxs(Tooltip, { children: [t6, t7] });
+		$[15] = t6;
+		$[16] = t7;
+		$[17] = t8;
+	} else {
+		t8 = $[17];
+	}
+	let t9;
+	if ($[18] !== nameInputId || $[19] !== resolvedLabels.presetName) {
+		t9 = /* @__PURE__ */ _jsx(Label, {
+			htmlFor: nameInputId,
+			children: resolvedLabels.presetName
+		});
+		$[18] = nameInputId;
+		$[19] = resolvedLabels.presetName;
+		$[20] = t9;
+	} else {
+		t9 = $[20];
+	}
+	let t10;
+	if ($[21] !== error) {
+		t10 = (event) => {
+			setNameDraft(event.target.value);
+			if (error) {
+				setError(null);
+			}
+		};
+		$[21] = error;
+		$[22] = t10;
+	} else {
+		t10 = $[22];
+	}
+	let t11;
+	if ($[23] !== handleConfirmSave) {
+		t11 = (event_0) => {
+			if (event_0.key !== ENTER_KEY) {
+				return;
+			}
+			event_0.preventDefault();
+			handleConfirmSave();
+		};
+		$[23] = handleConfirmSave;
+		$[24] = t11;
+	} else {
+		t11 = $[24];
+	}
+	let t12;
+	if ($[25] !== nameDraft || $[26] !== nameInputId || $[27] !== resolvedLabels.presetNamePlaceholder || $[28] !== t10 || $[29] !== t11) {
+		t12 = /* @__PURE__ */ _jsx(Input, {
+			id: nameInputId,
+			onChange: t10,
+			onKeyDown: t11,
+			placeholder: resolvedLabels.presetNamePlaceholder,
+			type: "text",
+			value: nameDraft
+		});
+		$[25] = nameDraft;
+		$[26] = nameInputId;
+		$[27] = resolvedLabels.presetNamePlaceholder;
+		$[28] = t10;
+		$[29] = t11;
+		$[30] = t12;
+	} else {
+		t12 = $[30];
+	}
+	let t13;
+	if ($[31] !== error) {
+		t13 = error ? /* @__PURE__ */ _jsx("p", {
+			className: ERROR_CLASS_NAME,
+			role: "alert",
+			children: error
+		}) : null;
+		$[31] = error;
+		$[32] = t13;
+	} else {
+		t13 = $[32];
+	}
+	let t14;
+	if ($[33] !== handleConfirmSave || $[34] !== resolvedLabels.saveConfirm || $[35] !== resolvedLabels.saveConfirmAriaLabel) {
+		t14 = /* @__PURE__ */ _jsx(Button, {
+			"aria-label": resolvedLabels.saveConfirmAriaLabel,
+			onClick: handleConfirmSave,
+			size: "sm",
+			type: "button",
+			children: resolvedLabels.saveConfirm
+		});
+		$[33] = handleConfirmSave;
+		$[34] = resolvedLabels.saveConfirm;
+		$[35] = resolvedLabels.saveConfirmAriaLabel;
+		$[36] = t14;
+	} else {
+		t14 = $[36];
+	}
+	let t15;
+	if ($[37] !== t12 || $[38] !== t13 || $[39] !== t14 || $[40] !== t9) {
+		t15 = /* @__PURE__ */ _jsxs(PopoverContent, {
+			align: "end",
+			className: FORM_POPOVER_CLASS_NAME,
+			children: [
+				t9,
+				t12,
+				t13,
+				t14
+			]
+		});
+		$[37] = t12;
+		$[38] = t13;
+		$[39] = t14;
+		$[40] = t9;
+		$[41] = t15;
+	} else {
+		t15 = $[41];
+	}
+	let t16;
+	if ($[42] !== isOpen || $[43] !== t15 || $[44] !== t8) {
+		t16 = /* @__PURE__ */ _jsxs(Popover, {
+			onOpenChange: handleOpenChange,
+			open: isOpen,
+			children: [t8, t15]
+		});
+		$[42] = isOpen;
+		$[43] = t15;
+		$[44] = t8;
+		$[45] = t16;
+	} else {
+		t16 = $[45];
+	}
+	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;