@kapiuara/ui 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,40 @@
+export { KapiBadge, badgeClasses } from "./KapiBadge";
+export type { KapiBadgeProps, KapiBadgeSize, KapiBadgeTone, KapiBadgeVariant } from "./KapiBadge";
+export { KapiAvatar } from "./KapiAvatar";
+export type { KapiAvatarColor, KapiAvatarProps, KapiAvatarSize } from "./KapiAvatar";
+export { colorIndexFrom, initialsFrom } from "./avatarLogic";
+export { KapiStat } from "./KapiStat";
+export type { KapiStatProps } from "./KapiStat";
+export { statClasses } from "./statLogic";
+export type { KapiStatTone } from "./statLogic";
+export { KapiTimeline } from "./KapiTimeline";
+export type { KapiTimelineItem, KapiTimelineProps } from "./KapiTimeline";
+export { showConnector, timelineDotClass } from "./timelineLogic";
+export type { KapiTimelineTone } from "./timelineLogic";
+export { KapiDescriptionList, descriptionListClasses } from "./KapiDescriptionList";
+export type { KapiDescriptionItem, KapiDescriptionListProps } from "./KapiDescriptionList";
+export { KapiTag, DEFAULT_TAG_LABELS } from "./KapiTag";
+export type { KapiTagLabels, KapiTagProps } from "./KapiTag";
+export { tagClasses } from "./tagLogic";
+export type { KapiTagClassesInput, KapiTagSize, KapiTagTone } from "./tagLogic";
+export { KapiIconTile } from "./KapiIconTile";
+export type { KapiIconTileProps } from "./KapiIconTile";
+export { iconTileClasses, iconTileSizePx, iconTileRadiusPx } from "./iconTileLogic";
+export type { KapiIconTileSize, KapiIconTileTone } from "./iconTileLogic";
+export { KapiAvatarGroup } from "./KapiAvatarGroup";
+export type { KapiAvatarGroupItem, KapiAvatarGroupProps } from "./KapiAvatarGroup";
+export { splitAvatarGroup, overflowLabel, avatarOverlapPx } from "./avatarGroupLogic";
+export { KapiAnnotation } from "./KapiAnnotation";
+export type { KapiAnnotationProps } from "./KapiAnnotation";
+export { annotationClasses, annotationRole } from "./annotationLogic";
+export type { KapiAnnotationUnderline, KapiAnnotationTone, KapiAnnotationRole } from "./annotationLogic";
+export { KapiFileViewer, DEFAULT_FILE_VIEWER_LABELS } from "./KapiFileViewer";
+export type { KapiFileViewerLabels, KapiFileViewerProps } from "./KapiFileViewer";
+export { KapiFileItem, KapiFileList } from "./KapiFileItem";
+export type { KapiFileItemProps, KapiFileListProps } from "./KapiFileItem";
+export { fileItemKind, fileMetaParts } from "./fileItemLogic";
+export { KapiComment } from "./KapiComment";
+export type { KapiCommentProps } from "./KapiComment";
+export { KapiCommentComposer, DEFAULT_COMMENT_COMPOSER_LABELS } from "./KapiCommentComposer";
+export type { KapiCommentComposerLabels, KapiCommentComposerProps } from "./KapiCommentComposer";
+export { canSubmitComment, isSubmitShortcut } from "./commentLogic";

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

@@ -0,0 +1,10 @@
+import type { KapiIconTileTone } from "./iconTileLogic";
+export type KapiStatTone = "neutral" | "primary" | "success" | "info" | "warning" | "danger";
+/** Clases de una tarjeta KPI: reutiliza `.kapi-card .kapi-statcard`; el tono sólo tiñe el valor/nota. */
+export declare const statClasses: ({ tone, hasIcon, className }?: {
+    tone?: KapiStatTone | undefined;
+    hasIcon?: boolean | undefined;
+    className?: string | undefined;
+}) => string;
+/** Tono del tile: el explícito, si no el del stat (neutral → primary). */
+export declare const statIconTone: (tone?: KapiStatTone, iconTone?: KapiIconTileTone) => KapiIconTileTone;

package/dist/components/display/statLogic.js

@@ -0,0 +1,10 @@
+//#region src/components/display/statLogic.ts
+var e = ({ tone: e = "neutral", hasIcon: t = !1, className: n = "" } = {}) => [
+	"kapi-card",
+	"kapi-statcard",
+	e !== "neutral" && `kapi-statcard--${e}`,
+	t && "kapi-statcard--icon",
+	n
+].filter(Boolean).join(" "), t = (e = "neutral", t) => t ?? (e === "neutral" ? "primary" : e);
+//#endregion
+export { e as statClasses, t as statIconTone };

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

@@ -0,0 +1,11 @@
+export type KapiTagTone = "neutral" | "primary" | "success" | "info" | "warning" | "danger";
+export type KapiTagSize = "sm" | "md";
+export type KapiTagClassesInput = {
+    tone?: KapiTagTone | undefined;
+    size?: KapiTagSize | undefined;
+    /** Tiene botón de quitar: reserva el espacio del borde derecho. */
+    removable?: boolean | undefined;
+    className?: string | undefined;
+};
+/** Clases de un tag. */
+export declare const tagClasses: ({ tone, size, removable, className }?: KapiTagClassesInput) => string;

package/dist/components/display/tagLogic.js

@@ -0,0 +1,10 @@
+//#region src/components/display/tagLogic.ts
+var e = ({ tone: e = "neutral", size: t = "md", removable: n = !1, className: r = "" } = {}) => [
+	"kapi-tag",
+	`kapi-tag--${e}`,
+	t !== "md" && `kapi-tag--${t}`,
+	n && "kapi-tag--removable",
+	r
+].filter(Boolean).join(" ");
+//#endregion
+export { e as tagClasses };

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

@@ -0,0 +1,5 @@
+export type KapiTimelineTone = "primary" | "success" | "info" | "warning" | "danger" | "muted";
+/** Clase del punto según el tono (default `primary`). */
+export declare const timelineDotClass: (tone?: KapiTimelineTone) => string;
+/** El último ítem no dibuja el conector hacia abajo. */
+export declare const showConnector: (index: number, total: number) => boolean;

package/dist/components/display/timelineLogic.js

@@ -0,0 +1,4 @@
+//#region src/components/display/timelineLogic.ts
+var e = (e = "primary") => `kapi-tl-dot kapi-timeline__dot--${e}`, t = (e, t) => e < t - 1;
+//#endregion
+export { t as showConnector, e as timelineDotClass };

package/dist/components/feedback/KapiAlert.d.ts

@@ -0,0 +1,28 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type KapiAlertVariant = "info" | "success" | "warning" | "danger";
+/** Atributos nativos (`id`, `style`, `data-*`, `aria-*`…) van al contenedor. */
+export type KapiAlertProps = Omit<HTMLAttributes<HTMLDivElement>, "title" | "role" | "children"> & {
+    /** Rol semántico: define color, ícono y si se anuncia como `alert` o `status`. */
+    variant?: KapiAlertVariant;
+    /** Título en negrita sobre el mensaje. */
+    title?: ReactNode;
+    /** Mensaje del aviso. */
+    children?: ReactNode;
+    /** Acción a la derecha (botón, link). */
+    action?: ReactNode;
+    /**
+     * Rol de anuncio. Default: `alert` (asertivo, interrumpe al lector) para `danger`; `status` (cortés)
+     * para info/success/warning, porque un aviso inline suele ser contextual y no urgente. Pasar
+     * `"alert"` para un warning urgente (p. ej. sesión por vencer) o `"none"` para contenido estático
+     * que no debe anunciarse.
+     */
+    role?: KapiAlertRole;
+};
+export type KapiAlertRole = "alert" | "status" | "none";
+/** Rol ARIA efectivo del alert (`undefined` = sin rol). Pura y exportada para testear. */
+export declare const alertRole: (variant: KapiAlertVariant, override?: KapiAlertRole) => "alert" | "status" | undefined;
+/**
+ * Banner inline (info / success / warning / danger) para formularios, modales y pantallas.
+ * `danger` se anuncia como `role="alert"`; el resto como `role="status"` (ver `role`).
+ */
+export declare const KapiAlert: ({ variant, title, children, action, className, role, ...rest }: KapiAlertProps) => import("react").JSX.Element;

package/dist/components/feedback/KapiAlert.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { AlertTriangle as n, CheckCircle2 as r, Info as i, XCircle as a } from "lucide-react";
+//#region src/components/feedback/KapiAlert.tsx
+var o = (e, t) => {
+	let n = t ?? (e === "danger" ? "alert" : "status");
+	return n === "none" ? void 0 : n;
+}, s = {
+	info: {
+		Icon: i,
+		color: "var(--kapi-info)"
+	},
+	success: {
+		Icon: r,
+		color: "var(--kapi-success)"
+	},
+	warning: {
+		Icon: n,
+		color: "var(--kapi-warning)"
+	},
+	danger: {
+		Icon: a,
+		color: "var(--kapi-danger)"
+	}
+}, c = ({ variant: n = "info", title: r, children: i, action: a, className: c, role: l, ...u }) => {
+	let { Icon: d, color: f } = s[n] ?? s.info;
+	return /* @__PURE__ */ t("div", {
+		...u,
+		className: `kapi-alert kapi-alert--${n}${c ? ` ${c}` : ""}`,
+		role: o(n, l),
+		children: [
+			/* @__PURE__ */ e(d, {
+				className: "kapi-alert__ico",
+				size: 19,
+				strokeWidth: 2,
+				color: f
+			}),
+			/* @__PURE__ */ t("div", {
+				className: "kapi-alert__body",
+				children: [r && /* @__PURE__ */ e("div", {
+					className: "kapi-alert__title",
+					children: r
+				}), i && /* @__PURE__ */ e("div", {
+					className: "kapi-alert__msg",
+					children: i
+				})]
+			}),
+			a
+		]
+	});
+};
+//#endregion
+export { c as KapiAlert, o as alertRole };

package/dist/components/feedback/KapiBulkBar.d.ts

@@ -0,0 +1,30 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import "./KapiBulkBar.css";
+import type { KapiLabelsOverride } from "../labelsLogic";
+/** Atributos nativos (`id`, `style`, `data-*`…) van a la región; `role` y `aria-label` son propios. */
+export type KapiBulkBarProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-label"> & {
+    /** Cantidad de filas seleccionadas. */
+    count: number;
+    /** Vacía la selección. */
+    onClear: () => void;
+    /** Botones de acción masiva. */
+    children?: ReactNode;
+    /** Texto del botón de limpiar. Gana sobre `labels.clear` ("Limpiar"). */
+    clearLabel?: string;
+    /** Default `selectedCountLabel` ("N seleccionadas"). */
+    countLabel?: (n: number) => string;
+    /** Borde donde se clava la barra: arriba (estilo Gmail) o abajo. Default `"bottom"`. */
+    placement?: "top" | "bottom";
+    /** Textos fijos (nombre de la región y botón de limpiar). */
+    labels?: KapiLabelsOverride<KapiBulkBarLabels> | undefined;
+};
+export type KapiBulkBarLabels = {
+    region: string;
+    clear: string;
+};
+export declare const DEFAULT_BULK_BAR_LABELS: KapiBulkBarLabels;
+/**
+ * Barra sticky de acciones masivas: a la izquierda el conteo, después las acciones
+ * que pase el consumidor y un botón "Limpiar" (ghost). Renderizala sólo con selección.
+ */
+export declare const KapiBulkBar: ({ count, onClear, children, clearLabel, countLabel, className, placement, labels, ...rest }: KapiBulkBarProps) => import("react").JSX.Element;

package/dist/components/feedback/KapiBulkBar.js

@@ -0,0 +1,34 @@
+"use client";
+import { KapiButton as e } from "../inputs/KapiButton.js";
+import { useLabels as t } from "../locale/KapiLocaleProvider.js";
+import { selectedCountLabel as n } from "./bulkBarLogic.js";
+/* empty css                */
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/feedback/KapiBulkBar.tsx
+var a = {
+	region: "Acciones de selección",
+	clear: "Limpiar"
+}, o = ({ count: o, onClear: s, children: c, clearLabel: l, countLabel: u = n, className: d, placement: f = "bottom", labels: p, ...m }) => {
+	let h = t("bulkBar", a, p);
+	return /* @__PURE__ */ i("div", {
+		...m,
+		className: `kapi-bulk-bar${f === "top" ? " kapi-bulk-bar--top" : ""}${d ? ` ${d}` : ""}`,
+		role: "region",
+		"aria-label": h.region,
+		children: [/* @__PURE__ */ r("span", {
+			className: "kapi-bulk-bar__label",
+			"aria-live": "polite",
+			children: u(o)
+		}), /* @__PURE__ */ i("div", {
+			className: "kapi-bulk-bar__actions",
+			children: [c, /* @__PURE__ */ r(e, {
+				size: "sm",
+				variant: "ghost",
+				onClick: s,
+				children: l ?? h.clear
+			})]
+		})]
+	});
+};
+//#endregion
+export { a as DEFAULT_BULK_BAR_LABELS, o as KapiBulkBar };

package/dist/components/feedback/KapiCountdown.d.ts

@@ -0,0 +1,26 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type KapiBadgeSize, type KapiBadgeTone } from "../display/KapiBadge";
+import { type KapiCountdownLabels, type KapiCountdownTarget, type KapiCountdownToneMap } from "./countdownLogic";
+import "./feedback.css";
+import type { KapiLabelsOverride } from "../labelsLogic";
+/** Native attributes (`id`, `style`, `data-*`…) go to the chip; `role="timer"` and its label (from `detail`) are owned. */
+export type KapiCountdownProps = Omit<HTMLAttributes<HTMLSpanElement>, "prefix" | "children" | "role" | "aria-label"> & {
+    /** Deadline: Date, ISO string or epoch milliseconds. */
+    to: KapiCountdownTarget;
+    /** Text before the clock while running (e.g. "Cierra en"). Hidden once overdue. */
+    prefix?: ReactNode;
+    /** Tone per state; unspecified keys keep the defaults (far=info, near=warning, overdue=danger). */
+    tones?: Partial<KapiCountdownToneMap>;
+    /** Remaining time at or below which the state becomes "near". Default: 24 h. */
+    nearThresholdMs?: number;
+    /** Tooltip text. Defaults to a sentence like "Faltan 2 horas". */
+    detail?: string;
+    /** Override the Spanish copy (unit words keyed by `Intl.PluralRules` category). */
+    labels?: KapiLabelsOverride<KapiCountdownLabels> | undefined;
+    /** Tamaño del badge: `sm` · `md`. */
+    size?: KapiBadgeSize;
+    /** Estilo del badge: `subtle` (fondo suave) o `solid` (color pleno). */
+    badgeTone?: KapiBadgeTone;
+};
+/** Live countdown chip: ticks every second and changes color as the deadline approaches. */
+export declare function KapiCountdown({ to, prefix, tones, nearThresholdMs, detail, labels, size, badgeTone, className, ...rest }: KapiCountdownProps): import("react").JSX.Element | null;

package/dist/components/feedback/KapiCountdown.js

@@ -0,0 +1,43 @@
+"use client";
+import { useKapiLocale as e, useLabels as t } from "../locale/KapiLocaleProvider.js";
+import { KapiTooltip as n } from "../overlays/KapiTooltip.js";
+import { KapiBadge as r } from "../display/KapiBadge.js";
+/* empty css             */
+import { DEFAULT_COUNTDOWN_LABELS as i, DEFAULT_NEAR_MS as a, bucketFor as o, chipText as s, describe as c, parseTarget as l, resolveTones as u } from "./countdownLogic.js";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useEffect as p, useState as m } from "react";
+//#region src/components/feedback/KapiCountdown.tsx
+function h({ to: h, prefix: g, tones: _, nearThresholdMs: v = a, detail: y, labels: b, size: x = "md", badgeTone: S = "subtle", className: C, ...w }) {
+	let [T, E] = m(() => Date.now()), D = t("countdown", i, b), O = e() ?? "es";
+	p(() => {
+		E(Date.now());
+		let e = setInterval(() => E(Date.now()), 1e3);
+		return () => clearInterval(e);
+	}, [h]);
+	let k = l(h);
+	if (!Number.isFinite(k)) return null;
+	let A = k - T, j = o(A, v), M = u(_)[j], N = y ?? c(A, D, O), P = g && j !== "overdue";
+	return /* @__PURE__ */ d(n, {
+		label: N,
+		children: /* @__PURE__ */ f(r, {
+			...w,
+			variant: M,
+			tone: S,
+			size: x,
+			className: ["kapi-countdown", C].filter(Boolean).join(" "),
+			"data-state": j,
+			role: "timer",
+			"aria-label": N,
+			suppressHydrationWarning: !0,
+			children: [P && /* @__PURE__ */ d("span", {
+				className: "kapi-countdown__prefix",
+				children: g
+			}), /* @__PURE__ */ d("span", {
+				className: "kapi-countdown__time",
+				children: s(A, D)
+			})]
+		})
+	});
+}
+//#endregion
+export { h as KapiCountdown };

package/dist/components/feedback/KapiEmpty.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import "./feedback.css";
+export type KapiEmptyProps = Omit<HTMLAttributes<HTMLDivElement>, "title"> & {
+    /** Ícono o ilustración (se muestra en un círculo suave). */
+    icon?: ReactNode;
+    /** Título del estado vacío. */
+    title: ReactNode;
+    /** Texto secundario bajo el título (qué pasó o qué hacer). */
+    description?: ReactNode;
+    /** Acción principal (típicamente un `KapiButton`). */
+    action?: ReactNode;
+};
+/** Estado vacío: ícono, título, descripción y acción opcionales, centrados. */
+export declare function KapiEmpty({ icon, title, description, action, className, ...rest }: KapiEmptyProps): import("react").JSX.Element;

package/dist/components/feedback/KapiEmpty.js

@@ -0,0 +1,31 @@
+"use client";
+/* empty css             */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/feedback/KapiEmpty.tsx
+function n({ icon: n, title: r, description: i, action: a, className: o, ...s }) {
+	return /* @__PURE__ */ t("div", {
+		className: ["kapi-empty", o].filter(Boolean).join(" "),
+		...s,
+		children: [
+			n != null && /* @__PURE__ */ e("div", {
+				className: "kapi-empty__icon",
+				"aria-hidden": !0,
+				children: n
+			}),
+			/* @__PURE__ */ e("div", {
+				className: "kapi-empty__title",
+				children: r
+			}),
+			i != null && /* @__PURE__ */ e("div", {
+				className: "kapi-empty__desc",
+				children: i
+			}),
+			a != null && /* @__PURE__ */ e("div", {
+				className: "kapi-empty__action",
+				children: a
+			})
+		]
+	});
+}
+//#endregion
+export { n as KapiEmpty };

package/dist/components/feedback/KapiFab.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from "react";
+import "./feedback.css";
+import type { KapiRootProps } from "../rootProps";
+import type { KapiLabelsOverride } from "../labelsLogic";
+export type KapiFabAction = {
+    label: string;
+    icon?: ReactNode;
+    onClick?: () => void;
+};
+export type KapiFabPlacement = "br" | "bl" | "tr" | "tl";
+export type KapiFabLabels = {
+    /** Nombre accesible del botón principal (sin `label`). */
+    action: string;
+};
+export declare const DEFAULT_FAB_LABELS: KapiFabLabels;
+/** `className`/`style`/`id` van al contenedor flotante (portaleado); la posición arrastrada gana sobre `style`. */
+export type KapiFabProps = KapiRootProps & {
+    /** Con acciones, el FAB se vuelve speed-dial. */
+    actions?: KapiFabAction[] | undefined;
+    /** Ícono del botón principal. */
+    icon?: ReactNode | undefined;
+    /** Etiqueta accesible del botón principal; gana sobre `labels.action`. */
+    label?: string | undefined;
+    /** Textos fijos (clave `fab`). */
+    labels?: KapiLabelsOverride<KapiFabLabels> | undefined;
+    /** Click del botón único (sin `actions`). */
+    onClick?: (() => void) | undefined;
+    /** Esquina del viewport donde se ubica: `br` · `bl` · `tr` · `tl` (abajo/arriba, derecha/izquierda). */
+    position?: KapiFabPlacement | undefined;
+    /** Permite arrastrarlo (queda siempre dentro del viewport). */
+    draggable?: boolean | undefined;
+};
+/** Botón flotante: único o speed-dial; arrastrable con clamp al viewport; cierra al click afuera / Escape. */
+export declare const KapiFab: ({ actions, icon, label: labelProp, labels, onClick, position, draggable, className, style: styleProp, id }: KapiFabProps) => import("react").ReactPortal | null;

package/dist/components/feedback/KapiFab.js

@@ -0,0 +1,116 @@
+"use client";
+import { useLabels as e } from "../locale/KapiLocaleProvider.js";
+import { useKapiRoot as t } from "../../hooks/kapiRoot.js";
+/* empty css             */
+import { clampFabPosition as n, isDragMove as r } from "./fabLogic.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useCallback as o, useEffect as s, useRef as c, useState as l } from "react";
+import { Plus as u } from "lucide-react";
+import { createPortal as d } from "react-dom";
+//#region src/components/feedback/KapiFab.tsx
+var f = { action: "Acción" }, p = ({ actions: p = [], icon: m, label: h, labels: g, onClick: _, position: v = "br", draggable: y = !1, className: b, style: x, id: S }) => {
+	let C = e("fab", f, g), w = h ?? C.action, [T, E] = l(!1), [D, O] = l(null), [k, A] = l(!1), j = c(null), M = c(!1), N = t(), P = p.length > 0, F = o((e) => {
+		let t = j.current;
+		if (!t) return e;
+		let r = t.getBoundingClientRect();
+		return n(e, {
+			width: r.width,
+			height: r.height
+		}, {
+			width: window.innerWidth,
+			height: window.innerHeight
+		});
+	}, []);
+	s(() => {
+		if (!T) return;
+		let e = (e) => {
+			j.current && !j.current.contains(e.target) && E(!1);
+		}, t = (e) => {
+			e.key === "Escape" && E(!1);
+		};
+		return document.addEventListener("pointerdown", e), document.addEventListener("keydown", t), () => {
+			document.removeEventListener("pointerdown", e), document.removeEventListener("keydown", t);
+		};
+	}, [T]), s(() => {
+		if (!D) return;
+		let e = () => O((e) => e && F(e));
+		return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+	}, [D, F]);
+	let I = (e) => {
+		if (!y || e.button !== 0 || !j.current) return;
+		let t = j.current.getBoundingClientRect(), n = {
+			mx: e.clientX,
+			my: e.clientY,
+			x: t.left,
+			y: t.top,
+			moved: !1
+		}, i = (e) => {
+			let t = e.clientX - n.mx, i = e.clientY - n.my;
+			r(t, i) && (n.moved = !0), n.moved && (A(!0), O(F({
+				x: n.x + t,
+				y: n.y + i
+			})));
+		}, a = () => {
+			window.removeEventListener("pointermove", i), window.removeEventListener("pointerup", a), window.removeEventListener("pointercancel", a), M.current = n.moved, A(!1), setTimeout(() => {
+				M.current = !1;
+			}, 0);
+		};
+		window.addEventListener("pointermove", i), window.addEventListener("pointerup", a), window.addEventListener("pointercancel", a);
+	}, L = () => {
+		M.current || (P ? E((e) => !e) : _?.());
+	};
+	if (!N) return null;
+	let R = D ? {
+		...x,
+		left: D.x,
+		top: D.y,
+		right: "auto",
+		bottom: "auto"
+	} : x, z = [
+		"kapi-fab-wrap",
+		`kapi-fab-wrap--${v}`,
+		y && "is-draggable",
+		k && "is-dragging",
+		b
+	].filter(Boolean).join(" ");
+	return d(/* @__PURE__ */ a("div", {
+		ref: j,
+		id: S,
+		className: z,
+		style: R,
+		children: [P && /* @__PURE__ */ i("div", {
+			className: `kapi-fab-actions${T ? " is-open" : ""}`,
+			children: p.map((e) => /* @__PURE__ */ a("button", {
+				type: "button",
+				className: "kapi-fab-act",
+				tabIndex: T ? 0 : -1,
+				onClick: () => {
+					e.onClick?.(), E(!1);
+				},
+				children: [/* @__PURE__ */ i("span", {
+					className: "kapi-fab-act__label",
+					children: e.label
+				}), /* @__PURE__ */ i("span", {
+					className: "kapi-fab-act__btn",
+					children: e.icon
+				})]
+			}, e.label))
+		}), /* @__PURE__ */ i("button", {
+			type: "button",
+			className: "kapi-fab-main",
+			onPointerDown: I,
+			onClick: L,
+			"aria-label": w,
+			"aria-expanded": P ? T : void 0,
+			children: /* @__PURE__ */ i("span", {
+				className: `kapi-fab-main__ico${P && T ? " is-open" : ""}`,
+				children: m ?? /* @__PURE__ */ i(u, {
+					size: 24,
+					strokeWidth: 2.4
+				})
+			})
+		})]
+	}), N);
+};
+//#endregion
+export { f as DEFAULT_FAB_LABELS, p as KapiFab };

package/dist/components/feedback/KapiOfflineBanner.d.ts

@@ -0,0 +1,25 @@
+import { type HTMLAttributes } from "react";
+import "./KapiOfflineBanner.css";
+import type { KapiLabelsOverride } from "../labelsLogic";
+export type KapiOfflineBannerLabels = {
+    offline: string;
+    restored: string;
+};
+export declare const DEFAULT_OFFLINE_BANNER_LABELS: KapiOfflineBannerLabels;
+/** Atributos nativos (`id`, `style`, `data-*`…) van a la barra; `role="status"` es propio. */
+export type KapiOfflineBannerProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "role"> & {
+    /** Fuerza el estado sin conexión (demo, tests o una verificación propia contra el servidor). */
+    forceOffline?: boolean;
+    /** Mostrar el aviso breve "Conexión restablecida" al volver. Default true. */
+    showRestored?: boolean;
+    /** Cuánto dura el aviso de conexión restablecida (ms). Default 3000. */
+    restoredDuration?: number;
+    /** Textos fijos (clave `offlineBanner`). */
+    labels?: KapiLabelsOverride<KapiOfflineBannerLabels> | undefined;
+};
+/**
+ * Barra flotante y discreta que avisa cuando se pierde la conexión (eventos `online`/`offline`
+ * vía `useOnlineStatus`). Con conexión no renderiza nada; al volver muestra un aviso breve.
+ * Montala una vez, dentro de `.kapi` (p. ej. en `overlays` de KapiShell).
+ */
+export declare const KapiOfflineBanner: ({ forceOffline, showRestored, restoredDuration, labels, className, ...rest }: KapiOfflineBannerProps) => import("react").JSX.Element | null;

package/dist/components/feedback/KapiOfflineBanner.js

@@ -0,0 +1,40 @@
+"use client";
+import { useLabels as e } from "../locale/KapiLocaleProvider.js";
+import { useOnlineStatus as t } from "../../hooks/useOnlineStatus.js";
+import { DEFAULT_RESTORED_DURATION as n, nextOfflineBannerPhase as r, offlineBannerClasses as i } from "./offlineBannerLogic.js";
+/* empty css                      */
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useEffect as s, useState as c } from "react";
+import { Wifi as l, WifiOff as u } from "lucide-react";
+//#region src/components/feedback/KapiOfflineBanner.tsx
+var d = {
+	offline: "Sin conexión. Los cambios se guardarán cuando vuelva la conexión.",
+	restored: "Conexión restablecida."
+}, f = ({ forceOffline: f = !1, showRestored: p = !0, restoredDuration: m = n, labels: h, className: g, ..._ }) => {
+	let v = t(), y = e("offlineBanner", d, h), b = v.online && !f, [x, S] = c(() => b ? "hidden" : "offline");
+	if (s(() => {
+		S((e) => r(e, b, p));
+	}, [b, p]), s(() => {
+		if (x !== "restored") return;
+		let e = setTimeout(() => S("hidden"), m);
+		return () => clearTimeout(e);
+	}, [x, m]), x === "hidden") return null;
+	let C = x === "offline" ? u : l;
+	return /* @__PURE__ */ o("div", {
+		..._,
+		className: i(x, g),
+		role: "status",
+		"aria-live": "polite",
+		children: [/* @__PURE__ */ a(C, {
+			className: "kapi-offline-banner__icon",
+			size: 16,
+			strokeWidth: 2.2,
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ a("span", {
+			className: "kapi-offline-banner__text",
+			children: x === "offline" ? y.offline : y.restored
+		})]
+	});
+};
+//#endregion
+export { d as DEFAULT_OFFLINE_BANNER_LABELS, f as KapiOfflineBanner };

package/dist/components/feedback/KapiProgress.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { type KapiProgressTone } from "./progressLogic";
+import "./feedback.css";
+export type KapiProgressSize = "sm" | "md" | "lg";
+/**
+ * Atributos nativos (`id`, `style`, `data-*`, `aria-*`…) van al contenedor; el `role="progressbar"` y su
+ * nombre son del indicador: se nombra con `label` o, si no hay, con `aria-label` (que va al indicador, no al contenedor).
+ */
+export type KapiProgressProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Avance 0–100 (se clampa). */
+    value: number;
+    /** Forma: barra horizontal o anillo. */
+    variant?: "bar" | "circle";
+    /** Color del avance según el significado. */
+    tone?: KapiProgressTone;
+    /** Tamaño: grosor de la barra o diámetro del anillo. */
+    size?: KapiProgressSize;
+    /** Rótulo sobre la barra (o bajo el anillo). */
+    label?: ReactNode;
+    /** Muestra el porcentaje (a la derecha de la barra / en el centro del anillo). */
+    showValue?: boolean;
+};
+/** Progreso lineal (por defecto) o circular (`variant="circle"`) sobre tokens semánticos. */
+export declare function KapiProgress({ value, variant, tone, size, label, showValue, "aria-label": ariaLabel, className, ...rest }: KapiProgressProps): import("react").JSX.Element;