@kapiuara/ui 0.0.0-stage → 0.1.0

package/dist/components/display/KapiAnnotation.js

@@ -0,0 +1,130 @@
+"use client";
+import { joinIds as e } from "../inputs/fieldLogic.js";
+import { resolveKapiRoot as t } from "../../hooks/kapiRoot.js";
+import { usePlacement as n } from "../../hooks/usePlacement.js";
+import { KapiTooltip as r } from "../overlays/KapiTooltip.js";
+import { annotationClasses as i, annotationRole as a } from "./annotationLogic.js";
+/* empty css                   */
+import { 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 { createPortal as f } from "react-dom";
+//#region src/components/display/KapiAnnotation.tsx
+var p = 8, m = 8, h = 150;
+function g({ children: g, info: _, underline: v = "dotted", tone: y = "primary", onClick: b, popover: x, interactive: S = !1, className: C, "aria-label": w, ...T }) {
+	let E = l(), D = u(null), [O, k] = d(!1), [A, j] = d(!1), M = u(null), N = u(void 0), { element: P, tabIndex: F, mode: I } = a(b, x, _), L = i({
+		underline: v,
+		tone: y,
+		clickable: !!b,
+		className: C
+	}), R = (e) => {
+		e.key === "Escape" && (k(!1), j(!0));
+	}, z = () => clearTimeout(N.current), B = () => {
+		z(), j(!1), k(!0);
+	}, V = () => {
+		z(), k(!1), j(!1);
+	}, H = u(V);
+	H.current = V;
+	let U = () => {
+		if (!S) return V();
+		z(), N.current = setTimeout(V, h);
+	}, W = (e) => {
+		let t = e.relatedTarget;
+		S && t && M.current?.contains(t) || V();
+	}, { placement: G } = n({
+		open: O,
+		anchor: D,
+		floatingRef: M,
+		side: "bottom",
+		align: "center",
+		offset: p,
+		margin: m
+	}), K = G ? {
+		top: G.top,
+		left: G.centerX,
+		side: G.side === "top" ? "top" : "bottom"
+	} : null;
+	c(() => {
+		if (!O || !S) return;
+		let e = (e) => {
+			let t = e.target;
+			!D.current?.contains(t) && !M.current?.contains(t) && H.current();
+		}, t = (e) => {
+			e.key === "Escape" && (k(!1), j(!0));
+		};
+		return document.addEventListener("mousedown", e), document.addEventListener("keydown", t), () => {
+			document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
+		};
+	}, [O, S]), c(() => () => clearTimeout(N.current), []);
+	let q = {
+		...T,
+		className: L,
+		onKeyDown: R,
+		onClick: b,
+		...w !== void 0 && { "aria-label": w },
+		"data-dismissed": A ? "" : void 0
+	};
+	if (I === "tooltip") {
+		let e = String(_), t = P === "button" ? /* @__PURE__ */ o("button", {
+			...q,
+			type: "button",
+			onBlur: V,
+			children: g
+		}) : /* @__PURE__ */ o("span", {
+			...q,
+			tabIndex: F,
+			onBlur: V,
+			children: g
+		});
+		return /* @__PURE__ */ o(r, {
+			label: e,
+			prefer: "top",
+			children: t
+		});
+	}
+	let J = x ?? { body: _ }, Y = {
+		...q,
+		ref: D,
+		"aria-describedby": e(T["aria-describedby"], O && E),
+		onFocus: B,
+		onBlur: W
+	}, X = O ? t(D.current) : null;
+	return /* @__PURE__ */ s("span", {
+		className: "kapi-annotation-wrap",
+		onMouseEnter: B,
+		onMouseLeave: U,
+		children: [P === "button" ? /* @__PURE__ */ o("button", {
+			...Y,
+			type: "button",
+			children: g
+		}) : /* @__PURE__ */ o("span", {
+			...Y,
+			tabIndex: F,
+			children: g
+		}), X && f(/* @__PURE__ */ s("span", {
+			ref: M,
+			id: E,
+			role: "tooltip",
+			className: "kapi-annotation__pop",
+			"data-side": K?.side ?? "bottom",
+			"data-interactive": S ? "" : void 0,
+			style: {
+				top: K?.top ?? 0,
+				left: K?.left ?? 0,
+				visibility: K ? void 0 : "hidden"
+			},
+			tabIndex: S ? -1 : void 0,
+			onMouseEnter: S ? z : void 0,
+			onMouseLeave: S ? U : void 0,
+			onBlur: S ? W : void 0,
+			children: [J.title && /* @__PURE__ */ o("span", {
+				className: "kapi-annotation__title",
+				children: J.title
+			}), /* @__PURE__ */ o("span", {
+				className: "kapi-annotation__body",
+				children: J.body
+			})]
+		}), X)]
+	});
+}
+//#endregion
+export { g as KapiAnnotation };

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

@@ -0,0 +1,27 @@
+import type { HTMLAttributes } from "react";
+import type { KapiBadgeVariant } from "./KapiBadge";
+import "./display.css";
+export type KapiAvatarSize = "sm" | "md" | "lg" | number;
+export type KapiAvatarColor = "auto" | KapiBadgeVariant;
+export type KapiAvatarProps = Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
+    /** Nombre completo: de acá salen las iniciales y el color automático. */
+    name?: string;
+    /** Pisa las iniciales calculadas. */
+    initials?: string;
+    /** URL de imagen; si está, reemplaza a las iniciales. */
+    src?: string;
+    /** `sm` 28 · `md` 36 · `lg` 48, o un número con el tamaño exacto en px. */
+    size?: KapiAvatarSize;
+    /** `auto` elige un rol de forma determinística según `name`. */
+    color?: KapiAvatarColor;
+};
+/** Orden fijo de los roles para el color automático (cambiarlo cambia los colores de todos). */
+export declare const AVATAR_ROLES: ReadonlyArray<KapiBadgeVariant>;
+/** Clases de un avatar. Pura y exportada. */
+export declare const avatarClasses: ({ size, role, className }: {
+    size?: KapiAvatarSize | undefined;
+    role: KapiBadgeVariant;
+    className?: string | undefined;
+}) => string;
+/** Avatar circular: imagen o iniciales sobre el color subtle del rol. */
+export declare function KapiAvatar({ name, initials, src, size, color, className, style, ...rest }: KapiAvatarProps): import("react").JSX.Element;

package/dist/components/display/KapiAvatar.js

@@ -0,0 +1,43 @@
+"use client";
+/* empty css            */
+import { colorIndexFrom as e, initialsFrom as t } from "./avatarLogic.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/display/KapiAvatar.tsx
+var r = [
+	"primary",
+	"success",
+	"info",
+	"warning",
+	"danger",
+	"neutral"
+], i = ({ size: e = "md", role: t, className: n = "" }) => [
+	"kapi-avatar",
+	`kapi-avatar--${t}`,
+	typeof e == "string" && e !== "md" && `kapi-avatar--${e}`,
+	n
+].filter(Boolean).join(" ");
+function a({ name: a = "", initials: o, src: s, size: c = "md", color: l = "auto", className: u, style: d, ...f }) {
+	let p = l === "auto" ? r[e(a, r.length)] ?? "neutral" : l, m = typeof c == "number" ? c : void 0, h = m === void 0 ? d : {
+		width: m,
+		height: m,
+		fontSize: Math.round(m * .38),
+		...d
+	};
+	return /* @__PURE__ */ n("span", {
+		className: i({
+			size: c,
+			role: p,
+			className: u
+		}),
+		style: h,
+		role: s ? void 0 : "img",
+		"aria-label": s ? void 0 : a || void 0,
+		...f,
+		children: s ? /* @__PURE__ */ n("img", {
+			src: s,
+			alt: a
+		}) : o ?? t(a)
+	});
+}
+//#endregion
+export { r as AVATAR_ROLES, a as KapiAvatar, i as avatarClasses };

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

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from "react";
+import { type KapiAvatarColor, type KapiAvatarSize } from "./KapiAvatar";
+import "./display.css";
+export type KapiAvatarGroupItem = {
+    name?: string;
+    initials?: string;
+    src?: string;
+    color?: KapiAvatarColor;
+};
+export type KapiAvatarGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Personas a mostrar, en orden; las que pasan de `max` se resumen en "+N". */
+    items: readonly KapiAvatarGroupItem[];
+    /** Max avatars before the trailing "+N" tile. Default 4. */
+    max?: number;
+    /** Same scale as KapiAvatar: `sm` 28 · `md` 36 · `lg` 48, or px. */
+    size?: KapiAvatarSize;
+};
+/** Overlapping avatars capped at `max`, with a trailing "+N" tile. Each avatar keeps its name as tooltip. */
+export declare function KapiAvatarGroup({ items, max, size, className, style, ...rest }: KapiAvatarGroupProps): import("react").JSX.Element;

package/dist/components/display/KapiAvatarGroup.js

@@ -0,0 +1,38 @@
+"use client";
+/* empty css            */
+import { KapiAvatar as e } from "./KapiAvatar.js";
+import { avatarOverlapPx as t, overflowLabel as n, splitAvatarGroup as r } from "./avatarGroupLogic.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/display/KapiAvatarGroup.tsx
+var o = {
+	sm: 28,
+	md: 36,
+	lg: 48
+};
+function s({ items: s, max: c = 4, size: l = "md", className: u, style: d, ...f }) {
+	let { visible: p, overflow: m } = r(s, c), h = typeof l == "number" ? l : o[l], g = {
+		"--kapi-avatargroup-overlap": `${t(h)}px`,
+		...d
+	}, _ = s.slice(p.length).map((e) => e.name).filter(Boolean).join(", ");
+	return /* @__PURE__ */ a("div", {
+		className: ["kapi-avatargroup", u].filter(Boolean).join(" "),
+		style: g,
+		role: "group",
+		...f,
+		children: [p.map((t, n) => /* @__PURE__ */ i(e, {
+			className: "kapi-avatargroup__item",
+			title: t.name,
+			size: l,
+			...t
+		}, `${t.name ?? t.initials ?? ""}-${n}`)), m > 0 && /* @__PURE__ */ i(e, {
+			className: "kapi-avatargroup__item kapi-avatargroup__more",
+			color: "neutral",
+			size: l,
+			initials: n(m),
+			title: _ || void 0,
+			"aria-label": `${m} más`
+		})]
+	});
+}
+//#endregion
+export { s as KapiAvatarGroup };

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

@@ -0,0 +1,21 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import "./display.css";
+export type KapiBadgeVariant = "neutral" | "primary" | "success" | "info" | "warning" | "danger";
+export type KapiBadgeTone = "subtle" | "solid";
+export type KapiBadgeSize = "sm" | "md";
+export type KapiBadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
+    /** Rol semántico (color). `neutral` es el gris calmo por defecto. */
+    variant?: KapiBadgeVariant;
+    /** `subtle` = fondo suave + borde; `solid` = color pleno con texto `-fg`. */
+    tone?: KapiBadgeTone;
+    /** Tamaño: `sm` · `md`. */
+    size?: KapiBadgeSize;
+    /** Punto de color a la izquierda. */
+    dot?: boolean;
+    /** Contenido del badge (texto corto o número). */
+    children?: ReactNode;
+};
+/** Clases de un badge. Pura y exportada: es lo que se testea (no el markup). */
+export declare const badgeClasses: ({ variant, tone, size, className }?: Pick<KapiBadgeProps, "variant" | "tone" | "size" | "className">) => string;
+/** Pastilla de estado/etiqueta, con los tokens semánticos por rol. */
+export declare function KapiBadge({ variant, tone, size, dot, className, children, ...rest }: KapiBadgeProps): import("react").JSX.Element;

package/dist/components/display/KapiBadge.js

@@ -0,0 +1,28 @@
+"use client";
+/* empty css            */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/display/KapiBadge.tsx
+var n = ({ variant: e = "neutral", tone: t = "subtle", size: n = "md", className: r = "" } = {}) => [
+	"kapi-badge",
+	`kapi-badge--${e}`,
+	t === "solid" && "kapi-badge--solid",
+	n !== "md" && `kapi-badge--${n}`,
+	r
+].filter(Boolean).join(" ");
+function r({ variant: r = "neutral", tone: i = "subtle", size: a = "md", dot: o = !1, className: s, children: c, ...l }) {
+	return /* @__PURE__ */ t("span", {
+		className: n({
+			variant: r,
+			tone: i,
+			size: a,
+			className: s
+		}),
+		...l,
+		children: [o && /* @__PURE__ */ e("span", {
+			className: "kapi-badge__dot",
+			"aria-hidden": !0
+		}), c]
+	});
+}
+//#endregion
+export { r as KapiBadge, n as badgeClasses };

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

@@ -0,0 +1,27 @@
+import type { HTMLAttributes, ReactNode, Ref } from "react";
+import "./KapiComment.css";
+/** Atributos nativos (`className`, `style`, `id`, `data-*`…) van al `<article>`. */
+export type KapiCommentProps = Omit<HTMLAttributes<HTMLElement>, "children" | "title"> & {
+    /** Nombre del autor (también da las iniciales y el color del avatar). */
+    author: string;
+    /** Foto del autor; sin ella el avatar muestra iniciales. */
+    avatarSrc?: string | undefined;
+    /** Pisa el avatar (p. ej. un ícono para comentarios del sistema). */
+    avatar?: ReactNode;
+    /** Fecha del comentario; se muestra relativa ("hace 5 minutos") con la absoluta en el `title`. */
+    date?: Date | string | undefined;
+    /** Hora de referencia de la fecha relativa (tests y capturas deterministas). Sin valor, el reloj real. */
+    now?: Date | undefined;
+    /** Texto del comentario. */
+    body: ReactNode;
+    /** Dato chico junto a la fecha ("editado", "interno"…). */
+    meta?: ReactNode;
+    /** Acciones bajo el cuerpo (responder, editar, borrar…). */
+    actions?: ReactNode;
+    /** Respuestas (otros `KapiComment`): se muestran con sangría; la sangría no crece más allá de un nivel. */
+    children?: ReactNode;
+    /** Ref al `<article>`. */
+    ref?: Ref<HTMLElement>;
+};
+/** Un comentario de un hilo: avatar, autor, fecha relativa, cuerpo, acciones y respuestas anidadas. */
+export declare const KapiComment: ({ author, avatarSrc, avatar, date, now, body, meta, actions, children, ref, className, ...rest }: KapiCommentProps) => import("react").JSX.Element;

package/dist/components/display/KapiComment.js

@@ -0,0 +1,66 @@
+"use client";
+import { useKapiLocale as e } from "../locale/KapiLocaleProvider.js";
+import { joinClasses as t } from "../rootProps.js";
+import { KapiAvatar as n } from "./KapiAvatar.js";
+import { formatDate as r, formatRelativeTime as i, isoDateTime as a } from "../../hooks/dateFormat.js";
+/* empty css                */
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/display/KapiComment.tsx
+var c = {
+	dateStyle: "medium",
+	timeStyle: "short"
+}, l = ({ author: l, avatarSrc: u, avatar: d, date: f, now: p, body: m, meta: h, actions: g, children: _, ref: v, className: y, ...b }) => {
+	let x = e() ?? "es", S = f === void 0 ? null : a(f), C = _ != null && _ !== !1;
+	return /* @__PURE__ */ s("article", {
+		...b,
+		ref: v,
+		className: t("kapi-comment", y),
+		children: [/* @__PURE__ */ s("div", {
+			className: "kapi-comment__row",
+			children: [/* @__PURE__ */ o("span", {
+				className: "kapi-comment__avatar",
+				children: d ?? /* @__PURE__ */ o(n, {
+					name: l,
+					size: "sm",
+					...u ? { src: u } : {}
+				})
+			}), /* @__PURE__ */ s("div", {
+				className: "kapi-comment__main",
+				children: [
+					/* @__PURE__ */ s("div", {
+						className: "kapi-comment__head",
+						children: [
+							/* @__PURE__ */ o("span", {
+								className: "kapi-comment__author",
+								children: l
+							}),
+							S !== null && f !== void 0 && /* @__PURE__ */ o("time", {
+								className: "kapi-comment__date",
+								dateTime: S,
+								title: r(f, x, c),
+								children: i(f, p ?? /* @__PURE__ */ new Date(), x)
+							}),
+							h != null && h !== !1 && /* @__PURE__ */ o("span", {
+								className: "kapi-comment__meta",
+								children: h
+							})
+						]
+					}),
+					/* @__PURE__ */ o("div", {
+						className: "kapi-comment__body",
+						children: m
+					}),
+					g != null && g !== !1 && /* @__PURE__ */ o("div", {
+						className: "kapi-comment__actions",
+						children: g
+					})
+				]
+			})]
+		}), C && /* @__PURE__ */ o("div", {
+			className: "kapi-comment__replies",
+			children: _
+		})]
+	});
+};
+//#endregion
+export { l as KapiComment };

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

@@ -0,0 +1,49 @@
+import { type CSSProperties, type Ref, type TextareaHTMLAttributes } from "react";
+import type { KapiLabelsOverride } from "../labelsLogic";
+import "./KapiComment.css";
+export type KapiCommentComposerLabels = {
+    /** Nombre accesible del textarea si no hay `KapiField`, `aria-label` ni `aria-labelledby`. */
+    label: string;
+    /** Placeholder del textarea (lo pisa la prop `placeholder`). */
+    placeholder: string;
+    /** Texto del botón de envío. */
+    submit: string;
+    /** Ayuda del atajo de teclado (descripción accesible y texto bajo el control). */
+    shortcut: string;
+};
+export declare const DEFAULT_COMMENT_COMPOSER_LABELS: KapiCommentComposerLabels;
+type OwnKeys = "value" | "defaultValue" | "onChange" | "onSubmit" | "children" | "className" | "style";
+/**
+ * Los atributos nativos (`name`, `id`, `rows`, `maxLength`, `onBlur`, `aria-*`…) van al `<textarea>`;
+ * `className` y `style` van al contenedor.
+ */
+export type KapiCommentComposerProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, OwnKeys> & {
+    /** Texto (controlado). */
+    value?: string | undefined;
+    /** Texto inicial (no controlado). */
+    defaultValue?: string | undefined;
+    /** Cambio del texto, ya como string. */
+    onChange?: ((text: string) => void) | undefined;
+    /**
+     * Envío (botón o Ctrl/Cmd+Enter) con el texto recortado. No controlado, el compositor se vacía después;
+     * si devuelve una promesa, queda ocupado mientras corre y se vacía solo si resuelve (si rechaza, el
+     * borrador se conserva para reintentar).
+     */
+    onSubmit: (text: string) => void | PromiseLike<unknown>;
+    /** Enviando: bloquea el envío y marca el botón `aria-busy`. */
+    loading?: boolean | undefined;
+    /** Marca el textarea `aria-invalid` (o lo toma del `KapiField`). */
+    invalid?: boolean | undefined;
+    /** Marca el textarea obligatorio (o lo toma del `KapiField`). */
+    required?: boolean | undefined;
+    /** Clase extra del contenedor. */
+    className?: string | undefined;
+    /** Estilos en línea del contenedor. */
+    style?: CSSProperties | undefined;
+    /** Textos fijos (clave `commentComposer`). */
+    labels?: KapiLabelsOverride<KapiCommentComposerLabels> | undefined;
+    /** Ref al `<textarea>`. */
+    ref?: Ref<HTMLTextAreaElement>;
+};
+export declare const KapiCommentComposer: ({ value: valueProp, defaultValue, onChange, onSubmit, loading, invalid, required, disabled, className, style, labels, ref, placeholder, onKeyDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: KapiCommentComposerProps) => import("react").JSX.Element;
+export {};

package/dist/components/display/KapiCommentComposer.js

@@ -0,0 +1,76 @@
+"use client";
+import { KapiButton as e } from "../inputs/KapiButton.js";
+import { assignRef as t, joinIds as n } from "../inputs/fieldLogic.js";
+import { useKapiField as r } from "../inputs/KapiField.js";
+import { useLabels as i } from "../locale/KapiLocaleProvider.js";
+import { joinClasses as a } from "../rootProps.js";
+import { KapiTextarea as o } from "../inputs/KapiTextarea.js";
+/* empty css                */
+import { canSubmitComment as s, draftAfterSubmit as c, isSubmitShortcut as l } from "./commentLogic.js";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useId as f, useRef as p, useState as m } from "react";
+//#region src/components/display/KapiCommentComposer.tsx
+var h = {
+	label: "Comentario",
+	placeholder: "Escribe un comentario…",
+	submit: "Comentar",
+	shortcut: "Ctrl o ⌘ + Enter para enviar"
+}, g = (e) => typeof e?.then == "function", _ = ({ value: _, defaultValue: v = "", onChange: y, onSubmit: b, loading: x = !1, invalid: S, required: C, disabled: w, className: T, style: E, labels: D, ref: O, placeholder: k, onKeyDown: A, "aria-label": j, "aria-labelledby": M, "aria-describedby": N, ...P }) => {
+	let F = i("commentComposer", h, D), I = r(), [L, R] = m(v), z = _ ?? L, B = f(), V = p(null), [H, U] = m(!1), W = x || H, G = s(z, {
+		disabled: w,
+		loading: W
+	}), K = (e) => {
+		_ === void 0 && R(e), y?.(e);
+	}, q = () => {
+		if (!G) return;
+		let e = z.trim(), t = b(e);
+		V.current?.focus(), g(t) ? (U(!0), Promise.resolve(t).then(() => {
+			_ === void 0 && R((t) => c(t, e));
+		}, (e) => console.error(e)).finally(() => U(!1))) : _ === void 0 && R("");
+	}, J = (e) => {
+		A?.(e), !e.defaultPrevented && l({
+			...e,
+			isComposing: e.nativeEvent.isComposing
+		}) && (e.preventDefault(), q());
+	}, Y = j !== void 0 || M !== void 0 || I !== null;
+	return /* @__PURE__ */ d("div", {
+		className: a("kapi-composer", T),
+		style: E,
+		children: [/* @__PURE__ */ u(o, {
+			...P,
+			ref: (e) => {
+				V.current = e, t(O, e);
+			},
+			className: "kapi-composer__input",
+			autosize: !0,
+			maxRows: 8,
+			rows: 2,
+			value: z,
+			disabled: w,
+			placeholder: k ?? F.placeholder,
+			"aria-label": Y ? j : F.label,
+			"aria-labelledby": M,
+			"aria-describedby": n(N, B),
+			...C === void 0 ? {} : { required: C },
+			...S ? { status: "err" } : {},
+			onChange: (e) => K(e.target.value),
+			onKeyDown: J
+		}), /* @__PURE__ */ d("div", {
+			className: "kapi-composer__foot",
+			children: [/* @__PURE__ */ u("span", {
+				id: B,
+				className: "kapi-composer__hint",
+				children: F.shortcut
+			}), /* @__PURE__ */ u(e, {
+				variant: "primary",
+				size: "sm",
+				disabled: !G,
+				"aria-busy": W || void 0,
+				onClick: q,
+				children: F.submit
+			})]
+		})]
+	});
+};
+//#endregion
+export { h as DEFAULT_COMMENT_COMPOSER_LABELS, _ as KapiCommentComposer };

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

@@ -0,0 +1,19 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import "./display.css";
+export type KapiDescriptionItem = {
+    label: ReactNode;
+    value: ReactNode;
+};
+/** Atributos nativos (`id`, `style`, `data-*`, `aria-*`…) van al `<dl>`. */
+export type KapiDescriptionListProps = Omit<HTMLAttributes<HTMLDListElement>, "children"> & {
+    /** Pares etiqueta/valor; cada uno es un `<dt>`/`<dd>`. */
+    items: KapiDescriptionItem[];
+    /** Cantidad de columnas (default 1). */
+    columns?: number;
+    /** `true`: etiqueta a la izquierda y valor a la derecha, en la misma línea. */
+    inline?: boolean;
+};
+/** Clases de la lista. Pura y exportada. */
+export declare const descriptionListClasses: ({ inline, className }?: Pick<KapiDescriptionListProps, "inline" | "className">) => string;
+/** Lista de pares etiqueta/valor (`<dl>`), en una o varias columnas. */
+export declare function KapiDescriptionList({ items, columns, inline, className, style, ...rest }: KapiDescriptionListProps): import("react").JSX.Element;

package/dist/components/display/KapiDescriptionList.js

@@ -0,0 +1,35 @@
+"use client";
+/* empty css            */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/display/KapiDescriptionList.tsx
+var n = ({ inline: e = !1, className: t = "" } = {}) => [
+	"kapi-dl",
+	e && "kapi-dl--inline",
+	t
+].filter(Boolean).join(" ");
+function r({ items: r, columns: i = 1, inline: a = !1, className: o, style: s, ...c }) {
+	let l = Math.max(1, Math.floor(i));
+	return /* @__PURE__ */ e("dl", {
+		...c,
+		className: n({
+			inline: a,
+			className: o
+		}),
+		style: {
+			...s,
+			"--kapi-dl-cols": l
+		},
+		children: r.map((n, r) => /* @__PURE__ */ t("div", {
+			className: "kapi-dl__item",
+			children: [/* @__PURE__ */ e("dt", {
+				className: "kapi-dl__label",
+				children: n.label
+			}), /* @__PURE__ */ e("dd", {
+				className: "kapi-dl__value",
+				children: n.value
+			})]
+		}, r))
+	});
+}
+//#endregion
+export { r as KapiDescriptionList, n as descriptionListClasses };

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

@@ -0,0 +1,39 @@
+import type { HTMLAttributes, LiHTMLAttributes, MouseEvent as ReactMouseEvent, ReactNode, Ref } from "react";
+import "./KapiFileItem.css";
+/** Atributos nativos (`className`, `style`, `id`, `data-*`…) van al `<li>`. */
+export type KapiFileItemProps = Omit<LiHTMLAttributes<HTMLLIElement>, "children" | "type" | "value"> & {
+    /** Nombre del archivo (se recorta con "…" y queda completo en el `title`). */
+    name: string;
+    /** MIME del archivo; elige el ícono. Sin él (o genérico) se deduce de la extensión de `name`. */
+    mimeType?: string | undefined;
+    /** Tamaño en bytes; se muestra legible ("1,5 KB") en la línea de metadatos. */
+    size?: number | undefined;
+    /** Fecha del archivo (subida, modificación); se muestra absoluta ("12 mar 2026") en un `<time>`. */
+    date?: Date | string | undefined;
+    /** Otros datos de la línea de metadatos, antes del tamaño y la fecha ("Constancia", "Ana Pérez"). */
+    details?: ReadonlyArray<ReactNode> | undefined;
+    /** Pisa el ícono del tipo de archivo (p. ej. un escudo para un archivo bloqueado). Siempre decorativo. */
+    icon?: ReactNode;
+    /** Estado a la derecha del nombre (un `KapiBadge`: "Verificado", "En revisión"…). */
+    status?: ReactNode;
+    /** Acciones al final de la fila (botones de ver, descargar, quitar…). */
+    actions?: ReactNode;
+    /** Con `onOpen` el nombre es un botón (abrir la vista previa); sin él, texto. */
+    onOpen?: ((event: ReactMouseEvent<HTMLButtonElement>) => void) | undefined;
+    /** Ref al `<li>`. */
+    ref?: Ref<HTMLLIElement>;
+};
+/**
+ * Una fila de adjunto: ícono según el tipo, nombre, metadatos (detalles · tamaño · fecha), estado y
+ * acciones. Es un `<li>`: va dentro de `KapiFileList`. Contenido por props, sin lógica de negocio.
+ */
+export declare const KapiFileItem: ({ name, mimeType, size, date, details, icon, status, actions, onOpen, ref, className, ...rest }: KapiFileItemProps) => import("react").JSX.Element;
+/** Atributos nativos (`className`, `style`, `id`, `aria-label`…) van al `<ul>`. */
+export type KapiFileListProps = HTMLAttributes<HTMLUListElement> & {
+    /** Filas de la lista (`KapiFileItem`). */
+    children?: ReactNode;
+    /** Ref al `<ul>`. */
+    ref?: Ref<HTMLUListElement>;
+};
+/** Lista de adjuntos (`<ul>` sin viñetas, filas separadas por una línea). */
+export declare const KapiFileList: ({ className, ref, ...rest }: KapiFileListProps) => import("react").JSX.Element;