@kapiuara/ui 0.0.0-stage → 0.1.0

package/dist/components/display/KapiFileItem.js

@@ -0,0 +1,74 @@
+"use client";
+import { useKapiLocale as e } from "../locale/KapiLocaleProvider.js";
+import { joinClasses as t } from "../rootProps.js";
+import { formatFileSize as n } from "../../hooks/downloadLogic.js";
+import { formatDate as r, isoDateTime as i } from "../../hooks/dateFormat.js";
+import { fileItemKind as a, fileMetaParts as o } from "./fileItemLogic.js";
+/* empty css                 */
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { File as l, FileCode as u, FileImage as d, FileText as f } from "lucide-react";
+//#region src/components/display/KapiFileItem.tsx
+var p = {
+	pdf: f,
+	image: d,
+	text: u,
+	other: l
+}, m = ({ name: l, mimeType: u, size: d, date: f, details: m, icon: h, status: g, actions: _, onOpen: v, ref: y, className: b, ...x }) => {
+	let S = e() ?? "es", C = a(u, l), w = p[C], T = f === void 0 ? null : i(f), E = T === null || f === void 0 ? null : /* @__PURE__ */ s("time", {
+		dateTime: T,
+		children: r(f, S)
+	}, "date"), D = o(m, d === void 0 ? "" : n(d, S), E);
+	return /* @__PURE__ */ c("li", {
+		...x,
+		ref: y,
+		className: t("kapi-file", b),
+		children: [
+			/* @__PURE__ */ s("span", {
+				className: `kapi-file__icon kapi-file__icon--${C}`,
+				"aria-hidden": "true",
+				children: h ?? /* @__PURE__ */ s(w, {
+					size: 18,
+					strokeWidth: 1.9
+				})
+			}),
+			/* @__PURE__ */ c("span", {
+				className: "kapi-file__body",
+				children: [v ? /* @__PURE__ */ s("button", {
+					type: "button",
+					className: "kapi-file__name kapi-file__name--btn",
+					title: l,
+					onClick: v,
+					children: l
+				}) : /* @__PURE__ */ s("span", {
+					className: "kapi-file__name",
+					title: l,
+					children: l
+				}), D.length > 0 && /* @__PURE__ */ s("span", {
+					className: "kapi-file__meta",
+					children: D.map((e, t) => /* @__PURE__ */ c("span", {
+						className: "kapi-file__part",
+						children: [t > 0 && /* @__PURE__ */ s("span", {
+							className: "kapi-file__sep",
+							"aria-hidden": "true",
+							children: " · "
+						}), e]
+					}, t))
+				})]
+			}),
+			g != null && g !== !1 && /* @__PURE__ */ s("span", {
+				className: "kapi-file__status",
+				children: g
+			}),
+			_ != null && _ !== !1 && /* @__PURE__ */ s("span", {
+				className: "kapi-file__actions",
+				children: _
+			})
+		]
+	});
+}, h = ({ className: e, ref: n, ...r }) => /* @__PURE__ */ s("ul", {
+	...r,
+	ref: n,
+	className: t("kapi-filelist", e)
+});
+//#endregion
+export { m as KapiFileItem, h as KapiFileList };

package/dist/components/display/KapiFileViewer.d.ts

@@ -0,0 +1,51 @@
+import type { HTMLAttributes, Ref } from "react";
+import "./KapiFileViewer.css";
+import type { KapiLabelsOverride } from "../labelsLogic";
+export type KapiFileViewerProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "title"> & {
+    /**
+     * Archivo a mostrar: una URL o un Blob (p. ej. la respuesta de una API). Solo URLs relativas,
+     * `http(s):`, `blob:` o `data:` de imagen/PDF. El PDF va en un `<object>` sin sandbox: si una URL
+     * del mismo origen devuelve HTML (un archivo subido por usuarios con un Content-Type errado), ese
+     * HTML corre en el origen de la app. Para contenido no confiable, pasa un Blob con su `type`.
+     */
+    src: string | Blob;
+    /** Nombre del archivo: se muestra en la barra y es el nombre de la descarga. Sin él, sale del `File` o de la URL. */
+    fileName?: string;
+    /** Tipo MIME. Sin él, se infiere del tipo del Blob o de la extensión del nombre/URL. */
+    type?: string;
+    /** Nombre accesible del visor (alt de la imagen, título del documento). Sin él, usa el nombre del archivo. */
+    title?: string;
+    /**
+     * Alto del área del documento (cualquier largo CSS). Las imágenes lo usan como alto máximo.
+     * @default "min(70vh, 640px)"
+     */
+    height?: string;
+    /**
+     * Ofrece descargar el archivo (en la barra y en el aviso cuando no se puede mostrar). Con una URL de
+     * otro origen el navegador ignora el nombre de `download` (y puede abrirla en vez de descargarla).
+     */
+    downloadable?: boolean;
+    /** Muestra la barra superior con el nombre y las acciones. */
+    toolbar?: boolean;
+    /** Textos fijos (clave `fileViewer`). */
+    labels?: KapiLabelsOverride<KapiFileViewerLabels> | undefined;
+    /** Ref al contenedor raíz. */
+    ref?: Ref<HTMLDivElement>;
+};
+export type KapiFileViewerLabels = {
+    /** Botón de descarga. */
+    download: string;
+    /** Enlace que abre la URL en otra pestaña. */
+    openNewTab: string;
+    /** Aviso cuando el navegador no puede mostrar el archivo. */
+    unsupported: string;
+    /** Nombre del visor cuando no hay `title` ni nombre de archivo. */
+    file: string;
+};
+export declare const DEFAULT_FILE_VIEWER_LABELS: KapiFileViewerLabels;
+/**
+ * Visor de archivos: PDF (`<object>`, con aviso y descarga si el navegador no tiene visor, p. ej. en
+ * móviles), imágenes, texto plano y, para el resto, una tarjeta con el nombre y la descarga.
+ * Acepta una URL o un Blob (se crea y revoca su URL temporal).
+ */
+export declare function KapiFileViewer({ src, fileName, type, title, height, downloadable, toolbar, labels, className, style, ref, ...rest }: KapiFileViewerProps): import("react").JSX.Element;

package/dist/components/display/KapiFileViewer.js

@@ -0,0 +1,107 @@
+"use client";
+import { buttonClasses as e } from "../inputs/KapiButton.js";
+import { useLabels as t } from "../locale/KapiLocaleProvider.js";
+import { joinClasses as n } from "../rootProps.js";
+import { fileKind as r, fileNameFromUrl as i, isSafeFileUrl as a } from "../../hooks/downloadLogic.js";
+import { useObjectUrl as o } from "../../hooks/useObjectUrl.js";
+/* empty css                   */
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Download as l, ExternalLink as u, FileText as d } from "lucide-react";
+//#region src/components/display/KapiFileViewer.tsx
+var f = {
+	download: "Descargar",
+	openNewTab: "Abrir en otra pestaña",
+	unsupported: "No se puede mostrar este archivo aquí.",
+	file: "Archivo"
+}, p = (e, t) => t || (typeof e == "string" ? i(e) : typeof File < "u" && e instanceof File && e.name ? e.name : null), m = (e, t, n) => {
+	let i = t || (typeof e == "string" ? "" : e.type);
+	if (i) {
+		let e = r(i);
+		return e !== "other" || !n ? e : /^application\/octet-stream/i.test(i) ? r(n) : e;
+	}
+	return r(n ?? (typeof e == "string" ? e : ""));
+};
+function h({ src: r, fileName: i, type: h, title: g, height: _, downloadable: v = !0, toolbar: y = !0, labels: b, className: x, style: S, ref: C, ...w }) {
+	let T = t("fileViewer", f, b), E = o(typeof r == "string" ? null : r), D = typeof r == "string" && !a(r), O = typeof r == "string" ? D ? null : r : E, k = p(r, i), A = m(r, h, k), j = g ?? k ?? T.file, M = _ ? {
+		...S,
+		"--kapi-file-viewer-h": _
+	} : S, N = (t) => v && O ? /* @__PURE__ */ c("a", {
+		className: e({
+			size: "sm",
+			className: t
+		}),
+		href: O,
+		download: k ?? "",
+		children: [/* @__PURE__ */ s(l, {
+			size: 15,
+			"aria-hidden": !0
+		}), T.download]
+	}) : null, P = /* @__PURE__ */ c("div", {
+		className: "kapi-file-viewer__fallback",
+		children: [
+			/* @__PURE__ */ s(d, {
+				size: 32,
+				strokeWidth: 1.6,
+				className: "kapi-file-viewer__fallback-icon",
+				"aria-hidden": !0
+			}),
+			k && /* @__PURE__ */ s("p", {
+				className: "kapi-file-viewer__fallback-name",
+				children: k
+			}),
+			/* @__PURE__ */ s("p", {
+				className: "kapi-file-viewer__fallback-text",
+				children: T.unsupported
+			}),
+			N()
+		]
+	}), F = D ? P : null;
+	return O && (F = A === "pdf" ? /* @__PURE__ */ s("object", {
+		className: "kapi-file-viewer__frame",
+		type: "application/pdf",
+		data: O,
+		"aria-label": j,
+		children: P
+	}) : A === "image" ? /* @__PURE__ */ s("img", {
+		className: "kapi-file-viewer__img",
+		src: O,
+		alt: j
+	}) : A === "text" ? /* @__PURE__ */ s("iframe", {
+		className: "kapi-file-viewer__frame",
+		src: O,
+		title: j,
+		sandbox: ""
+	}) : P), /* @__PURE__ */ c("div", {
+		...w,
+		ref: C,
+		className: n("kapi-file-viewer", `kapi-file-viewer--${A}`, x),
+		style: M,
+		children: [y && /* @__PURE__ */ c("div", {
+			className: "kapi-file-viewer__bar",
+			children: [/* @__PURE__ */ s("span", {
+				className: "kapi-file-viewer__name",
+				children: k ?? j
+			}), /* @__PURE__ */ c("span", {
+				className: "kapi-file-viewer__actions",
+				children: [typeof r == "string" && O && /* @__PURE__ */ c("a", {
+					className: e({
+						size: "sm",
+						variant: "ghost"
+					}),
+					href: O,
+					target: "_blank",
+					rel: "noopener noreferrer",
+					children: [/* @__PURE__ */ s(u, {
+						size: 15,
+						"aria-hidden": !0
+					}), T.openNewTab]
+				}), A !== "other" && N()]
+			})]
+		}), /* @__PURE__ */ s("div", {
+			className: "kapi-file-viewer__body",
+			children: F
+		})]
+	});
+}
+//#endregion
+export { f as DEFAULT_FILE_VIEWER_LABELS, h as KapiFileViewer };

package/dist/components/display/KapiIconTile.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { type KapiIconTileSize, type KapiIconTileTone } from "./iconTileLogic";
+import "./display.css";
+export type { KapiIconTileSize, KapiIconTileTone };
+export type KapiIconTileProps = Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
+    /** The icon (e.g. a lucide element). Decorative unless `aria-label` is given. */
+    icon: ReactNode;
+    /** Rol semántico que define el color del fondo y del ícono. */
+    tone?: KapiIconTileTone;
+    /** Softer `*-bg` fill with a tone-colored icon, instead of the solid fill. */
+    soft?: boolean;
+    /** `sm` 36 · `md` 48 · `lg` 56, or an exact px number. */
+    size?: KapiIconTileSize;
+};
+/** Rounded square holding an icon. Solid by default so it survives dark mode (tokens do the rest). */
+export declare function KapiIconTile({ icon, tone, soft, size, className, style, "aria-label": ariaLabel, ...rest }: KapiIconTileProps): import("react").JSX.Element;

package/dist/components/display/KapiIconTile.js

@@ -0,0 +1,29 @@
+"use client";
+/* empty css            */
+import { iconTileClasses as e, iconTileRadiusPx as t, iconTileSizePx as n } from "./iconTileLogic.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/display/KapiIconTile.tsx
+function i({ icon: i, tone: a = "primary", soft: o = !1, size: s = "md", className: c, style: l, "aria-label": u, ...d }) {
+	let f = n(s), p = {
+		width: f,
+		height: f,
+		borderRadius: t(f),
+		"--kapi-icontile-icon": `${Math.round(f * .5)}px`,
+		...l
+	};
+	return /* @__PURE__ */ r("span", {
+		className: e({
+			tone: a,
+			soft: o,
+			className: c
+		}),
+		style: p,
+		role: u ? "img" : void 0,
+		"aria-label": u,
+		"aria-hidden": !u || void 0,
+		...d,
+		children: i
+	});
+}
+//#endregion
+export { i as KapiIconTile };

package/dist/components/display/KapiStat.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { type KapiIconTileSize, type KapiIconTileTone } from "./KapiIconTile";
+import { type KapiStatTone } from "./statLogic";
+import "./display.css";
+export type KapiStatProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Rótulo en versalitas (ej. "Matriculados"). */
+    label: ReactNode;
+    /** Valor principal, en grande (número, monto…). */
+    value: ReactNode;
+    /** Línea secundaria bajo el valor (variación, período…). */
+    note?: ReactNode;
+    /** Color del valor/nota según el significado (success = bien, danger = alerta…). */
+    tone?: KapiStatTone;
+    /** Ícono (lucide) en un `KapiIconTile` a la izquierda del contenido. Decorativo. */
+    icon?: ReactNode;
+    /** Tono del tile. Por defecto sigue a `tone` (y `primary` si `tone` es neutral). */
+    iconTone?: KapiIconTileTone;
+    /** Tile suave (fondo `*-bg`, ícono del tono) en vez de relleno sólido. */
+    iconSoft?: boolean;
+    /** Tamaño del tile (default `sm`). */
+    iconSize?: KapiIconTileSize;
+};
+/** Tarjeta de KPI. Agrupalas en un `.kapi-statgrid` para una fila responsive. */
+export declare function KapiStat({ label, value, note, tone, icon, iconTone, iconSoft, iconSize, className, ...rest }: KapiStatProps): import("react").JSX.Element;

package/dist/components/display/KapiStat.js

@@ -0,0 +1,41 @@
+"use client";
+/* empty css            */
+import { KapiIconTile as e } from "./KapiIconTile.js";
+import { statClasses as t, statIconTone as n } from "./statLogic.js";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/display/KapiStat.tsx
+function o({ label: o, value: s, note: c, tone: l = "neutral", icon: u, iconTone: d, iconSoft: f = !1, iconSize: p = "sm", className: m, ...h }) {
+	let g = u != null, _ = /* @__PURE__ */ a(r, { children: [
+		/* @__PURE__ */ i("div", {
+			className: "kapi-ct",
+			children: o
+		}),
+		/* @__PURE__ */ i("div", {
+			className: "kapi-statcard__v",
+			children: s
+		}),
+		c != null && /* @__PURE__ */ i("div", {
+			className: "kapi-muted kapi-statcard__n",
+			children: c
+		})
+	] });
+	return /* @__PURE__ */ i("div", {
+		className: t({
+			tone: l,
+			hasIcon: g,
+			className: m
+		}),
+		...h,
+		children: g ? /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(e, {
+			icon: u,
+			tone: n(l, d),
+			soft: f,
+			size: p
+		}), /* @__PURE__ */ i("div", {
+			className: "kapi-statcard__body",
+			children: _
+		})] }) : _
+	});
+}
+//#endregion
+export { o as KapiStat };

package/dist/components/display/KapiTag.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { type KapiTagSize, type KapiTagTone } from "./tagLogic";
+import "./display.css";
+import type { KapiLabelsOverride } from "../labelsLogic";
+export type KapiTagProps = Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
+    /** Rol semántico (color). */
+    tone?: KapiTagTone | undefined;
+    /** Tamaño: `sm` · `md`. */
+    size?: KapiTagSize | undefined;
+    /** Ícono decorativo a la izquierda del texto. */
+    icon?: ReactNode | undefined;
+    /** Si viene, se muestra un botón × que lo invoca. */
+    onRemove?: (() => void) | undefined;
+    /** Etiqueta accesible del botón ×. Gana sobre `labels.remove`. */
+    removeLabel?: string | undefined;
+    /** Textos fijos (clave `tag`). */
+    labels?: KapiLabelsOverride<KapiTagLabels> | undefined;
+    /** Texto del tag. */
+    children?: ReactNode | undefined;
+};
+export type KapiTagLabels = {
+    /** Nombre accesible del botón ×. */
+    remove: string;
+};
+export declare const DEFAULT_TAG_LABELS: KapiTagLabels;
+/** Chip de etiqueta (filtros, categorías). A diferencia del badge, puede quitarse. */
+export declare function KapiTag({ tone, size, icon, onRemove, removeLabel, labels, className, children, ...rest }: KapiTagProps): import("react").JSX.Element;

package/dist/components/display/KapiTag.js

@@ -0,0 +1,44 @@
+"use client";
+import { useLabels as e } from "../locale/KapiLocaleProvider.js";
+import { tagClasses as t } from "./tagLogic.js";
+/* empty css            */
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { X as i } from "lucide-react";
+//#region src/components/display/KapiTag.tsx
+var a = { remove: "Quitar" };
+function o({ tone: o = "neutral", size: s = "md", icon: c, onRemove: l, removeLabel: u, labels: d, className: f, children: p, ...m }) {
+	let h = e("tag", a, d);
+	return /* @__PURE__ */ r("span", {
+		className: t({
+			tone: o,
+			size: s,
+			removable: !!l,
+			className: f
+		}),
+		...m,
+		children: [
+			c != null && /* @__PURE__ */ n("span", {
+				className: "kapi-tag__icon",
+				"aria-hidden": !0,
+				children: c
+			}),
+			/* @__PURE__ */ n("span", {
+				className: "kapi-tag__text",
+				children: p
+			}),
+			l && /* @__PURE__ */ n("button", {
+				type: "button",
+				className: "kapi-tag__remove",
+				"aria-label": u ?? h.remove,
+				onClick: l,
+				children: /* @__PURE__ */ n(i, {
+					size: s === "sm" ? 11 : 13,
+					strokeWidth: 2.4,
+					"aria-hidden": !0
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { a as DEFAULT_TAG_LABELS, o as KapiTag };

package/dist/components/display/KapiTimeline.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { type KapiTimelineTone } from "./timelineLogic";
+import "./display.css";
+export type KapiTimelineItem = {
+    text: ReactNode;
+    date?: ReactNode;
+    tone?: KapiTimelineTone;
+};
+/** Atributos nativos (`id`, `style`, `data-*`, `aria-*`…) van al `<ol>`. */
+export type KapiTimelineProps = Omit<HTMLAttributes<HTMLOListElement>, "children"> & {
+    /** Eventos en orden de aparición; cada uno con texto, fecha y tono opcionales. */
+    items: KapiTimelineItem[];
+};
+/** Línea de tiempo vertical (historial). El último ítem no dibuja conector. */
+export declare function KapiTimeline({ items, className, ...rest }: KapiTimelineProps): import("react").JSX.Element;

package/dist/components/display/KapiTimeline.js

@@ -0,0 +1,30 @@
+"use client";
+/* empty css            */
+import { showConnector as e, timelineDotClass as t } from "./timelineLogic.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/display/KapiTimeline.tsx
+function i({ items: i, className: a, ...o }) {
+	return /* @__PURE__ */ n("ol", {
+		...o,
+		className: ["kapi-timeline", a].filter(Boolean).join(" "),
+		children: i.map((a, o) => /* @__PURE__ */ r("li", {
+			className: "kapi-timeline__item",
+			children: [/* @__PURE__ */ r("div", {
+				className: "kapi-timeline__rail",
+				"aria-hidden": !0,
+				children: [/* @__PURE__ */ n("span", { className: t(a.tone) }), e(o, i.length) && /* @__PURE__ */ n("span", { className: "kapi-tl-line" })]
+			}), /* @__PURE__ */ r("div", {
+				className: "kapi-timeline__body",
+				children: [/* @__PURE__ */ n("div", {
+					className: "kapi-strong",
+					children: a.text
+				}), a.date != null && /* @__PURE__ */ n("div", {
+					className: "kapi-muted",
+					children: a.date
+				})]
+			})]
+		}, o))
+	});
+}
+//#endregion
+export { i as KapiTimeline };

package/dist/components/display/annotationLogic.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+export type KapiAnnotationUnderline = "dotted" | "solid" | "none";
+export type KapiAnnotationTone = "primary" | "info" | "warning" | "neutral";
+/** Clases del término anotado. Pura: es lo que se testea (no el markup). */
+export declare const annotationClasses: ({ underline, tone, clickable, className }?: {
+    underline?: KapiAnnotationUnderline | undefined;
+    tone?: KapiAnnotationTone | undefined;
+    clickable?: boolean | undefined;
+    className?: string | undefined;
+}) => string;
+export type KapiAnnotationRole = {
+    /** Elemento HTML del término: button si es clickeable, span si no. */
+    element: "span" | "button";
+    /** tabIndex a aplicar (el button ya es focuseable; el span lo necesita para el foco por teclado). */
+    tabIndex: number | undefined;
+    /** "tooltip" = KapiTooltip simple; "popover" = burbuja local con título/cuerpo. */
+    mode: "tooltip" | "popover";
+};
+/**
+ * Decide elemento y modo. Popover si hay `popover` o si `info` no es texto plano
+ * (KapiTooltip sólo acepta string).
+ */
+export declare const annotationRole: (onClick: (() => void) | undefined, popover: {
+    title?: ReactNode;
+    body: ReactNode;
+} | undefined, info?: ReactNode) => KapiAnnotationRole;

package/dist/components/display/annotationLogic.js

@@ -0,0 +1,17 @@
+//#region src/components/display/annotationLogic.ts
+var e = ({ underline: e = "dotted", tone: t = "primary", clickable: n = !1, className: r = "" } = {}) => [
+	"kapi-annotation",
+	`kapi-annotation--${t}`,
+	`kapi-annotation--${e}`,
+	n && "kapi-annotation--clickable",
+	r
+].filter(Boolean).join(" "), t = (e, t, n) => {
+	let r = typeof e == "function";
+	return {
+		element: r ? "button" : "span",
+		tabIndex: r ? void 0 : 0,
+		mode: t || typeof n != "string" && typeof n != "number" && n !== void 0 ? "popover" : "tooltip"
+	};
+};
+//#endregion
+export { e as annotationClasses, t as annotationRole };

package/dist/components/display/avatarGroupLogic.d.ts

@@ -0,0 +1,14 @@
+export type AvatarGroupSplit<T> = {
+    visible: T[];
+    overflow: number;
+};
+/**
+ * Caps a list at `max` visible items; `overflow` is how many were left out.
+ * `max` is floored and clamped to >= 0. If exactly one item would overflow it is
+ * shown instead, since a "+1" tile is no smaller than the avatar it hides.
+ */
+export declare const splitAvatarGroup: <T>(items: readonly T[], max?: number) => AvatarGroupSplit<T>;
+/** Label of the trailing tile. Counts above 99 collapse to "99+". */
+export declare const overflowLabel: (n: number) => string;
+/** Negative overlap in px for a given avatar size (about 22%). */
+export declare const avatarOverlapPx: (sizePx: number) => number;

package/dist/components/display/avatarGroupLogic.js

@@ -0,0 +1,13 @@
+//#region src/components/display/avatarGroupLogic.ts
+var e = (e, t = 4) => {
+	let n = Number.isFinite(t) ? Math.max(0, Math.floor(t)) : e.length;
+	return e.length <= n || e.length === n + 1 && n > 0 ? {
+		visible: [...e],
+		overflow: 0
+	} : {
+		visible: e.slice(0, n),
+		overflow: e.length - n
+	};
+}, t = (e) => e > 99 ? "99+" : `+${e}`, n = (e) => Math.round(e * .22);
+//#endregion
+export { n as avatarOverlapPx, t as overflowLabel, e as splitAvatarGroup };

package/dist/components/display/avatarLogic.d.ts

@@ -0,0 +1,5 @@
+/** Lógica pura del avatar (sin React): iniciales y color determinístico. */
+/** Hasta 2 letras mayúsculas con la inicial de las dos primeras palabras. "" si no hay nombre. */
+export declare const initialsFrom: (name: string) => string;
+/** Hash determinístico (djb2) de `key` mapeado a 0..n-1. `n <= 0` devuelve 0. */
+export declare const colorIndexFrom: (key: string, n: number) => number;

package/dist/components/display/avatarLogic.js

@@ -0,0 +1,9 @@
+//#region src/components/display/avatarLogic.ts
+var e = (e) => e.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((e) => Array.from(e)[0] ?? "").join("").toLocaleUpperCase(), t = (e, t) => {
+	if (t <= 0) return 0;
+	let n = 5381;
+	for (let t = 0; t < e.length; t++) n = (n << 5) + n + e.charCodeAt(t) >>> 0;
+	return n % t;
+};
+//#endregion
+export { t as colorIndexFrom, e as initialsFrom };

package/dist/components/display/commentLogic.d.ts

@@ -0,0 +1,18 @@
+/** Se puede enviar si hay texto que no sea solo espacio y el compositor no está deshabilitado ni enviando. */
+export declare const canSubmitComment: (text: string, { disabled, loading }?: {
+    disabled?: boolean | undefined;
+    loading?: boolean | undefined;
+}) => boolean;
+/** Ctrl+Enter o Cmd+Enter envían; Enter solo es salto de línea. Nunca en medio de una composición (IME). */
+export declare const isSubmitShortcut: (e: {
+    key: string;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    isComposing?: boolean | undefined;
+}) => boolean;
+/**
+ * Borrador que queda después de un envío que resolvió: lo enviado se quita del principio (lo escrito
+ * mientras el envío corría se conserva, sin repetir lo que ya se publicó); si el borrador cambió de otra
+ * forma, queda como está.
+ */
+export declare const draftAfterSubmit: (draft: string, sent: string) => string;

package/dist/components/display/commentLogic.js

@@ -0,0 +1,7 @@
+//#region src/components/display/commentLogic.ts
+var e = (e, { disabled: t = !1, loading: n = !1 } = {}) => !t && !n && e.trim().length > 0, t = (e) => e.key === "Enter" && (e.ctrlKey || e.metaKey) && !e.isComposing, n = (e, t) => {
+	let n = e.trimStart(), r = n.slice(t.length);
+	return !n.startsWith(t) || /^[\p{L}\p{N}]/u.test(r) ? e : r.trimStart();
+};
+//#endregion
+export { e as canSubmitComment, n as draftAfterSubmit, t as isSubmitShortcut };

package/dist/components/display/fileItemLogic.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+import { type KapiFileKind } from "../../hooks/downloadLogic";
+/**
+ * Tipo de visualización de un adjunto: el del MIME si lo reconoce; si no (vacío o genérico como
+ * `application/octet-stream`), el de la extensión del nombre.
+ */
+export declare const fileItemKind: (mimeType: string | null | undefined, name: string) => KapiFileKind;
+/** Partes de la línea de metadatos en orden (detalles, tamaño, fecha), sin las vacías. */
+export declare const fileMetaParts: (details: ReadonlyArray<ReactNode> | undefined, size: string, date: ReactNode) => ReactNode[];

package/dist/components/display/fileItemLogic.js

@@ -0,0 +1,12 @@
+import { fileKind as e } from "../../hooks/downloadLogic.js";
+//#region src/components/display/fileItemLogic.ts
+var t = (t, n) => {
+	let r = e(t);
+	return r === "other" ? e(n) : r;
+}, n = (e, t, n) => [
+	...e ?? [],
+	t,
+	n
+].filter((e) => e != null && e !== !1 && e !== "");
+//#endregion
+export { t as fileItemKind, n as fileMetaParts };

package/dist/components/display/iconTileLogic.d.ts

@@ -0,0 +1,13 @@
+import type { KapiBadgeVariant } from "./KapiBadge";
+export type KapiIconTileTone = KapiBadgeVariant;
+export type KapiIconTileSize = "sm" | "md" | "lg" | number;
+/** Tile edge in px; named sizes map to a fixed scale, numbers are clamped to >= 16. */
+export declare const iconTileSizePx: (size?: KapiIconTileSize) => number;
+/** Corner radius that scales with the tile (about 27%, never below 8px). */
+export declare const iconTileRadiusPx: (px: number) => number;
+/** Classes of an icon tile. Pure and exported. */
+export declare const iconTileClasses: ({ tone, soft, className }?: {
+    tone?: KapiIconTileTone | undefined;
+    soft?: boolean | undefined;
+    className?: string | undefined;
+}) => string;

package/dist/components/display/iconTileLogic.js

@@ -0,0 +1,13 @@
+//#region src/components/display/iconTileLogic.ts
+var e = {
+	sm: 36,
+	md: 48,
+	lg: 56
+}, t = (t = "md") => typeof t == "number" ? Math.max(16, Math.round(t)) : e[t], n = (e) => Math.max(8, Math.round(e * .27)), r = ({ tone: e = "primary", soft: t = !1, className: n = "" } = {}) => [
+	"kapi-icontile",
+	`kapi-icontile--${e}`,
+	t && "kapi-icontile--soft",
+	n
+].filter(Boolean).join(" ");
+//#endregion
+export { r as iconTileClasses, n as iconTileRadiusPx, t as iconTileSizePx };