@kapiuara/ui 0.0.0-stage → 0.1.0

package/dist/components/inputs/KapiDateRangePicker.js

@@ -0,0 +1,179 @@
+"use client";
+import { assignRef as e, fieldControlProps as t, focusLeaves as n } from "./fieldLogic.js";
+import { useKapiField as ee } from "./KapiField.js";
+import { useKapiLocale as r, useLabels as te } from "../locale/KapiLocaleProvider.js";
+import { DEFAULT_CALENDAR_LABELS as i, calendarNames as a, formDateValue as o, monthTitle as s } from "./datePickerLogic.js";
+import { KapiCalendarGrid as ne } from "./KapiCalendarGrid.js";
+import { useCalendarFocus as re } from "./useCalendarFocus.js";
+import { useDatePopSide as ie } from "./useDatePopSide.js";
+/* empty css                   */
+import { EMPTY_RANGE as c, formatRange as l, isCompleteRange as ae, maskRangeInput as oe, parseRangeText as u, pickRangeDay as d, rangeDayState as f, sameRange as p } from "./dateRangeLogic.js";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { useEffect as _, useMemo as se, useRef as v, useState as y } from "react";
+import { Calendar as ce, ChevronLeft as le, ChevronRight as ue } from "lucide-react";
+//#region src/components/inputs/KapiDateRangePicker.tsx
+var b = {
+	...i,
+	pickStart: "Elige la fecha de inicio",
+	pickEnd: "Elige la fecha de fin"
+}, de = (e) => `${e.from?.getTime() ?? ""}-${e.to?.getTime() ?? ""}`, x = ({ value: i = c, onChange: x, placeholder: fe = "dd/mm/aaaa – dd/mm/aaaa", disabled: S = !1, id: pe, name: C, className: me, style: he, "aria-label": w, labels: ge, ref: T, onBlur: E }) => {
+	let D = r(), O = se(() => D ? {
+		...b,
+		...a(D)
+	} : b, [D]), k = te("calendar", O, ge), A = ee(), [j, M] = y(!1), [N, P] = y(i), [F, I] = y(i), [L, R] = y(null), [z, B] = y(() => l(i)), [V, H] = y(() => i.from ?? /* @__PURE__ */ new Date()), U = v(null), W = v(null), G = v(null), { inputRef: _e, focusRequest: ve, openFromKeyboard: K, openFromFocus: ye, returnFocus: q } = re(M), J = de(i), [be, xe] = y(J);
+	be !== J && (xe(J), P(i), I(i), B(l(i)), i.from && H(i.from));
+	let Y = () => {
+		M(!1), I(N), R(null);
+	}, X = v(Y);
+	X.current = Y, _(() => {
+		let e = (e) => {
+			let t = U.current;
+			if (!t || t.contains(e.target)) return;
+			let n = document.activeElement;
+			n instanceof HTMLElement && G.current?.contains(n) && n.blur(), X.current();
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, []);
+	let Z = (e) => {
+		P(e), I(e), B(l(e)), x?.(e);
+	}, Se = () => {
+		let e = u(z);
+		e === null ? (N.from || N.to) && Z(c) : e === void 0 ? B(l(N)) : (p(e, N) ? B(l(e)) : Z(e), e.from && H(e.from));
+	}, Ce = (e) => {
+		let t = d(F, e);
+		R(null), ae(t) ? (Z(t), q()) : I(t);
+	}, Q = (e) => H(new Date(V.getFullYear(), V.getMonth() + e, 1)), $ = !!F.from && !F.to, we = ie(j && !S, W, G);
+	return /* @__PURE__ */ g("div", {
+		className: [
+			"kapi-dp",
+			"kapi-dp--range",
+			me
+		].filter(Boolean).join(" "),
+		style: he,
+		ref: U,
+		onBlur: (e) => {
+			n(e.relatedTarget, e.currentTarget) && E?.(e);
+		},
+		children: [
+			/* @__PURE__ */ g("div", {
+				className: "kapi-dp__field",
+				ref: W,
+				children: [/* @__PURE__ */ h("input", {
+					ref: (t) => {
+						_e.current = t, e(T, t);
+					},
+					...t(A, { id: pe }),
+					className: "kapi-input kapi-dp__input",
+					value: z,
+					placeholder: fe,
+					disabled: S,
+					"aria-label": w,
+					autoComplete: "off",
+					inputMode: "numeric",
+					onChange: (e) => B(oe(e.target.value)),
+					onFocus: ye,
+					onBlur: Se,
+					onKeyDown: (e) => {
+						e.key === "Escape" && Y(), e.key === "ArrowDown" && (e.preventDefault(), K());
+					}
+				}), /* @__PURE__ */ h("button", {
+					type: "button",
+					className: "kapi-dp__toggle",
+					disabled: S,
+					"aria-label": k.openPicker,
+					"aria-expanded": j,
+					onClick: () => j ? Y() : K(),
+					children: /* @__PURE__ */ h(ce, {
+						size: 16,
+						strokeWidth: 1.9
+					})
+				})]
+			}),
+			C && /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("input", {
+				type: "hidden",
+				name: `${C}.from`,
+				value: o(N.from, "date"),
+				disabled: S
+			}), /* @__PURE__ */ h("input", {
+				type: "hidden",
+				name: `${C}.to`,
+				value: o(N.to, "date"),
+				disabled: S
+			})] }),
+			j && !S && /* @__PURE__ */ h("div", {
+				ref: G,
+				className: `kapi-dp__pop${we === "top" ? " kapi-dp__pop--up" : ""}`,
+				onKeyDown: (e) => {
+					e.key === "Escape" && (e.preventDefault(), Y(), q());
+				},
+				children: /* @__PURE__ */ g("div", {
+					className: "kapi-dp__cal",
+					children: [
+						/* @__PURE__ */ g("div", {
+							className: "kapi-dp__head",
+							children: [
+								/* @__PURE__ */ h("button", {
+									type: "button",
+									className: "kapi-dp__nav",
+									"aria-label": k.prevMonth,
+									onClick: () => Q(-1),
+									children: /* @__PURE__ */ h(le, {
+										size: 15,
+										strokeWidth: 2.2
+									})
+								}),
+								/* @__PURE__ */ h("span", {
+									className: "kapi-dp__title",
+									children: s(V, k.months)
+								}),
+								/* @__PURE__ */ h("button", {
+									type: "button",
+									className: "kapi-dp__nav",
+									"aria-label": k.nextMonth,
+									onClick: () => Q(1),
+									children: /* @__PURE__ */ h(ue, {
+										size: 15,
+										strokeWidth: 2.2
+									})
+								})
+							]
+						}),
+						/* @__PURE__ */ h(ne, {
+							view: V,
+							onViewChange: H,
+							labels: k,
+							focusTarget: F.from,
+							focusRequest: ve,
+							isSelected: (e) => f(e, F, null) !== null,
+							dayClassName: (e) => {
+								let t = f(e, F, $ ? L : null);
+								return [(t === "start" || t === "end" || t === "single") && "kapi-dp__day--sel", t && `kapi-dp__day--${t}`].filter(Boolean).join(" ");
+							},
+							onPick: Ce,
+							onDayHover: (e) => {
+								e === null ? R(null) : $ && R(e);
+							}
+						}),
+						/* @__PURE__ */ g("div", {
+							className: "kapi-dp__foot",
+							children: [/* @__PURE__ */ h("button", {
+								type: "button",
+								className: "kapi-dp__link",
+								onClick: () => {
+									Z(c), M(!1);
+								},
+								children: k.clear
+							}), /* @__PURE__ */ h("span", {
+								className: "kapi-dp__hint",
+								"aria-live": "polite",
+								children: $ ? k.pickEnd : k.pickStart
+							})]
+						})
+					]
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { b as DEFAULT_DATE_RANGE_LABELS, x as KapiDateRangePicker };

package/dist/components/inputs/KapiFacetedSearch.d.ts

@@ -0,0 +1,45 @@
+import { type HTMLAttributes } from "react";
+import { type KapiFacet, type KapiFacetChip } from "./facetedSearchLogic";
+import "./KapiFacetedSearch.css";
+import type { KapiLabelsOverride } from "../labelsLogic";
+export type KapiFacetedSearchLabels = {
+    /** Nombre accesible del campo. */
+    input: string;
+    placeholder: string;
+    /** "Buscar “texto”" en el desplegable. */
+    searchFor: string;
+    /** Pista al lado de las facetas que piden valor. */
+    pickValue: string;
+    empty: string;
+    /** Prefijo del botón × de cada chip ("Quitar Estado: Pendiente"). */
+    remove: string;
+    /** Prefijo del nombre accesible del campo de fecha ("Valor de Fecha desde"). */
+    valueOf: string;
+    /** Botón que quita todos los filtros (con `onClearAll`). */
+    clearAll: string;
+};
+export declare const DEFAULT_FACETED_SEARCH_LABELS: KapiFacetedSearchLabels;
+/** Atributos nativos (`id`, `style`, `data-*`…) van a la región `role="search"` (el rol es propio). */
+export type KapiFacetedSearchProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "role"> & {
+    /** Facetas que se pueden elegir (lista, fecha o flag), cada una con su `apply`. */
+    facets: ReadonlyArray<KapiFacet>;
+    /** Filtros activos, como chips removibles (el estado lo tiene la pantalla). */
+    chips: ReadonlyArray<KapiFacetChip>;
+    /** Texto libre confirmado con Enter. */
+    onText: (text: string) => void;
+    /**
+     * Con esta prop, la barra muestra "Limpiar todo" mientras haya algún chip; al tocarlo se llama una
+     * sola vez (la pantalla vacía sus filtros de una, sin quitar chip por chip).
+     */
+    onClearAll?: (() => void) | undefined;
+    /** Textos fijos (clave `facetedSearch`). */
+    labels?: KapiLabelsOverride<KapiFacetedSearchLabels> | undefined;
+};
+/**
+ * Búsqueda facetada (patrón Gmail/Jira): un solo campo donde se tipea texto libre (Enter) o se elige
+ * una faceta y su valor; cada filtro activo queda como chip removible. Tonta a propósito: recibe las
+ * facetas y los chips, y avisa con `onText` y el `apply` de cada faceta; no sabe de tablas ni backends.
+ * Teclado: flechas y Enter en el desplegable, Backspace con el campo vacío suelta la faceta pendiente
+ * y después el último chip, Escape cancela la faceta pendiente.
+ */
+export declare function KapiFacetedSearch({ facets, chips, onText, onClearAll, labels, className, onMouseDown, ...rest }: KapiFacetedSearchProps): import("react").JSX.Element;

package/dist/components/inputs/KapiFacetedSearch.js

@@ -0,0 +1,188 @@
+"use client";
+import { useLabels as e } from "../locale/KapiLocaleProvider.js";
+import { joinClasses as t } from "../rootProps.js";
+import { KapiDatePicker as n } from "./KapiDatePicker.js";
+import { KapiDateRangePicker as r } from "./KapiDateRangePicker.js";
+import { KapiTag as i } from "../display/KapiTag.js";
+import { KapiPopover as a } from "../overlays/KapiPopover.js";
+import { facetKeyAction as o, facetMenuItems as s, facetOptionName as c, isDateFacet as l, moveActive as u, toDateRangeValue as d, toDateValue as f } from "./facetedSearchLogic.js";
+/* empty css                      */
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { useId as g, useRef as _, useState as v } from "react";
+import { Search as y } from "lucide-react";
+//#region src/components/inputs/KapiFacetedSearch.tsx
+var b = {
+	input: "Buscar o filtrar",
+	placeholder: "Buscar o filtrar…",
+	searchFor: "Buscar",
+	pickValue: "elegir valor…",
+	empty: "Sin opciones",
+	remove: "Quitar",
+	valueOf: "Valor de",
+	clearAll: "Limpiar todo"
+};
+function x({ facets: x, chips: S, onText: C, onClearAll: w, labels: T, className: E, onMouseDown: D, ...O }) {
+	let k = e("facetedSearch", b, T), A = g(), j = `${A}-list`, M = _(null), N = _(null), P = _(null), [F, I] = v(""), [L, R] = v(null), [z, B] = v(!1), [V, H] = v(-1), U = s(x, L, F), W = l(L), G = z && !W, K = () => requestAnimationFrame(() => N.current?.focus()), q = () => {
+		I(""), R(null), H(-1);
+	}, J = () => {
+		q(), B(!1), K();
+	}, Y = (e) => {
+		e.type === "text" ? (C(e.text), J()) : e.type === "option" ? (L?.apply(e.option.value), J()) : e.facet.kind === "flag" ? (e.facet.apply("true"), J()) : (R(e.facet), I(""), H(-1), B(!0), l(e.facet) ? requestAnimationFrame(() => P.current?.focus()) : K());
+	}, X = (e) => {
+		let t = o(e.key, {
+			input: F,
+			pending: !!L,
+			active: V,
+			open: G,
+			chips: S.length
+		});
+		if (t) switch (e.preventDefault(), t) {
+			case "next":
+			case "prev":
+				B(!0), H((e) => u(G ? e : -1, U.length, t === "next" ? 1 : -1));
+				break;
+			case "select": {
+				let e = U[V];
+				e && Y(e);
+				break;
+			}
+			case "text":
+				C(F.trim()), J();
+				break;
+			case "cancel":
+				q();
+				break;
+			case "close":
+				B(!1), H(-1);
+				break;
+			case "dropPending":
+				R(null), H(-1);
+				break;
+			case "removeLast": S[S.length - 1]?.onRemove();
+		}
+	}, Z = (e) => {
+		let t = e.target.value === "";
+		(e.key === "Escape" || e.key === "Backspace" && t) && (e.preventDefault(), q(), K());
+	}, Q = (e) => `${A}-opt-${e}`;
+	return /* @__PURE__ */ h("div", {
+		...O,
+		ref: M,
+		className: t("kapi-facets", E),
+		role: "search",
+		onMouseDown: (e) => {
+			D?.(e), !e.defaultPrevented && e.target === e.currentTarget && (e.preventDefault(), N.current?.focus(), B(!0));
+		},
+		children: [
+			/* @__PURE__ */ m(y, {
+				className: "kapi-facets__icon",
+				size: 15,
+				"aria-hidden": !0
+			}),
+			S.map((e) => /* @__PURE__ */ m(i, {
+				size: "sm",
+				onRemove: () => {
+					e.onRemove(), K();
+				},
+				removeLabel: `${k.remove} ${e.label}`,
+				children: e.label
+			}, e.key)),
+			L && /* @__PURE__ */ h(i, {
+				size: "sm",
+				tone: "primary",
+				className: "kapi-facets__pending",
+				children: [L.label, ":"]
+			}),
+			W && L ? /* @__PURE__ */ m("span", {
+				className: "kapi-facets__date",
+				onKeyDown: Z,
+				children: L.kind === "dateRange" ? /* @__PURE__ */ m(r, {
+					ref: P,
+					"aria-label": `${k.valueOf} ${L.label}`,
+					onChange: ({ from: e, to: t }) => {
+						e && t && (L.apply(d(e, t)), J());
+					}
+				}) : /* @__PURE__ */ m(n, {
+					ref: P,
+					"aria-label": `${k.valueOf} ${L.label}`,
+					onChange: (e) => {
+						e && (L.apply(f(e)), J());
+					}
+				})
+			}) : /* @__PURE__ */ m("input", {
+				ref: N,
+				className: "kapi-facets__input",
+				type: "text",
+				role: "combobox",
+				autoComplete: "off",
+				"aria-label": k.input,
+				"aria-expanded": G,
+				"aria-controls": j,
+				"aria-autocomplete": "list",
+				"aria-activedescendant": G && V >= 0 ? Q(V) : void 0,
+				placeholder: S.length === 0 && !L ? k.placeholder : void 0,
+				value: F,
+				onFocus: () => B(!0),
+				onClick: () => B(!0),
+				onBlur: (e) => {
+					let t = e.relatedTarget;
+					(!t || !M.current?.contains(t)) && B(!1);
+				},
+				onChange: (e) => {
+					I(e.target.value), B(!0), H(-1);
+				},
+				onKeyDown: X
+			}),
+			w && S.length > 0 && /* @__PURE__ */ m("button", {
+				type: "button",
+				className: "kapi-facets__clear",
+				onClick: () => {
+					w(), q(), K();
+				},
+				children: k.clearAll
+			}),
+			/* @__PURE__ */ h(a, {
+				open: G,
+				anchorRef: M,
+				onClose: () => B(!1),
+				matchAnchorWidth: !0,
+				role: "listbox",
+				id: j,
+				"aria-label": L ? L.label : k.input,
+				closeOnEscape: !1,
+				restoreFocus: !1,
+				className: "kapi-facets__menu",
+				children: [U.length === 0 && /* @__PURE__ */ m("div", {
+					className: "kapi-facets__empty",
+					children: k.empty
+				}), U.map((e, t) => /* @__PURE__ */ m("div", {
+					id: Q(t),
+					role: "option",
+					"aria-selected": t === V,
+					"aria-label": e.type === "option" ? c(e.option) : void 0,
+					className: `kapi-facets__opt${t === V ? " kapi-facets__opt--active" : ""}`,
+					onMouseDown: (e) => e.preventDefault(),
+					onMouseEnter: () => H(t),
+					onClick: () => Y(e),
+					children: e.type === "text" ? /* @__PURE__ */ h("span", { children: [
+						k.searchFor,
+						" “",
+						e.text,
+						"”"
+					] }) : e.type === "option" ? /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("span", { children: e.option.label }), e.option.count !== void 0 && /* @__PURE__ */ m("span", {
+						className: "kapi-facets__count",
+						"aria-hidden": "true",
+						children: e.option.count
+					})] }) : /* @__PURE__ */ h("span", { children: [/* @__PURE__ */ m("span", {
+						className: "kapi-facets__facet",
+						children: e.facet.label
+					}), e.facet.kind !== "flag" && /* @__PURE__ */ h("span", {
+						className: "kapi-facets__hint",
+						children: [" · ", k.pickValue]
+					})] })
+				}, e.type === "facet" ? `f-${e.facet.key}` : e.type === "option" ? `o-${e.option.value}` : "t"))]
+			})
+		]
+	});
+}
+//#endregion
+export { b as DEFAULT_FACETED_SEARCH_LABELS, x as KapiFacetedSearch };

package/dist/components/inputs/KapiField.d.ts

@@ -0,0 +1,33 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type KapiFieldContextValue } from "./fieldLogic";
+export type KapiFieldStatus = "ok" | "err";
+export type { KapiFieldContextValue };
+/** Atributos nativos (`id`, `style`, `data-*`…) van al contenedor; el `id` del control es `htmlFor`. */
+export type KapiFieldProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Texto de la etiqueta. */
+    label?: ReactNode | undefined;
+    /** `id` del control que etiqueta. Opcional: sin él se genera uno y el control lo toma del contexto. */
+    htmlFor?: string | undefined;
+    /** Agrega el asterisco de obligatorio a la etiqueta y `aria-required` al control. */
+    required?: boolean | undefined;
+    /** Texto de ayuda / error bajo el control. */
+    help?: ReactNode | undefined;
+    /** `id` del texto de ayuda. Opcional: sin él se deriva del id del control. */
+    helpId?: string | undefined;
+    /** Estado de validación: pinta la ayuda y le pone ícono; con `err` el control queda `aria-invalid`. */
+    status?: KapiFieldStatus | undefined;
+    /** El control del campo (input, select…); recibe `id`, `aria-describedby` y estado del contexto. */
+    children: ReactNode;
+};
+/** Lo que el `KapiField` que envuelve al control le pasa (ids, required, invalid); `null` fuera de un campo. */
+export declare const useKapiField: () => KapiFieldContextValue | null;
+/** Clases del contenedor. Pura y exportada para testear. */
+export declare const fieldClasses: (className?: string) => string;
+/** Clases del texto de ayuda según el estado. */
+export declare const helpClasses: (status?: KapiFieldStatus) => string;
+/**
+ * Wrapper de formulario: label + control + ayuda (con ícono si hay estado).
+ * Los controles del design system que van adentro toman del contexto su id, la ayuda (`aria-describedby`),
+ * `aria-invalid` y `aria-required`; no hace falta cablear ids a mano.
+ */
+export declare const KapiField: ({ label, htmlFor, required, help, helpId: helpIdProp, status, className, children, ...rest }: KapiFieldProps) => import("react").JSX.Element;

package/dist/components/inputs/KapiField.js

@@ -0,0 +1,60 @@
+"use client";
+import { fieldIds as e } from "./fieldLogic.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { createContext as r, useContext as i, useId as a, useMemo as o } from "react";
+import { AlertTriangle as s, CheckCircle2 as c } from "lucide-react";
+//#region src/components/inputs/KapiField.tsx
+var l = r(null), u = () => i(l), d = (e = "") => ["kapi-field", e].filter(Boolean).join(" "), f = (e) => ["kapi-help", e && `kapi-help--${e}`].filter(Boolean).join(" "), p = ({ label: r, htmlFor: i, required: u = !1, help: p, helpId: m, status: h, className: g, children: _, ...v }) => {
+	let y = a(), b = !!p, { controlId: x, labelId: S, helpId: C } = e({
+		htmlFor: i,
+		autoId: y,
+		helpId: m,
+		hasHelp: b
+	}), w = o(() => ({
+		controlId: x,
+		labelId: r == null ? void 0 : S,
+		helpId: C,
+		required: u,
+		invalid: h === "err"
+	}), [
+		x,
+		S,
+		r,
+		C,
+		u,
+		h
+	]);
+	return /* @__PURE__ */ t(l.Provider, {
+		value: w,
+		children: /* @__PURE__ */ n("div", {
+			...v,
+			className: d(g),
+			children: [
+				r != null && /* @__PURE__ */ n("label", {
+					id: S,
+					htmlFor: x,
+					children: [r, u && " *"]
+				}),
+				_,
+				b ? /* @__PURE__ */ n("span", {
+					id: C,
+					className: f(h),
+					role: h === "err" ? "alert" : void 0,
+					children: [
+						h === "ok" && /* @__PURE__ */ t(c, {
+							size: 13,
+							strokeWidth: 2.2
+						}),
+						h === "err" && /* @__PURE__ */ t(s, {
+							size: 13,
+							strokeWidth: 2.2
+						}),
+						p
+					]
+				}) : null
+			]
+		})
+	});
+};
+//#endregion
+export { p as KapiField, d as fieldClasses, f as helpClasses, u as useKapiField };

package/dist/components/inputs/KapiFileUpload.d.ts

@@ -0,0 +1,58 @@
+import { type CSSProperties, type FocusEvent, type Ref } from "react";
+import "./KapiFileUpload.css";
+import type { KapiLabelsOverride } from "../labelsLogic";
+export type KapiFileUploadProps = {
+    /** Permite varios archivos (agrega) o uno solo (reemplaza). */
+    multiple?: boolean;
+    /** Como el atributo nativo `accept` (p. ej. `.pdf,image/*`). */
+    accept?: string;
+    /** Texto de ayuda bajo el título. Gana sobre `labels.hint`. */
+    hint?: string;
+    /** Emite la lista completa de archivos cada vez que cambia (agregar o quitar). */
+    onChange?: (files: File[]) => void;
+    /** Deshabilita la zona de carga (no abre el selector ni acepta archivos soltados). */
+    disabled?: boolean;
+    /** Clase del envoltorio (zona + lista). */
+    className?: string;
+    /** Estilo del envoltorio (zona + lista). */
+    style?: CSSProperties;
+    /** Textos fijos de la zona y del botón quitar. */
+    labels?: KapiLabelsOverride<KapiFileUploadLabels> | undefined;
+    /**
+     * Nombre para formularios nativos: va al `<input type="file">`, que se sincroniza con la lista
+     * (también lo arrastrado) vía `DataTransfer`. Sin `DataTransfer` (navegadores viejos, jsdom) el input
+     * sólo lleva la última elección: en ese caso el host arma el `FormData` con lo que emite `onChange`.
+     */
+    name?: string;
+    /**
+     * `id` de la zona (el control). Sin él, lo toma del `KapiField` que la envuelve. Por eso el
+     * passthrough de la raíz no incluye `id`: `className`/`style` van al envoltorio.
+     */
+    id?: string;
+    /** Se dispara cuando el foco sale de la zona. */
+    onBlur?: (event: FocusEvent<HTMLDivElement>) => void;
+    /** Marca la zona como inválida (`aria-invalid`). Sin la prop, lo toma del `KapiField` (`status="err"`). */
+    invalid?: boolean;
+    /** `id`s extra para `aria-describedby` (se suman a la ayuda del campo y al hint). */
+    "aria-describedby"?: string;
+    /** Ref a la zona (el elemento enfocable, `role="button"`). */
+    ref?: Ref<HTMLDivElement>;
+};
+export type KapiFileUploadLabels = {
+    /** Texto de la zona, antes del enlace. */
+    drop: string;
+    /** Enlace para elegir archivos. */
+    choose: string;
+    /** Prefijo del botón quitar ("Quitar archivo.pdf"). */
+    remove: string;
+    /** Ayuda bajo el título (sin `hint`). */
+    hint: string;
+};
+export declare const DEFAULT_FILE_UPLOAD_LABELS: KapiFileUploadLabels;
+/**
+ * Dropzone de archivos: click, teclado (Enter / Espacio) o arrastrar; lista con tamaño y quitar.
+ * La lista vive adentro; `onChange` emite el estado resultante.
+ * Dentro de un `KapiField` la zona toma id, nombre (label del campo + texto de la zona), ayuda y `aria-invalid`.
+ * No lleva `aria-required` (no es válido en `role="button"`): el obligatorio se ve en el asterisco del label.
+ */
+export declare const KapiFileUpload: ({ multiple, accept, hint: hintProp, onChange, disabled, className, style, labels, name, id, onBlur, invalid, "aria-describedby": describedBy, ref }: KapiFileUploadProps) => import("react").JSX.Element;