@kapiuara/ui 0.0.0-stage → 0.1.1

package/dist/components/overlays/KapiDialogHost.js

@@ -0,0 +1,129 @@
+"use client";
+import { KapiButton as e } from "../inputs/KapiButton.js";
+import { useLabels as t } from "../locale/KapiLocaleProvider.js";
+import { getPortalRoot as n, useNativeDialog as r } from "./useNativeDialog.js";
+/* empty css              */
+import { KapiModal as i } from "./KapiModal.js";
+/* empty css                */
+import { DEFAULT_CONFIRM_LABELS as a, KapiConfirm as o } from "./KapiConfirm.js";
+import { confirmErrorMessage as s, dialogStore as c } from "./dialogStore.js";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useId as f, useRef as p, useState as m, useSyncExternalStore as h } from "react";
+import { AlertTriangle as g, CheckCircle2 as _, Info as v, XCircle as y } from "lucide-react";
+import { createPortal as b } from "react-dom";
+//#region src/components/overlays/KapiDialogHost.tsx
+var x = {
+	accept: "Aceptar",
+	loading: "Cargando…"
+}, S = {
+	success: _,
+	error: y,
+	info: v,
+	warning: g
+}, C = ({ options: t, acceptLabel: n, onClose: r }) => {
+	let a = f(), o = t.variant && t.variant in S ? t.variant : "info", s = S[o];
+	return /* @__PURE__ */ d(i, {
+		size: "sm",
+		hideHeader: !0,
+		"aria-labelledby": a,
+		open: !0,
+		onClose: r,
+		footer: /* @__PURE__ */ u(e, {
+			"data-autofocus": !0,
+			variant: "primary",
+			onClick: r,
+			children: t.acceptLabel ?? n
+		}),
+		children: [
+			/* @__PURE__ */ u("div", {
+				className: `kapi-confirm__icon kapi-confirm__icon--${o}`,
+				children: /* @__PURE__ */ u(s, {
+					size: 28,
+					strokeWidth: 2
+				})
+			}),
+			/* @__PURE__ */ u("div", {
+				id: a,
+				className: "kapi-confirm__title",
+				children: t.title
+			}),
+			t.message && /* @__PURE__ */ u("div", {
+				className: "kapi-confirm__msg",
+				children: t.message
+			})
+		]
+	});
+}, w = ({ options: e, onSettle: n }) => {
+	let r = t("confirm", a), [i, c] = m({
+		busy: !1,
+		error: null
+	}), l = p(!1);
+	return /* @__PURE__ */ u(o, {
+		open: !0,
+		title: e.title,
+		message: e.message,
+		variant: e.variant,
+		confirmLabel: e.confirmLabel,
+		cancelLabel: e.cancelLabel,
+		loading: i.busy,
+		error: i.error ?? void 0,
+		onConfirm: () => {
+			let t = e.onConfirm;
+			if (!t) return n(!0);
+			l.current || (l.current = !0, c({
+				busy: !0,
+				error: null
+			}), new Promise((e) => e(t())).then(() => {
+				l.current = !1, n(!0);
+			}, (e) => {
+				l.current = !1, c({
+					busy: !1,
+					error: s(e) ?? r.error
+				});
+			}));
+		},
+		onClose: () => n(!1)
+	});
+}, T = ({ message: e, root: t }) => {
+	let n = f(), { ref: i, dialogProps: a } = r();
+	return b(/* @__PURE__ */ u("dialog", {
+		ref: i,
+		className: "kapi-loading-overlay kapi-loading-dialog",
+		"aria-modal": "true",
+		"aria-busy": "true",
+		"aria-labelledby": n,
+		tabIndex: -1,
+		...a,
+		children: /* @__PURE__ */ d("div", {
+			className: "kapi-loading",
+			children: [/* @__PURE__ */ u("span", {
+				className: "kapi-spinner",
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ u("span", {
+				id: n,
+				className: "kapi-loading__msg",
+				role: "status",
+				children: e
+			})]
+		})
+	}), t);
+}, E = ({ labels: e, store: r = c }) => {
+	let i = t("dialog", x, e), { dialog: a, loading: o } = h(r.subscribe, r.getSnapshot, r.getSnapshot), s = o && !a ? n() : null;
+	return /* @__PURE__ */ d(l, { children: [
+		a?.kind === "confirm" && /* @__PURE__ */ u(w, {
+			options: a.options,
+			onSettle: (e) => r.settle(a.id, e)
+		}, a.id),
+		a?.kind === "alert" && /* @__PURE__ */ u(C, {
+			options: a.options,
+			acceptLabel: i.accept,
+			onClose: () => r.settle(a.id, !1)
+		}, a.id),
+		!a && o && s && /* @__PURE__ */ u(T, {
+			message: o.message ?? i.loading,
+			root: s
+		})
+	] });
+};
+//#endregion
+export { x as DEFAULT_DIALOG_LABELS, E as KapiDialogHost };

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

@@ -0,0 +1,30 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import "./overlays.css";
+export type KapiDropdownOption = string | number;
+export type KapiDropdownDrop = "down" | "up";
+/** Atributos nativos (`id`, `style`, `data-*`…) van al contenedor `.kapi-dropdown` (chip + menú). */
+export type KapiDropdownProps<T extends KapiDropdownOption = KapiDropdownOption> = Omit<HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "defaultValue"> & {
+    /** Opción seleccionada (se muestra en el chip). */
+    value: T;
+    /** Opciones primitivas; también son la etiqueta visible. */
+    options: T[];
+    /** Se llama con la opción elegida. */
+    onChange: (value: T) => void;
+    /** Ícono (lucide-react) a la izquierda del chip. */
+    icon?: ReactNode;
+    /** Prefijo del chip ("Estado: Activo"). */
+    label?: string;
+    /** `up` abre hacia arriba (para footers). */
+    drop?: KapiDropdownDrop;
+    /** Ancho mínimo del menú en px. */
+    minWidth?: number;
+};
+/** Clases del menú según hacia dónde abre. Pura y exportada para testear. */
+export declare const dropdownMenuClass: (drop?: KapiDropdownDrop) => string;
+/** Clases de una opción del menú. */
+export declare const dropdownItemClass: (selected: boolean) => string;
+/**
+ * Select liviano (menú simple con la cara del rediseño), ideal para filtros compactos tipo chip.
+ * Para selects ricos (búsqueda/multi) usa KapiSelect.
+ */
+export declare const KapiDropdown: <T extends KapiDropdownOption = KapiDropdownOption>({ value, options, onChange, icon, label, drop, minWidth, className, ...rest }: KapiDropdownProps<T>) => import("react").JSX.Element;

package/dist/components/overlays/KapiDropdown.js

@@ -0,0 +1,84 @@
+"use client";
+import { joinClasses as e } from "../rootProps.js";
+/* empty css             */
+import { focusedMenuIndex as t, initialMenuFocus as n, menuKeyIntent as r, nextEnabledIndex as i } from "./menuKeyboardLogic.js";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useEffect as c, useId as l, useRef as u, useState as d } from "react";
+import { Check as f, ChevronDown as p } from "lucide-react";
+//#region src/components/overlays/KapiDropdown.tsx
+var m = (e = "down") => `kapi-menu kapi-dropdown__menu kapi-dropdown__menu--${e}`, h = (e) => `kapi-menu__item${e ? " kapi-menu__item--on" : ""}`, g = ({ value: g, options: _, onChange: v, icon: y, label: b, drop: x = "down", minWidth: S = 170, className: C, ...w }) => {
+	let [T, E] = d(!1), D = l(), O = `${D}-trigger`, k = `${D}-menu`, A = u(null), j = u(null), M = _.map((e, t) => t), N = (e) => {
+		j.current?.querySelector(`[data-menu-index="${e}"]`)?.focus();
+	}, P = (e) => {
+		E(!1), e && A.current?.focus();
+	};
+	c(() => {
+		T && N(n(M, _.indexOf(g)));
+	}, [T]);
+	let F = (e) => {
+		let n = r(e.key);
+		n.kind === "move" ? (e.preventDefault(), N(i(t(document.activeElement), n.dir, M))) : n.kind === "close" && (n.returnFocus && (e.preventDefault(), e.stopPropagation()), P(n.returnFocus));
+	}, I = (e) => {
+		e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), E(!0)) : e.key === "Escape" && T && (e.stopPropagation(), P(!0));
+	};
+	return /* @__PURE__ */ s("div", {
+		...w,
+		className: e("kapi-dropdown", C),
+		children: [/* @__PURE__ */ s("button", {
+			ref: A,
+			id: O,
+			type: "button",
+			className: "kapi-filterchip",
+			onClick: () => E((e) => !e),
+			onKeyDown: I,
+			"aria-haspopup": "listbox",
+			"aria-expanded": T,
+			"aria-controls": T ? k : void 0,
+			children: [
+				y,
+				b && /* @__PURE__ */ s("span", {
+					className: "kapi-dropdown__label",
+					children: [b, ":"]
+				}),
+				/* @__PURE__ */ o("span", {
+					className: "kapi-strong kapi-dropdown__value",
+					children: g
+				}),
+				/* @__PURE__ */ o(p, {
+					size: 14,
+					strokeWidth: 2.2,
+					color: "var(--kapi-muted-2)"
+				})
+			]
+		}), T && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("div", {
+			className: "kapi-dropdown__backdrop",
+			onClick: () => E(!1)
+		}), /* @__PURE__ */ o("div", {
+			className: m(x),
+			style: { minWidth: S },
+			role: "listbox",
+			id: k,
+			"aria-labelledby": O,
+			ref: j,
+			onKeyDown: F,
+			children: _.map((e, t) => /* @__PURE__ */ s("button", {
+				type: "button",
+				role: "option",
+				"aria-selected": e === g,
+				tabIndex: -1,
+				"data-menu-index": t,
+				className: h(e === g),
+				onClick: () => {
+					v(e), P(!0);
+				},
+				children: [e, e === g && /* @__PURE__ */ o(f, {
+					size: 14,
+					strokeWidth: 2.6,
+					color: "var(--kapi-primary)"
+				})]
+			}, e))
+		})] })]
+	});
+};
+//#endregion
+export { g as KapiDropdown, h as dropdownItemClass, m as dropdownMenuClass };

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

@@ -0,0 +1,14 @@
+import "./KapiModal.css";
+import { type KapiRootProps } from "../rootProps";
+/** `className`/`style`/`id` van a la tarjeta del spinner (la capa del `<dialog>` cubre la pantalla). */
+export type KapiLoadingProps = KapiRootProps & {
+    /** Muestra u oculta la capa de carga (controlado). */
+    open: boolean;
+    /** Texto bajo el spinner; también nombra al diálogo. */
+    message?: string;
+};
+/**
+ * Overlay bloqueante con spinner + mensaje. Controlado por `open`.
+ * Sobre `<dialog>` modal: bloquea clicks, teclado (focus trap) y scroll del body.
+ */
+export declare const KapiLoading: ({ open, message, ...surface }: KapiLoadingProps) => import("react").JSX.Element | null;

package/dist/components/overlays/KapiLoading.js

@@ -0,0 +1,43 @@
+"use client";
+import { joinClasses as e } from "../rootProps.js";
+import { getPortalRoot as t, useNativeDialog as n } from "./useNativeDialog.js";
+/* empty css              */
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useId as a } from "react";
+import { createPortal as o } from "react-dom";
+//#region src/components/overlays/KapiLoading.tsx
+var s = ({ message: t, root: s, className: c, style: l, id: u }) => {
+	let d = a(), { ref: f, dialogProps: p } = n();
+	return o(/* @__PURE__ */ r("dialog", {
+		ref: f,
+		className: "kapi-loading-overlay kapi-loading-dialog",
+		role: "alertdialog",
+		"aria-modal": "true",
+		"aria-busy": "true",
+		"aria-labelledby": d,
+		tabIndex: -1,
+		...p,
+		children: /* @__PURE__ */ i("div", {
+			id: u,
+			className: e("kapi-loading", c),
+			style: l,
+			children: [/* @__PURE__ */ r("span", {
+				className: "kapi-spinner",
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ r("span", {
+				id: d,
+				className: "kapi-loading__msg",
+				children: t
+			})]
+		})
+	}), s);
+}, c = ({ open: e, message: n = "Cargando…", ...i }) => {
+	let a = e ? t() : null;
+	return a ? /* @__PURE__ */ r(s, {
+		...i,
+		message: n,
+		root: a
+	}) : null;
+};
+//#endregion
+export { c as KapiLoading };

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

@@ -0,0 +1,25 @@
+import { type ReactNode } from "react";
+import { type KapiButtonVariant } from "../inputs/KapiButton";
+import { type KapiMenuItem } from "./KapiContextMenu";
+import "./overlays.css";
+import { type KapiRootProps } from "../rootProps";
+/** `className`/`style`/`id` go to the wrapper `<span>` around the trigger (the menu is portaled). */
+export type KapiMenuButtonProps = KapiRootProps & {
+    /** Texto del botón disparador. */
+    label: ReactNode;
+    /** Ítems del menú que se abre al hacer click, en orden. */
+    items: KapiMenuItem[];
+    /** Icon (lucide-react) shown before the label. */
+    icon?: ReactNode;
+    /** Variante visual del botón disparador (la de `KapiButton`). */
+    variant?: KapiButtonVariant;
+    /** Nombre accesible del botón disparador (p. ej. si `label` es solo un ícono). */
+    "aria-label"?: string;
+    /** `up` prefers opening upwards; it still flips when it does not fit. */
+    drop?: "down" | "up";
+};
+/**
+ * Button that opens an action menu anchored to its left or right edge (whichever has room). The menu is portaled to `.kapi`
+ * (escapes overflow), positioned `fixed` and flips up/down when it does not fit.
+ */
+export declare const KapiMenuButton: ({ label, items, icon, variant, "aria-label": ariaLabel, drop, className, style: wrapStyle, id }: KapiMenuButtonProps) => import("react").JSX.Element;

package/dist/components/overlays/KapiMenuButton.js

@@ -0,0 +1,109 @@
+"use client";
+import { KapiButton as e } from "../inputs/KapiButton.js";
+import { resolveKapiRoot as t } from "../../hooks/kapiRoot.js";
+import { usePlacement as n } from "../../hooks/usePlacement.js";
+import { joinClasses as r } from "../rootProps.js";
+/* empty css             */
+import { ACTION_MENU_PLACEMENT as i, nextMenuIndex as a } from "./menuButtonLogic.js";
+import { menuItemClass as o } from "./KapiContextMenu.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useCallback as l, useEffect as u, useId as d, useLayoutEffect as f, useRef as p, useState as m } from "react";
+import { ChevronDown as h } from "lucide-react";
+import { createPortal as g } from "react-dom";
+//#region src/components/overlays/KapiMenuButton.tsx
+var _ = 6, v = ({ label: v, items: y, icon: b, variant: x = "default", "aria-label": S, drop: C = "down", className: w, style: T, id: E }) => {
+	let D = d(), [O, k] = m(!1), A = p(null), j = p(null), M = p(null), N = l((e) => {
+		k(!1), e && j.current?.focus();
+	}, []), P = (e) => {
+		M.current?.querySelector(`[data-menu-index="${e}"]`)?.focus();
+	}, { placement: F, style: I, update: L } = n({
+		open: O,
+		anchor: j,
+		floatingRef: M,
+		...i,
+		side: C === "up" ? "top" : "bottom",
+		offset: _,
+		hideUntilPlaced: !1
+	});
+	f(() => {
+		O && L();
+	}, [
+		O,
+		y.length,
+		L
+	]), u(() => {
+		if (!O) return;
+		let e = (e) => {
+			let t = e.target;
+			t && (A.current?.contains(t) || M.current?.contains(t)) || k(!1);
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [O]), u(() => {
+		O && P(a(-1, "first", y));
+	}, [O]);
+	let R = (e) => {
+		let t = {
+			ArrowDown: "next",
+			ArrowUp: "prev",
+			Home: "first",
+			End: "last"
+		}[e.key];
+		if (t) {
+			e.preventDefault();
+			let n = document.activeElement?.getAttribute("data-menu-index");
+			P(a(n == null ? -1 : Number(n), t, y));
+		} else e.key === "Escape" ? (e.preventDefault(), e.stopPropagation(), N(!0)) : e.key === "Tab" && N(!1);
+	}, z = (e) => {
+		e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), k(!0)) : e.key === "Escape" && O && (e.stopPropagation(), N(!0));
+	}, B = O ? t(A.current) : null;
+	return /* @__PURE__ */ c("span", {
+		ref: A,
+		id: E,
+		className: r("kapi-menubtn", w),
+		style: T,
+		children: [/* @__PURE__ */ c(e, {
+			ref: j,
+			variant: x,
+			icon: b,
+			"aria-label": S,
+			"aria-haspopup": "menu",
+			"aria-expanded": O,
+			"aria-controls": O ? D : void 0,
+			onClick: () => k((e) => !e),
+			onKeyDown: z,
+			children: [v, /* @__PURE__ */ s(h, {
+				size: 15,
+				strokeWidth: 2.2,
+				"aria-hidden": "true"
+			})]
+		}), B && g(/* @__PURE__ */ s("div", {
+			ref: M,
+			id: D,
+			role: "menu",
+			className: `kapi-ctxmenu kapi-menubtn__menu kapi-menubtn__menu--${F?.side === "top" ? "top" : "bottom"} kapi-menubtn__menu--${F?.align === "end" ? "right" : "left"}`,
+			style: I,
+			onKeyDown: R,
+			children: y.map((e, t) => e.sep ? /* @__PURE__ */ s("div", {
+				role: "separator",
+				className: "kapi-ctxmenu__sep"
+			}, `s${t}`) : "header" in e ? /* @__PURE__ */ s("div", {
+				role: "presentation",
+				className: "kapi-ctxmenu__header",
+				children: e.header
+			}, `h${t}`) : /* @__PURE__ */ c("button", {
+				type: "button",
+				role: "menuitem",
+				tabIndex: -1,
+				"data-menu-index": t,
+				"aria-disabled": e.disabled ? "true" : void 0,
+				className: o(e),
+				onClick: () => {
+					e.disabled || (N(!0), e.onClick?.());
+				},
+				children: [e.icon, e.label]
+			}, `${e.label}-${t}`))
+		}), B)]
+	});
+};
+//#endregion
+export { v as KapiMenuButton };

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

@@ -0,0 +1,61 @@
+import { type CSSProperties, type ReactNode } from "react";
+import { type GrowOrigin } from "../../hooks/growOriginLogic";
+import { type KapiModalSize } from "./dialogUtils";
+import "./KapiModal.css";
+import type { KapiLabelsOverride } from "../labelsLogic";
+export type { KapiModalSize } from "./dialogUtils";
+export type KapiModalLabels = {
+    close: string;
+};
+export declare const DEFAULT_MODAL_LABELS: KapiModalLabels;
+export type KapiModalProps = {
+    /** Muestra u oculta el modal (controlado). Con `false` anima la salida y se desmonta. */
+    open: boolean;
+    /** Título del header (también nombra al diálogo para lectores de pantalla). */
+    title?: ReactNode | undefined;
+    /** Texto secundario bajo el título. */
+    subtitle?: ReactNode | undefined;
+    /** Pedido de cierre (X, click en el fondo, Escape). El padre pone `open={false}`. */
+    onClose: () => void;
+    /** Contenido del cuerpo (con scroll propio). */
+    children?: ReactNode | undefined;
+    /** Zona fija inferior (botones). */
+    footer?: ReactNode | undefined;
+    /** Ancho: sm 460 · md 760 (default) · lg 980 · full pantalla completa. */
+    size?: KapiModalSize | undefined;
+    /** Sin header: queda sólo la X flotante (usado por KapiConfirm). */
+    hideHeader?: boolean | undefined;
+    /** Clase de la tarjeta del modal. */
+    className?: string | undefined;
+    /** Estilo de la tarjeta del modal. */
+    style?: CSSProperties | undefined;
+    /** id de la tarjeta del modal. */
+    id?: string | undefined;
+    /** Click en el fondo cierra. Default true. */
+    closeOnBackdrop?: boolean | undefined;
+    /** Escape cierra. Default true. */
+    closeOnEscape?: boolean | undefined;
+    /** Nombre accesible de la X. Gana sobre `labels.close` ("Cerrar"). */
+    closeLabel?: string | undefined;
+    /** Textos fijos (clave `modal`). */
+    labels?: KapiLabelsOverride<KapiModalLabels> | undefined;
+    /** Nombre accesible del diálogo; gana sobre el título (default: el header, o `title` string sin header). */
+    "aria-label"?: string | undefined;
+    /** id de un elemento que nombra al diálogo; gana sobre `aria-label` y el título. */
+    "aria-labelledby"?: string | undefined;
+    /**
+     * Centro (coordenadas de viewport) del botón que abrió el modal, p. ej. de `useGrowOrigin()`.
+     * Con valor, la tarjeta crece desde ahí; sin valor (o con reduced-motion) no cambia nada.
+     */
+    growFrom?: GrowOrigin | null | undefined;
+};
+/**
+ * Modal genérico sobre `<dialog>` nativo (`showModal()`): focus trap,
+ * Escape, `inert` del fondo y restauración de foco gratis, más bloqueo de scroll
+ * del body. Controlado con `open` + `onClose`, dentro de `.kapi`; cada apertura
+ * monta el diálogo de cero (foco inicial, estado interno).
+ * Al cerrar anima la salida (la duración sale del CSS, `useExitPresence`) y luego se desmonta; sin
+ * movimiento (reduced-motion) se desmonta de inmediato.
+ * Zonas: head fijo · body con scroll · footer fijo.
+ */
+export declare const KapiModal: ({ open, ...props }: KapiModalProps) => import("react").JSX.Element | null;

package/dist/components/overlays/KapiModal.js

@@ -0,0 +1,106 @@
+"use client";
+import { useLabels as e } from "../locale/KapiLocaleProvider.js";
+import { prefersReducedMotion as t } from "../../hooks/reducedMotion.js";
+import { dialogNameProps as n, modalClasses as r } from "./dialogUtils.js";
+import { useExitPresence as i } from "./useExitPresence.js";
+import { originWithinCard as a } from "../../hooks/growOriginLogic.js";
+import { getPortalRoot as o, useBackdropClose as s, useNativeDialog as c } from "./useNativeDialog.js";
+/* empty css              */
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useId as d, useLayoutEffect as f, useRef as p, useState as m } from "react";
+import { X as h } from "lucide-react";
+import { createPortal as g } from "react-dom";
+//#region src/components/overlays/KapiModal.tsx
+var _ = { close: "Cerrar" }, v = ({ open: e, ...t }) => {
+	let n = p(null), { present: r, closing: a } = i(e, n);
+	return r ? /* @__PURE__ */ l(b, {
+		...t,
+		dialogRef: n,
+		closing: a
+	}) : null;
+}, y = () => {}, b = ({ title: i, subtitle: v, onClose: b, children: x, footer: S, size: C = "md", hideHeader: w = !1, className: T = "", style: E, id: D, closeOnBackdrop: O = !0, closeOnEscape: k = !0, closeLabel: A, labels: j, "aria-label": M, "aria-labelledby": N, growFrom: P, dialogRef: F, closing: I }) => {
+	let L = I ? y : b, R = d(), z = e("modal", _, j), B = A ?? z.close, V = p(null), [H, U] = m(null), { ref: W, dialogProps: G } = c({ onRequestClose: k ? L : void 0 }), K = s(O ? L : void 0);
+	f(() => {
+		let e = V.current;
+		if (!P || !e || t(e)) {
+			U(null);
+			return;
+		}
+		let n = e.getBoundingClientRect(), r = e.offsetWidth, i = e.offsetHeight, o = n.left + n.width / 2, s = n.top + n.height / 2;
+		U(a(P, {
+			left: o - r / 2,
+			top: s - i / 2,
+			width: r,
+			height: i
+		}));
+	}, [P]);
+	let q = o();
+	return q ? g(/* @__PURE__ */ l("dialog", {
+		ref: (e) => {
+			W.current = e, F.current = e;
+		},
+		className: "kapi-modal-overlay kapi-modal-dialog",
+		"data-closing": I || void 0,
+		"aria-modal": "true",
+		...n({
+			titleId: R,
+			title: i,
+			hideHeader: w,
+			"aria-label": M,
+			"aria-labelledby": N
+		}),
+		...G,
+		...K,
+		children: /* @__PURE__ */ u("div", {
+			ref: V,
+			id: D,
+			className: `${r(C, T)}${H ? " kapi-modal--grow" : ""}`,
+			style: H ? {
+				...E,
+				"--kapi-grow-x": `${H.x}px`,
+				"--kapi-grow-y": `${H.y}px`
+			} : E,
+			children: [
+				w ? /* @__PURE__ */ l("button", {
+					type: "button",
+					className: "kapi-modal__x kapi-modal__x--float",
+					onClick: L,
+					"aria-label": B,
+					children: /* @__PURE__ */ l(h, {
+						size: 17,
+						strokeWidth: 2.2
+					})
+				}) : /* @__PURE__ */ u("div", {
+					className: "kapi-modal__head",
+					children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("div", {
+						id: R,
+						className: "kapi-modal__title",
+						children: i
+					}), v && /* @__PURE__ */ l("div", {
+						className: "kapi-modal__sub",
+						children: v
+					})] }), /* @__PURE__ */ l("button", {
+						type: "button",
+						className: "kapi-modal__x",
+						onClick: L,
+						"aria-label": B,
+						children: /* @__PURE__ */ l(h, {
+							size: 17,
+							strokeWidth: 2.2
+						})
+					})]
+				}),
+				/* @__PURE__ */ l("div", {
+					className: "kapi-modal__body",
+					children: x
+				}),
+				S && /* @__PURE__ */ l("div", {
+					className: "kapi-modal__foot",
+					children: S
+				})
+			]
+		})
+	}), q) : null;
+};
+//#endregion
+export { _ as DEFAULT_MODAL_LABELS, v as KapiModal };