@kapiuara/ui 0.0.0-stage → 0.1.0

package/dist/components/overlays/KapiCanvasForm.js

@@ -0,0 +1,60 @@
+"use client";
+import { KapiButton as e } from "../inputs/KapiButton.js";
+import { useLabels as t } from "../locale/KapiLocaleProvider.js";
+import { KapiOffcanvas as n } from "./KapiOffcanvas.js";
+import { runSubmit as r } from "./canvasFormLogic.js";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useCallback as s, useEffect as c, useId as l, useRef as u, useState as d } from "react";
+//#region src/components/overlays/KapiCanvasForm.tsx
+var f = {
+	submit: "Guardar",
+	cancel: "Cancelar"
+}, p = ({ onClose: p, children: m, onSubmit: h, onError: g, submitLabel: _, cancelLabel: v, submitDisabled: y = !1, formId: b, closeOnBackdrop: x, closeOnEscape: S, ...C }) => {
+	let w = t("canvasForm", f), T = l(), E = b ?? `canvas-form-${T}`, [D, O] = d(!1), k = u(!1), A = u(!0);
+	c(() => (A.current = !0, () => {
+		A.current = !1;
+	}), []);
+	let j = s((e) => {
+		e.preventDefault(), !k.current && r(() => h(e), {
+			onStart: () => {
+				k.current = !0, O(!0);
+			},
+			onEnd: () => {
+				k.current = !1, A.current && O(!1);
+			},
+			onError: g
+		});
+	}, [h, g]), M = () => {
+		k.current || p();
+	}, N = /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(e, {
+		onClick: M,
+		disabled: D,
+		children: v ?? w.cancel
+	}), /* @__PURE__ */ a(e, {
+		variant: "primary",
+		type: "submit",
+		form: E,
+		disabled: D || y,
+		"aria-busy": D,
+		icon: D ? /* @__PURE__ */ a("span", {
+			className: "kapi-spinner kapi-spinner--sm",
+			"aria-hidden": "true"
+		}) : void 0,
+		children: _ ?? w.submit
+	})] });
+	return /* @__PURE__ */ a(n, {
+		...C,
+		onClose: M,
+		closeOnBackdrop: !D && x,
+		closeOnEscape: !D && S,
+		footer: N,
+		children: /* @__PURE__ */ a("form", {
+			id: E,
+			className: "kapi-stack",
+			onSubmit: j,
+			children: m
+		})
+	});
+};
+//#endregion
+export { f as DEFAULT_CANVAS_FORM_LABELS, p as KapiCanvasForm };

package/dist/components/overlays/KapiCommandPalette.d.ts

@@ -0,0 +1,58 @@
+import { type ReactNode } from "react";
+import "./KapiCommandPalette.css";
+import { type KapiRootProps } from "../rootProps";
+import type { KapiLabelsOverride } from "../labelsLogic";
+export type KapiCommand = {
+    id: string;
+    /** Texto visible. También se usa para filtrar (si es un elemento, se extrae su texto; suma `keywords` si hace falta). */
+    label: ReactNode;
+    icon?: ReactNode;
+    /** Contenido a la derecha (atajo, contador, badge…). */
+    trailing?: ReactNode;
+    /** Términos extra que también matchean la búsqueda. */
+    keywords?: string[];
+    disabled?: boolean;
+    /** Se ejecuta al elegir el comando; después la paleta llama a `onClose`. */
+    onSelect: () => void;
+};
+export type KapiCommandGroup = {
+    id: string;
+    /** Título de la sección ("IR A", "Módulos"…). Se muestra sólo si el grupo tiene resultados. */
+    label?: ReactNode;
+    commands: KapiCommand[];
+};
+/** `className`/`style`/`id` (`KapiRootProps`) van al `<dialog>` `.kapi-cmdk` (la tarjeta de la paleta). */
+export type KapiCommandPaletteProps = KapiRootProps & {
+    /** Controlado. */
+    open: boolean;
+    /** Pedido de cierre (Esc, click afuera, o después de elegir un comando). */
+    onClose: () => void;
+    /** Secciones de comandos, en orden; la búsqueda filtra dentro de cada una. */
+    groups: KapiCommandGroup[];
+    /** Gana sobre `labels.placeholder` ("Buscar o ir a…"). */
+    placeholder?: string;
+    /** Gana sobre `labels.empty` ("Sin resultados"). */
+    emptyLabel?: string;
+    /** Pie con la ayuda de teclado. Default `labels.footerHint`; `null` lo oculta. */
+    footerHint?: ReactNode;
+    /** Textos fijos (clave `commandPalette`). */
+    labels?: KapiLabelsOverride<KapiCommandPaletteLabels> | undefined;
+};
+export declare const DEFAULT_FOOTER_HINT = "\u2191\u2193 para moverte \u00B7 Enter para ir \u00B7 Esc para cerrar";
+export type KapiCommandPaletteLabels = {
+    placeholder: string;
+    empty: string;
+    footerHint: string;
+};
+export declare const DEFAULT_COMMAND_PALETTE_LABELS: KapiCommandPaletteLabels;
+/**
+ * Paleta de comandos ("Buscar o ir a…", típicamente con Ctrl/Cmd+K — ver `useHotkey`).
+ * Panel flotante centrado sobre `<dialog>` nativo (`showModal()`): top-layer, focus trap, Escape y
+ * restauración de foco los da el navegador. Búsqueda por subcadena sobre el texto del `label` y los
+ * `keywords`; resultados agrupados; ↑/↓ recorren los comandos de todos los grupos, Enter elige.
+ *
+ * PERMISOS: es puramente presentacional. La app debe pasar SÓLO los comandos que el usuario puede ver
+ * (filtrados upstream con su propio motor de permisos); la paleta no valida ni oculta nada por sí misma.
+ * `disabled` sólo deshabilita visualmente un comando; no es un control de acceso.
+ */
+export declare const KapiCommandPalette: ({ open, ...props }: KapiCommandPaletteProps) => import("react").JSX.Element | null;

package/dist/components/overlays/KapiCommandPalette.js

@@ -0,0 +1,152 @@
+"use client";
+import { useLabels as e } from "../locale/KapiLocaleProvider.js";
+import { joinClasses as t } from "../rootProps.js";
+import { getPortalRoot as n, useBackdropClose as r, useNativeDialog as i } from "./useNativeDialog.js";
+import { clampActiveIndex as a, filterGroups as o, flattenNavigable as s, moveActiveIndex as c, nodeText as l } from "./commandPaletteLogic.js";
+/* empty css                       */
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useEffect as f, useId as p, useMemo as m, useRef as h, useState as g } from "react";
+import { Search as _ } from "lucide-react";
+import { createPortal as v } from "react-dom";
+//#region src/components/overlays/KapiCommandPalette.tsx
+var y = "↑↓ para moverte · Enter para ir · Esc para cerrar", b = {
+	placeholder: "Buscar o ir a…",
+	empty: "Sin resultados",
+	footerHint: y
+}, x = ({ onClose: y, groups: x, placeholder: S, emptyLabel: C, footerHint: w, labels: T, className: E, style: D, id: O }) => {
+	let k = e("commandPalette", b, T), A = S ?? k.placeholder, j = C ?? k.empty, M = w === void 0 ? k.footerHint : w, N = p(), P = `${N}-listbox`, F = (e) => `${N}-opt-${e}`, I = h(null), [L, R] = g(""), [z, B] = g(0), { ref: V, dialogProps: H } = i({ onRequestClose: y }), U = r(y), W = m(() => {
+		let e = x.map((e) => ({
+			...e,
+			commands: e.commands.map((e) => ({
+				...e,
+				text: l(e.label)
+			}))
+		}));
+		return o(e, L);
+	}, [x, L]), G = m(() => s(W), [W]), K = a(z, G.length), q = K >= 0 ? G[K] : void 0;
+	f(() => {
+		if (!q) return;
+		let e = I.current?.querySelector(`[data-cmd-id="${CSS.escape(q.id)}"]`);
+		e && typeof e.scrollIntoView == "function" && e.scrollIntoView({ block: "nearest" });
+	}, [q]);
+	let J = (e) => {
+		e.disabled || (e.onSelect(), y());
+	}, Y = (e) => {
+		switch (e.key) {
+			case "ArrowDown":
+			case "ArrowUp":
+				e.preventDefault(), B(c(K, G.length, e.key === "ArrowDown" ? 1 : -1));
+				break;
+			case "Home":
+			case "End":
+				G.length > 0 && (e.preventDefault(), B(e.key === "Home" ? 0 : G.length - 1));
+				break;
+			case "Enter": q && !e.nativeEvent.isComposing && (e.preventDefault(), J(q));
+		}
+	}, X = n();
+	return X ? v(/* @__PURE__ */ d("dialog", {
+		ref: V,
+		id: O,
+		style: D,
+		className: t("kapi-cmdk", E),
+		"aria-modal": "true",
+		"aria-label": A,
+		...H,
+		...U,
+		children: [
+			/* @__PURE__ */ d("div", {
+				className: "kapi-cmdk__search",
+				children: [/* @__PURE__ */ u(_, {
+					size: 17,
+					strokeWidth: 2.2,
+					"aria-hidden": "true",
+					className: "kapi-cmdk__search-icon"
+				}), /* @__PURE__ */ u("input", {
+					"data-autofocus": !0,
+					type: "text",
+					className: "kapi-cmdk__input",
+					role: "combobox",
+					"aria-expanded": "true",
+					"aria-controls": P,
+					"aria-autocomplete": "list",
+					"aria-activedescendant": q ? F(q.id) : void 0,
+					autoComplete: "off",
+					spellCheck: !1,
+					placeholder: A,
+					"aria-label": A,
+					value: L,
+					onChange: (e) => {
+						R(e.target.value), B(0);
+					},
+					onKeyDown: Y
+				})]
+			}),
+			/* @__PURE__ */ d("div", {
+				ref: I,
+				id: P,
+				role: "listbox",
+				"aria-label": A,
+				className: "kapi-cmdk__list",
+				children: [W.map((e) => {
+					let t = `${N}-grp-${e.id}`;
+					return /* @__PURE__ */ d("div", {
+						role: "group",
+						className: "kapi-cmdk__group",
+						"aria-labelledby": e.label == null ? void 0 : t,
+						children: [e.label != null && /* @__PURE__ */ u("div", {
+							id: t,
+							className: "kapi-cmdk__group-label",
+							role: "presentation",
+							children: e.label
+						}), e.commands.map((e) => {
+							let t = q?.id === e.id;
+							return /* @__PURE__ */ d("div", {
+								id: F(e.id),
+								"data-cmd-id": e.id,
+								role: "option",
+								"aria-selected": t,
+								"aria-disabled": e.disabled || void 0,
+								className: [
+									"kapi-cmdk__item",
+									t && "kapi-cmdk__item--active",
+									e.disabled && "kapi-cmdk__item--disabled"
+								].filter(Boolean).join(" "),
+								onMouseDown: (e) => e.preventDefault(),
+								onMouseMove: () => {
+									let t = G.findIndex((t) => t.id === e.id);
+									t >= 0 && t !== K && B(t);
+								},
+								onClick: () => J(e),
+								children: [
+									e.icon && /* @__PURE__ */ u("span", {
+										className: "kapi-cmdk__icon",
+										"aria-hidden": "true",
+										children: e.icon
+									}),
+									/* @__PURE__ */ u("span", {
+										className: "kapi-cmdk__label",
+										children: e.label
+									}),
+									e.trailing && /* @__PURE__ */ u("span", {
+										className: "kapi-cmdk__trailing",
+										children: e.trailing
+									})
+								]
+							}, e.id);
+						})]
+					}, e.id);
+				}), W.length === 0 && /* @__PURE__ */ u("div", {
+					className: "kapi-cmdk__empty",
+					role: "status",
+					children: j
+				})]
+			}),
+			M && /* @__PURE__ */ u("div", {
+				className: "kapi-cmdk__foot",
+				children: M
+			})
+		]
+	}), X) : null;
+}, S = ({ open: e, ...t }) => e ? /* @__PURE__ */ u(x, { ...t }) : null;
+//#endregion
+export { b as DEFAULT_COMMAND_PALETTE_LABELS, y as DEFAULT_FOOTER_HINT, S as KapiCommandPalette };

package/dist/components/overlays/KapiConfirm.d.ts

@@ -0,0 +1,48 @@
+import { type ReactNode } from "react";
+import "./KapiConfirm.css";
+import type { KapiRootProps } from "../rootProps";
+import type { KapiLabelsOverride } from "../labelsLogic";
+export type KapiConfirmVariant = "danger" | "warning" | "success" | "info" | "question";
+/**
+ * Textos fijos: cancelar, el confirmar por defecto de cada `variant` y el error genérico que
+ * muestra `KapiDialogHost` cuando un `onConfirm` asíncrono falla sin mensaje.
+ */
+export type KapiConfirmLabels = {
+    cancel: string;
+    error: string;
+} & Record<KapiConfirmVariant, string>;
+export declare const DEFAULT_CONFIRM_LABELS: KapiConfirmLabels;
+/** `className`/`style`/`id` van a la tarjeta del modal. */
+export type KapiConfirmProps = KapiRootProps & {
+    /** Muestra u oculta el diálogo (controlado); al cerrar anima la salida. */
+    open: boolean;
+    /** danger (default) · warning · success · info · question: define ícono, color y label por defecto. */
+    variant?: KapiConfirmVariant | undefined;
+    /** Pregunta principal (nombra al diálogo). */
+    title: string;
+    /** Detalle bajo el título (qué se va a hacer, consecuencias). */
+    message?: ReactNode | undefined;
+    /** Default según `variant` (`labels.<variant>`: Eliminar / Continuar / Aceptar / Aceptar / Sí). */
+    confirmLabel?: string | undefined;
+    /** Gana sobre `labels.cancel` ("Cancelar"). */
+    cancelLabel?: string | undefined;
+    /** Textos fijos (clave `confirm`). */
+    labels?: KapiLabelsOverride<KapiConfirmLabels> | undefined;
+    /**
+     * Acción en curso: spinner en el botón de confirmar, los dos botones deshabilitados y ningún
+     * cierre (Escape, fondo, X). Default false.
+     */
+    loading?: boolean | undefined;
+    /** Error a mostrar dentro del diálogo (`role="alert"`), p. ej. el de una acción que falló. */
+    error?: ReactNode | undefined;
+    /** Click en el botón de confirmar. */
+    onConfirm: () => void;
+    /** Pedido de cierre: Cancelar, X, Escape o click en el fondo. El padre pone `open={false}`. */
+    onClose: () => void;
+};
+/**
+ * Confirmación (envuelve a KapiModal `sm` sin header). Controlada:
+ * `open` + `onConfirm` + `onClose`. El foco inicial cae en "Cancelar". `loading` y `error`
+ * representan una acción asíncrona en curso o fallida (los usa `KapiDialogHost`).
+ */
+export declare const KapiConfirm: ({ open, variant, title, message, confirmLabel, cancelLabel, labels, loading, error, onConfirm, onClose, className, style, id }: KapiConfirmProps) => import("react").JSX.Element;

package/dist/components/overlays/KapiConfirm.js

@@ -0,0 +1,94 @@
+"use client";
+import { KapiButton as e } from "../inputs/KapiButton.js";
+import { useLabels as t } from "../locale/KapiLocaleProvider.js";
+import { KapiModal as n } from "./KapiModal.js";
+/* empty css                */
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useId as o } from "react";
+import { AlertTriangle as s, CheckCircle2 as c, CircleHelp as l, Info as u, Trash2 as d } from "lucide-react";
+//#region src/components/overlays/KapiConfirm.tsx
+var f = {
+	danger: {
+		Icon: d,
+		button: "danger"
+	},
+	warning: {
+		Icon: s,
+		button: "primary"
+	},
+	success: {
+		Icon: c,
+		button: "primary"
+	},
+	info: {
+		Icon: u,
+		button: "primary"
+	},
+	question: {
+		Icon: l,
+		button: "primary"
+	}
+}, p = {
+	cancel: "Cancelar",
+	danger: "Eliminar",
+	warning: "Continuar",
+	success: "Aceptar",
+	info: "Aceptar",
+	question: "Sí",
+	error: "No se pudo completar la acción"
+}, m = ({ open: s, variant: c = "danger", title: l, message: u, confirmLabel: d, cancelLabel: m, labels: h, loading: g = !1, error: _, onConfirm: v, onClose: y, className: b, style: x, id: S }) => {
+	let C = o(), w = t("confirm", p, h), T = c in f ? c : "danger", { Icon: E, button: D } = f[T];
+	return /* @__PURE__ */ a(n, {
+		className: b,
+		style: x,
+		id: S,
+		size: "sm",
+		hideHeader: !0,
+		"aria-labelledby": C,
+		open: s,
+		onClose: g ? () => {} : y,
+		closeOnEscape: !g,
+		closeOnBackdrop: !g,
+		footer: /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(e, {
+			"data-autofocus": !0,
+			disabled: g,
+			onClick: y,
+			children: m ?? w.cancel
+		}), /* @__PURE__ */ i(e, {
+			variant: D,
+			disabled: g,
+			"aria-busy": g || void 0,
+			icon: g ? /* @__PURE__ */ i("span", {
+				className: "kapi-spinner kapi-confirm__spinner",
+				"aria-hidden": "true"
+			}) : void 0,
+			onClick: v,
+			children: d ?? w[T]
+		})] }),
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: `kapi-confirm__icon kapi-confirm__icon--${T}`,
+				children: /* @__PURE__ */ i(E, {
+					size: 28,
+					strokeWidth: 2
+				})
+			}),
+			/* @__PURE__ */ i("div", {
+				id: C,
+				className: "kapi-confirm__title",
+				children: l
+			}),
+			u && /* @__PURE__ */ i("div", {
+				className: "kapi-confirm__msg",
+				children: u
+			}),
+			_ != null && _ !== !1 && /* @__PURE__ */ i("div", {
+				className: "kapi-confirm__error",
+				role: "alert",
+				children: _
+			})
+		]
+	});
+};
+//#endregion
+export { p as DEFAULT_CONFIRM_LABELS, m as KapiConfirm };

package/dist/components/overlays/KapiContextMenu.d.ts

@@ -0,0 +1,51 @@
+import { type ReactNode } from "react";
+import type { KapiLabelsOverride } from "../labelsLogic";
+import { type KapiRootProps } from "../rootProps";
+import "./overlays.css";
+/** Ítem de un menú de acciones (KapiContextMenu, KapiMenuButton, menús de KapiTable y KapiShell). */
+export type KapiMenuItem = {
+    sep: true;
+} | {
+    sep?: false;
+    header: string;
+} | {
+    sep?: false | undefined;
+    label: string;
+    icon?: ReactNode | undefined;
+    onClick?: (() => void) | undefined;
+    danger?: boolean | undefined;
+    /** Atenuado y no ejecutable: anuncia `aria-disabled`, ignora click/Enter y las flechas lo saltean. */
+    disabled?: boolean | undefined;
+};
+/** `className`/`style`/`id` van al menú (`role="menu"`); la posición calculada gana sobre `style`. */
+export type KapiContextMenuProps = KapiRootProps & {
+    /** Muestra u oculta el menú (controlado). Con `false` no se monta nada. */
+    open: boolean;
+    /** Posición (clientX/clientY) donde se abrió; se clampea al viewport. */
+    x: number;
+    /** Coordenada vertical (clientY) donde se abrió; se clampea al viewport. */
+    y: number;
+    /** Ítems del menú, en orden (acciones y separadores). */
+    items: KapiMenuItem[];
+    /** Pedido de cierre (Escape, click afuera o tras elegir un ítem). El padre pone `open={false}`. */
+    onClose: () => void;
+    /** Nombre accesible del menú (`aria-label`). Sin la prop usa `labels.menu`. */
+    "aria-label"?: string | undefined;
+    /** Textos fijos (clave `contextMenu`). */
+    labels?: KapiLabelsOverride<KapiContextMenuLabels> | undefined;
+};
+export type KapiContextMenuLabels = {
+    menu: string;
+};
+export declare const DEFAULT_CONTEXT_MENU_LABELS: KapiContextMenuLabels;
+/** Clases de un ítem accionable (compartidas por KapiContextMenu y KapiMenuButton). */
+export declare const menuItemClass: (item: {
+    danger?: boolean | undefined;
+    disabled?: boolean | undefined;
+}) => string;
+/**
+ * Menú contextual custom. Se abre con doble click derecho (ver
+ * `useGlobalRightClick` / `useDragScroll({ onMenu })`). Controlado con `open` + `onClose`: cada
+ * apertura monta el menú de cero (el foco va al primer ítem y vuelve al cerrar).
+ */
+export declare const KapiContextMenu: ({ open, ...props }: KapiContextMenuProps) => import("react").JSX.Element | null;

package/dist/components/overlays/KapiContextMenu.js

@@ -0,0 +1,90 @@
+"use client";
+import { useLabels as e } from "../locale/KapiLocaleProvider.js";
+import { usePlacement as t } from "../../hooks/usePlacement.js";
+import { joinClasses as n } from "../rootProps.js";
+/* empty css             */
+import { POINT_MENU_PLACEMENT as r } from "../../hooks/rightClick.js";
+import { focusedMenuIndex as i, initialMenuFocus as a, menuKeyIntent as o, nextEnabledIndex as s } from "./menuKeyboardLogic.js";
+import { actionableIndexes as c, estimateMenuHeight as l } from "./menuButtonLogic.js";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useEffect as p, useLayoutEffect as m, useRef as h } from "react";
+//#region src/components/overlays/KapiContextMenu.tsx
+var g = { menu: "Menú contextual" }, _ = (e) => n("kapi-ctxmenu__item", e.danger && "is-danger", e.disabled && "is-disabled"), v = 210, y = ({ open: e, ...t }) => e ? /* @__PURE__ */ d(b, { ...t }) : null, b = ({ x: y, y: b, items: x, onClose: S, className: C, style: w, id: T, labels: E, "aria-label": D }) => {
+	let O = e("contextMenu", g, E), k = h(null), A = c(x), j = (e) => {
+		k.current?.querySelector(`[data-menu-index="${e}"]`)?.focus();
+	};
+	p(() => {
+		let e = document.activeElement instanceof HTMLElement ? document.activeElement : null, t = k.current;
+		return j(a(A)), () => {
+			let n = document.activeElement;
+			(!n || n === document.body || (t?.contains(n) ?? !1)) && e?.isConnected && e.focus();
+		};
+	}, []);
+	let M = (e) => {
+		let t = o(e.key);
+		t.kind === "move" ? (e.preventDefault(), j(s(i(document.activeElement), t.dir, A))) : t.kind === "close" && (t.returnFocus && (e.preventDefault(), e.stopPropagation()), S());
+	}, { placement: N, update: P } = t({
+		open: !0,
+		anchor: () => ({
+			x: y,
+			y: b
+		}),
+		floatingRef: k,
+		estimate: {
+			width: v,
+			height: l(x)
+		},
+		...r,
+		hideUntilPlaced: !1
+	});
+	m(() => {
+		P();
+	}, [
+		y,
+		b,
+		x.length,
+		P
+	]);
+	let F = N?.left ?? y, I = N?.top ?? b;
+	return /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("div", {
+		className: "kapi-ctxmenu__backdrop",
+		onMouseDown: S,
+		onContextMenu: (e) => {
+			e.preventDefault(), S();
+		}
+	}), /* @__PURE__ */ d("div", {
+		id: T,
+		className: n("kapi-ctxmenu", C),
+		style: {
+			...w,
+			left: F,
+			top: I,
+			width: v
+		},
+		role: "menu",
+		"aria-label": D ?? O.menu,
+		ref: k,
+		onKeyDown: M,
+		children: x.map((e, t) => e.sep ? /* @__PURE__ */ d("div", {
+			role: "separator",
+			className: "kapi-ctxmenu__sep"
+		}, `s${t}`) : "header" in e ? /* @__PURE__ */ d("div", {
+			role: "presentation",
+			className: "kapi-ctxmenu__header",
+			children: e.header
+		}, `h${t}`) : /* @__PURE__ */ f("button", {
+			type: "button",
+			role: "menuitem",
+			tabIndex: -1,
+			"data-menu-index": t,
+			"aria-disabled": e.disabled ? "true" : void 0,
+			className: _(e),
+			onClick: () => {
+				e.disabled || (e.onClick?.(), S());
+			},
+			children: [e.icon, e.label]
+		}, `m${t}`))
+	})] });
+};
+//#endregion
+export { g as DEFAULT_CONTEXT_MENU_LABELS, y as KapiContextMenu, _ as menuItemClass };

package/dist/components/overlays/KapiDialogHost.d.ts

@@ -0,0 +1,23 @@
+import "./KapiConfirm.css";
+import "./KapiModal.css";
+import { type KapiDialogStore } from "./dialogStore";
+import type { KapiLabelsOverride } from "../labelsLogic";
+/** Textos fijos del host: botón de los avisos y mensaje de carga por defecto. */
+export type KapiDialogLabels = {
+    accept: string;
+    loading: string;
+};
+export declare const DEFAULT_DIALOG_LABELS: KapiDialogLabels;
+export type KapiDialogHostProps = {
+    /** Textos fijos (clave `dialog`). Las confirmaciones usan la clave `confirm`. */
+    labels?: KapiLabelsOverride<KapiDialogLabels> | undefined;
+    /** Store que atiende (default: el global de `kapiConfirm`/`kapiAlert`/`kapiLoading`). */
+    store?: KapiDialogStore;
+};
+/**
+ * Montalo una vez en la app: muestra los diálogos imperativos (`kapiConfirm`, `kapiAlert`) de a
+ * uno, en orden de llegada, y la capa de carga de `kapiLoading` mientras quede alguna abierta.
+ * Abrir un diálogo cierra las cargas de `kapiLoading()`; las de `kapiLoading.run` se ocultan hasta
+ * que se vacía la cola. Los pedidos hechos antes de montarlo esperan en la cola.
+ */
+export declare const KapiDialogHost: ({ labels, store }: KapiDialogHostProps) => import("react").JSX.Element;