@kapiuara/ui 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,17 @@
+export type FabPosition = {
+    x: number;
+    y: number;
+};
+export type FabSize = {
+    width: number;
+    height: number;
+};
+export type FabViewport = {
+    width: number;
+    height: number;
+};
+/** Mantiene el FAB completo dentro del viewport (con margen). Si no entra, pega arriba/izquierda. */
+export declare const clampFabPosition: (pos: FabPosition, size: FabSize, viewport: FabViewport, margin?: number) => FabPosition;
+/** Umbral (px, Manhattan) a partir del cual un gesto cuenta como arrastre y no como click. */
+export declare const FAB_DRAG_THRESHOLD = 3;
+export declare const isDragMove: (dx: number, dy: number, threshold?: number) => boolean;

package/dist/components/feedback/fabLogic.js

@@ -0,0 +1,10 @@
+//#region src/components/feedback/fabLogic.ts
+var e = (e, t, n, r = 8) => {
+	let i = Math.max(r, n.width - t.width - r), a = Math.max(r, n.height - t.height - r);
+	return {
+		x: Math.min(Math.max(r, e.x), i),
+		y: Math.min(Math.max(r, e.y), a)
+	};
+}, t = (e, t, n = 3) => Math.abs(e) + Math.abs(t) > n;
+//#endregion
+export { e as clampFabPosition, t as isDragMove };

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

@@ -0,0 +1,33 @@
+export { KapiAlert, alertRole } from "./KapiAlert";
+export type { KapiAlertProps, KapiAlertRole, KapiAlertVariant } from "./KapiAlert";
+export { KapiToastContainer, DEFAULT_TOAST_LABELS } from "./KapiToastContainer";
+export type { KapiToastContainerProps, KapiToastLabels } from "./KapiToastContainer";
+export { kapiToast, toastStore, createToastStore, TOAST_ACTION_DURATION, TOAST_DEFAULT_DURATION } from "./toastStore";
+export type { KapiToastAction, KapiToastItem, KapiToastOptions, KapiToastStore, KapiToastStoreOptions, KapiToastVariant } from "./toastStore";
+export { KapiSkeleton } from "./KapiSkeleton";
+export type { KapiSkeletonProps } from "./KapiSkeleton";
+export { KapiFab, DEFAULT_FAB_LABELS } from "./KapiFab";
+export type { KapiFabAction, KapiFabLabels, KapiFabPlacement, KapiFabProps } from "./KapiFab";
+export { KapiTour, useKapiTour } from "./KapiTour";
+export type { KapiTourLabels, KapiTourProps } from "./KapiTour";
+export { TOUR_STORAGE_KEY, tourStorageKey } from "./tourLogic";
+export type { TourStep } from "./tourLogic";
+export { KapiProgress } from "./KapiProgress";
+export type { KapiProgressProps, KapiProgressSize } from "./KapiProgress";
+export { circleDash, clampPercent, formatPercent, progressClasses } from "./progressLogic";
+export type { KapiProgressTone } from "./progressLogic";
+export { KapiEmpty } from "./KapiEmpty";
+export type { KapiEmptyProps } from "./KapiEmpty";
+export { KapiCountdown } from "./KapiCountdown";
+export type { KapiCountdownProps } from "./KapiCountdown";
+export { KapiUnsavedBar, DEFAULT_UNSAVED_BAR_LABELS } from "./KapiUnsavedBar";
+export type { KapiUnsavedBarProps, KapiUnsavedBarLabels } from "./KapiUnsavedBar";
+export { KapiBulkBar, DEFAULT_BULK_BAR_LABELS } from "./KapiBulkBar";
+export type { KapiBulkBarProps, KapiBulkBarLabels } from "./KapiBulkBar";
+export { selectedCountLabel } from "./bulkBarLogic";
+export { KapiOfflineBanner, DEFAULT_OFFLINE_BANNER_LABELS } from "./KapiOfflineBanner";
+export type { KapiOfflineBannerProps, KapiOfflineBannerLabels } from "./KapiOfflineBanner";
+export { DEFAULT_RESTORED_DURATION, nextOfflineBannerPhase, offlineBannerClasses } from "./offlineBannerLogic";
+export type { KapiOfflineBannerPhase } from "./offlineBannerLogic";
+export { DEFAULT_COUNTDOWN_LABELS, DEFAULT_COUNTDOWN_LOCALE, bucketFor, breakdown, chipText, describe, formatClock, formatDuration, parseTarget, remainingMs, resolveTones } from "./countdownLogic";
+export type { KapiCountdownBucket, KapiCountdownLabels, KapiCountdownTarget, KapiCountdownToneMap, KapiCountdownUnitForms, KapiCountdownTone } from "./countdownLogic";

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

@@ -0,0 +1,10 @@
+/** `hidden`: no se muestra · `offline`: sin conexión · `restored`: aviso breve al volver. */
+export type KapiOfflineBannerPhase = "hidden" | "offline" | "restored";
+/** Duración por defecto del aviso "Conexión restablecida" (ms). */
+export declare const DEFAULT_RESTORED_DURATION = 3000;
+/**
+ * Próxima fase ante el estado de conexión. Sin conexión siempre `offline`; al volver, `restored`
+ * (o `hidden` si el aviso está apagado). `restored` → `hidden` lo hace el timer del componente.
+ */
+export declare const nextOfflineBannerPhase: (phase: KapiOfflineBannerPhase, online: boolean, showRestored: boolean) => KapiOfflineBannerPhase;
+export declare const offlineBannerClasses: (phase: KapiOfflineBannerPhase, className?: string) => string;

package/dist/components/feedback/offlineBannerLogic.js

@@ -0,0 +1,8 @@
+//#region src/components/feedback/offlineBannerLogic.ts
+var e = 3e3, t = (e, t, n) => t ? e === "offline" ? n ? "restored" : "hidden" : e : "offline", n = (e, t) => [
+	"kapi-offline-banner",
+	`kapi-offline-banner--${e}`,
+	t
+].filter(Boolean).join(" ");
+//#endregion
+export { e as DEFAULT_RESTORED_DURATION, t as nextOfflineBannerPhase, n as offlineBannerClasses };

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

@@ -0,0 +1,17 @@
+export type KapiProgressTone = "primary" | "success" | "warning" | "danger";
+/** Lleva `value` al rango 0–100. NaN/undefined/Infinity-negativo -> 0; +Infinity -> 100. */
+export declare const clampPercent: (value: number) => number;
+/** Texto del valor, sin decimales sueltos: `42%`. */
+export declare const formatPercent: (value: number) => string;
+/** Geometría del anillo SVG: circunferencia y desplazamiento del trazo para `value`. */
+export declare const circleDash: (value: number, radius: number) => {
+    circumference: number;
+    offset: number;
+};
+/** Clases del contenedor de progreso. */
+export declare const progressClasses: ({ tone, size, variant, className }?: {
+    tone?: KapiProgressTone | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    variant?: "bar" | "circle" | undefined;
+    className?: string | undefined;
+}) => string;

package/dist/components/feedback/progressLogic.js

@@ -0,0 +1,16 @@
+//#region src/components/feedback/progressLogic.ts
+var e = (e) => Number.isNaN(e) ? 0 : Math.min(100, Math.max(0, e)), t = (t) => `${Math.round(e(t))}%`, n = (t, n) => {
+	let r = 2 * Math.PI * n;
+	return {
+		circumference: r,
+		offset: r * (1 - e(t) / 100)
+	};
+}, r = ({ tone: e = "primary", size: t = "md", variant: n = "bar", className: r = "" } = {}) => [
+	"kapi-progress",
+	n === "circle" && "kapi-progress--circle",
+	`kapi-progress--${e}`,
+	t !== "md" && `kapi-progress--${t}`,
+	r
+].filter(Boolean).join(" ");
+//#endregion
+export { n as circleDash, e as clampPercent, t as formatPercent, r as progressClasses };

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

@@ -0,0 +1,62 @@
+export type KapiToastVariant = "success" | "error" | "info" | "warning";
+/** Botón de acción dentro de un toast ("Ver trámite", "Deshacer"). Al hacer click corre `onClick` y cierra el toast. */
+export type KapiToastAction = {
+    /** Texto del botón. */
+    label: string;
+    /** Qué hace la acción; después el toast se cierra. */
+    onClick: () => void;
+};
+/** Opciones de un toast (segundo argumento de `kapiToast.success(…)` y compañía). */
+export type KapiToastOptions = {
+    /** Milisegundos hasta que se cierra solo (default `TOAST_DEFAULT_DURATION`, o `TOAST_ACTION_DURATION` con `action`). */
+    duration?: number | undefined;
+    /** Botón de acción del toast. */
+    action?: KapiToastAction | undefined;
+};
+export type KapiToastItem = {
+    id: number;
+    variant: KapiToastVariant;
+    message: string;
+    /** Acción opcional (botón dentro del toast). */
+    action?: KapiToastAction;
+    /** true durante la animación de salida. */
+    leaving: boolean;
+};
+export declare const TOAST_DEFAULT_DURATION = 2800;
+/** Duración por defecto de un toast con acción: más larga, para que dé tiempo a llegar al botón. */
+export declare const TOAST_ACTION_DURATION = 6000;
+/**
+ * Red de seguridad de la salida. El toast se elimina en el `animationend` de `kapi-toast-out`
+ * (dura `--kapi-dur-fast`, así que el tiempo real sale del token); este timer solo actúa si ese
+ * evento no llega (p. ej. `animation: none` o pestaña en segundo plano). = dur-fast + margen.
+ */
+export declare const TOAST_LEAVE_MS = 200;
+/** Tope visual de toasts apilados. */
+export declare const TOAST_MAX = 6;
+export type KapiToastStore = {
+    subscribe: (listener: () => void) => () => void;
+    getSnapshot: () => readonly KapiToastItem[];
+    /** Agrega un toast; el tercer argumento es la duración en ms (firma corta) o las opciones. Devuelve el id. */
+    push: (variant: KapiToastVariant, message: string, options?: number | KapiToastOptions) => number;
+    dismiss: (id: number) => void;
+    /** Elimina un toast que ya está saliendo (llamalo en el `animationend` de su salida). */
+    remove: (id: number) => void;
+};
+export type KapiToastStoreOptions = {
+    /** Espera máxima de la salida si no llega `animationend` (default `TOAST_LEAVE_MS`). */
+    leaveFallbackMs?: number;
+};
+/** Store imperativo e inmutable (compatible con `useSyncExternalStore`). Exportado para testear. */
+export declare const createToastStore: ({ leaveFallbackMs }?: KapiToastStoreOptions) => KapiToastStore;
+export declare const toastStore: KapiToastStore;
+/**
+ * API imperativa: `kapiToast.success("Guardado")` → id. El segundo argumento es la duración en ms o
+ * las opciones: `kapiToast.success("Trámite creado", { action: { label: "Ver trámite", onClick } })`.
+ */
+export declare const kapiToast: {
+    success: (message: string, options?: number | KapiToastOptions) => number;
+    error: (message: string, options?: number | KapiToastOptions) => number;
+    info: (message: string, options?: number | KapiToastOptions) => number;
+    warning: (message: string, options?: number | KapiToastOptions) => number;
+    dismiss: (id: number) => void;
+};

package/dist/components/feedback/toastStore.js

@@ -0,0 +1,38 @@
+//#region src/components/feedback/toastStore.ts
+var e = 2800, t = 6e3, n = ({ leaveFallbackMs: e = 200 } = {}) => {
+	let t = [], n = 0, r = /* @__PURE__ */ new Set(), i = () => r.forEach((e) => e()), a = (n) => {
+		let r = t.find((e) => e.id === n);
+		r && !r.leaving && (t = t.map((e) => e.id === n ? {
+			...e,
+			leaving: !0
+		} : e), i(), setTimeout(() => o(n), e));
+	}, o = (e) => {
+		t.some((t) => t.id === e && t.leaving) && (t = t.filter((t) => t.id !== e), i());
+	};
+	return {
+		subscribe: (e) => (r.add(e), () => {
+			r.delete(e);
+		}),
+		getSnapshot: () => t,
+		push: (e, r, o) => {
+			let { duration: s, action: c } = typeof o == "number" ? { duration: o } : o ?? {}, l = ++n;
+			return t = [{
+				id: l,
+				variant: e,
+				message: r,
+				leaving: !1,
+				...c ? { action: c } : {}
+			}, ...t].slice(0, 6), i(), setTimeout(() => a(l), s ?? (c ? 6e3 : 2800)), l;
+		},
+		dismiss: a,
+		remove: o
+	};
+}, r = n(), i = {
+	success: (e, t) => r.push("success", e, t),
+	error: (e, t) => r.push("error", e, t),
+	info: (e, t) => r.push("info", e, t),
+	warning: (e, t) => r.push("warning", e, t),
+	dismiss: (e) => r.dismiss(e)
+};
+//#endregion
+export { t as TOAST_ACTION_DURATION, e as TOAST_DEFAULT_DURATION, n as createToastStore, i as kapiToast, r as toastStore };

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

@@ -0,0 +1,64 @@
+export type TourStep = {
+    /** Selector CSS del elemento a destacar. */
+    element: string;
+    title: string;
+    description: string;
+};
+export type Rect = {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+};
+export type Box = {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};
+/** Clave de "tour visto" de un namespace (default `kapi` → `kapi:tour-seen`). Pasala a `markSeen`. */
+export declare const tourStorageKey: (namespace?: string) => string;
+export declare const TOUR_STORAGE_KEY: string;
+/** Clave vieja sin namespace: se migra en la primera lectura de una clave `*:tour-seen`. */
+export declare const LEGACY_TOUR_STORAGE_KEY = "v2_tour_seen";
+export declare const TOUR_PAD = 6;
+export declare const TOUR_POP_WIDTH = 300;
+export declare const TOUR_POP_HEIGHT = 180;
+export declare const TOUR_GAP = 12;
+/** Deja sólo los pasos cuyo selector existe (`exists` se inyecta para testear sin DOM). */
+export declare const filterAvailableSteps: (steps: readonly TourStep[], exists: (selector: string) => boolean) => TourStep[];
+/** Caja del spotlight: el rect del elemento con padding. */
+export declare const highlightBox: (rect: Rect, pad?: number) => Box;
+/** Opciones del motor para el popover del tour (las usa `popoverPosition` y el componente). */
+export declare const TOUR_PLACEMENT: {
+    readonly side: "bottom";
+    readonly align: "start";
+    readonly offset: 12;
+    readonly margin: 12;
+    readonly flip: "if-overflow";
+    readonly mainMin: 12;
+    readonly fallback: {
+        readonly x: 24;
+        readonly y: 24;
+    };
+};
+/**
+ * Posición del popover: debajo del elemento; arriba si no entra (aunque arriba haya menos lugar, con
+ * piso `TOUR_GAP`); horizontal clampeado al viewport. Wrapper de `placePopover`.
+ */
+export declare const popoverPosition: (rect: Rect | null, viewport: {
+    width: number;
+    height: number;
+}, size?: {
+    width: number;
+    height: number;
+}) => {
+    top: number;
+    left: number;
+    width: number;
+};
+/** Marca el tour como visto (no-op si el storage no está disponible). */
+export declare const markTourSeen: (key?: string) => void;
+export declare const hasSeenTour: (key?: string) => boolean;

package/dist/components/feedback/tourLogic.js

@@ -0,0 +1,31 @@
+import { storageKey as e } from "../../hooks/storageLogic.js";
+//#region src/components/feedback/tourLogic.ts
+var t = "tour-seen", n = (n) => e(n, t), r = n(), i = (e, t) => e.filter((e) => {
+	try {
+		return t(e.element);
+	} catch {
+		return !1;
+	}
+}), a = (e, t = 6) => ({
+	top: e.top - t,
+	left: e.left - t,
+	width: e.width + t * 2,
+	height: e.height + t * 2
+}), o = {
+	side: "bottom",
+	align: "start",
+	offset: 12,
+	margin: 12,
+	flip: "if-overflow",
+	mainMin: 12,
+	fallback: {
+		x: 24,
+		y: 24
+	}
+}, s = (e = r) => {
+	try {
+		localStorage.setItem(e, "1");
+	} catch {}
+};
+//#endregion
+export { o as TOUR_PLACEMENT, r as TOUR_STORAGE_KEY, i as filterAvailableSteps, a as highlightBox, s as markTourSeen, n as tourStorageKey };

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

@@ -0,0 +1,2 @@
+/** Etiqueta pluralizada: "1 cambio sin guardar" / "N cambios sin guardar"; sin conteo, genérica. */
+export declare const unsavedCountLabel: (count?: number) => string;

package/dist/components/feedback/unsavedBarLogic.js

@@ -0,0 +1,8 @@
+//#region src/components/feedback/unsavedBarLogic.ts
+var e = (e) => {
+	if (e === void 0 || !Number.isFinite(e)) return "Cambios sin guardar";
+	let t = Math.max(0, Math.floor(e));
+	return `${t} ${t === 1 ? "cambio" : "cambios"} sin guardar`;
+};
+//#endregion
+export { e as unsavedCountLabel };

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

@@ -0,0 +1,81 @@
+import { type InputHTMLAttributes, type ReactNode, type Ref } from "react";
+import { type KapiInputSize } from "./KapiInput";
+import type { KapiFieldStatus } from "./KapiField";
+import "./KapiAutocomplete.css";
+import type { KapiLabelsOverride } from "../labelsLogic";
+export type KapiAutocompleteRenderContext = {
+    /** Current input text (for custom highlighting). */
+    query: string;
+    /** Whether this option is the keyboard/hover active one. */
+    active: boolean;
+};
+type KapiAutocompleteBaseProps<T> = {
+    /** Input text (controlled). */
+    value: string;
+    /** Called with the new text on every keystroke, and with the option label on select (see `fillOnSelect`). */
+    onChange: (text: string) => void;
+    /** Called when a suggestion is chosen (Enter or click). */
+    onSelect?: (option: T) => void;
+    /** Text of an option. Defaults to the string itself or its `label` property. */
+    getLabel?: (option: T) => string;
+    /** Stable React key of an option. Defaults to its label. */
+    getKey?: (option: T) => string | number;
+    /** Custom option content. Defaults to the label with the matched fragment highlighted. */
+    renderOption?: (option: T, context: KapiAutocompleteRenderContext) => ReactNode;
+    /** Write the chosen option label into the input via `onChange` on select. Default `true`. */
+    fillOnSelect?: boolean;
+    /** Minimum trimmed characters before the dropdown opens (and async loads fire). Default `0`. */
+    minChars?: number;
+    /** Max suggestions shown. Default `8`. */
+    maxResults?: number;
+    /** Debounce for `loadOptions`, in ms. Default `250`. */
+    debounceMs?: number;
+    /** Empty state copy. Wins over `labels.noResults` ("Sin resultados"). */
+    noResultsText?: string;
+    /** Loading state copy. Wins over `labels.loading` ("Buscando…"). */
+    loadingText?: string;
+    /** Fixed copy (key `autocomplete`). */
+    labels?: KapiLabelsOverride<KapiAutocompleteLabels> | undefined;
+    /** Tamaño del campo: `sm` · `md` · `lg`. */
+    size?: KapiInputSize;
+    /** Estado de validación (borde y ayuda); con `label`/`help` lo pinta el `KapiField`. */
+    status?: KapiFieldStatus;
+    /** Etiqueta visible; con ella (o `help`) el input se envuelve en un `KapiField`. */
+    label?: ReactNode;
+    /** Marca el campo obligatorio (`required` en el input y en el `KapiField`). */
+    required?: boolean;
+    /** Texto de ayuda o error bajo el campo. */
+    help?: ReactNode;
+    /** Class of the `KapiField` wrapper (if `label`/`help`). `className` goes to the input. */
+    fieldClassName?: string;
+    /** Clase del `<input>` (la del envoltorio va en `fieldClassName`). */
+    className?: string;
+    /** Ref al `<input>` (React 19 pasa `ref` como prop). */
+    ref?: Ref<HTMLInputElement>;
+};
+/** Synchronous suggestions: filtered locally by label. */
+type KapiAutocompleteSyncProps<T> = {
+    /** Sugerencias fijas; se filtran localmente por su texto. Excluye `loadOptions`. */
+    options: readonly T[];
+    /** Solo en el modo asíncrono (excluye `options`). */
+    loadOptions?: never;
+};
+/** Asynchronous suggestions: `loadOptions` owns the filtering; results are not re-filtered. */
+type KapiAutocompleteAsyncProps<T> = {
+    /** Busca las sugerencias para el texto tipeado; el resultado se muestra tal cual (sin refiltrar). */
+    loadOptions: (query: string) => Promise<readonly T[]>;
+    /** Solo en el modo síncrono (excluye `loadOptions`). */
+    options?: never;
+};
+export type KapiAutocompleteProps<T> = KapiAutocompleteBaseProps<T> & (KapiAutocompleteSyncProps<T> | KapiAutocompleteAsyncProps<T>) & Omit<InputHTMLAttributes<HTMLInputElement>, keyof KapiAutocompleteBaseProps<T> | "size" | "role" | "type" | "defaultValue" | "onSelect" | "autoComplete" | "aria-expanded" | "aria-controls" | "aria-activedescendant">;
+export type KapiAutocompleteLabels = {
+    noResults: string;
+    loading: string;
+};
+export declare const DEFAULT_AUTOCOMPLETE_LABELS: KapiAutocompleteLabels;
+/**
+ * Free-text typeahead (ARIA combobox + listbox). Suggestions come from `options` (filtered locally)
+ * or `loadOptions` (debounced, with a loading state and a stale-response guard).
+ */
+export declare const KapiAutocomplete: <T>(props: KapiAutocompleteProps<T>) => import("react").JSX.Element;
+export {};

package/dist/components/inputs/KapiAutocomplete.js

@@ -0,0 +1,205 @@
+"use client";
+import { assignRef as e, fieldControlProps as t, joinIds as n } from "./fieldLogic.js";
+import { KapiField as r, useKapiField as ee } from "./KapiField.js";
+import { useLabels as te } from "../locale/KapiLocaleProvider.js";
+import { inputClasses as ne } from "./KapiInput.js";
+import { resolveKapiRoot as re } from "../../hooks/kapiRoot.js";
+import { AUTOCOMPLETE_MENU_PLACEMENT as ie, clampActiveIndex as ae, createRequestTracker as oe, defaultGetLabel as se, filterOptions as ce, highlightParts as le, moveActiveIndex as ue, shouldOpen as de } from "./autocompleteLogic.js";
+import { usePlacement as fe } from "../../hooks/usePlacement.js";
+/* empty css                     */
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useCallback as o, useEffect as s, useId as pe, useLayoutEffect as me, useMemo as he, useRef as c, useState as l } from "react";
+import { createPortal as ge } from "react-dom";
+//#region src/components/inputs/KapiAutocomplete.tsx
+var u = {
+	noResults: "Sin resultados",
+	loading: "Buscando…"
+}, _e = 6, d = (d) => {
+	let { value: f, onChange: p, onSelect: m, getLabel: h, getKey: g, renderOption: _, fillOnSelect: v = !0, minChars: ve = 0, maxResults: y = 8, debounceMs: b = 250, noResultsText: ye, loadingText: be, labels: xe, size: Se, status: x, label: S, required: C, help: w, fieldClassName: Ce, className: we, ref: T, options: E, loadOptions: D, id: Te, onFocus: Ee, onBlur: De, onKeyDown: Oe, ...O } = d, k = te("autocomplete", u, xe), ke = ye ?? k.noResults, Ae = be ?? k.loading, je = ee(), A = S != null || !!w, j = pe(), M = Te ?? (A ? j : je?.controlId ?? j), N = `${M}-listbox`, P = w ? `${M}-help` : void 0, F = (e) => `${M}-opt-${e}`, I = h ?? se, Me = o((t) => {
+		e(T, t);
+	}, [T]), [Ne, L] = l(!1), [Pe, R] = l(!1), [Fe, z] = l(-1), [B, V] = l({
+		query: "",
+		options: []
+	}), [H] = l(oe), U = c(null), W = c(null), G = c(null), K = c(D);
+	s(() => {
+		K.current = D;
+	});
+	let q = D !== void 0, J = de({
+		focused: Ne,
+		dismissed: Pe,
+		query: f,
+		minChars: ve
+	}), Y = f.trim();
+	s(() => {
+		if (!q || !J) return;
+		let e = Y, t = setTimeout(() => {
+			let t = K.current;
+			if (!t) return;
+			let n = H.next();
+			t(e).then((t) => {
+				H.isCurrent(n) && V({
+					query: e,
+					options: t
+				});
+			}, () => {
+				H.isCurrent(n) && V({
+					query: e,
+					options: []
+				});
+			});
+		}, b);
+		return () => clearTimeout(t);
+	}, [
+		q,
+		J,
+		Y,
+		b,
+		H
+	]), s(() => (J || H.cancel(), () => H.cancel()), [J, H]);
+	let X = q && J && B.query !== Y, Ie = he(() => q ? B.options.slice(0, y > 0 ? y : void 0) : ce(E ?? [], f, I, y), [
+		q,
+		B.options,
+		E,
+		f,
+		y
+	]), Z = X ? [] : Ie, Q = ae(Fe, Z.length);
+	s(() => {
+		if (!J || Q < 0) return;
+		let e = U.current?.children[Q];
+		e instanceof HTMLElement && typeof e.scrollIntoView == "function" && e.scrollIntoView({ block: "nearest" });
+	}, [J, Q]);
+	let Le = J && !X && Z.length === 0, $ = J && (X || Z.length > 0 || Le), { placement: Re, style: ze, update: Be } = fe({
+		open: $,
+		anchor: W,
+		floatingRef: G,
+		...ie,
+		offset: _e
+	});
+	me(() => {
+		$ && Be();
+	}, [
+		$,
+		Z.length,
+		X,
+		Be
+	]);
+	let Ve = o((e) => {
+		v && p(I(e)), m?.(e), R(!0), z(-1);
+	}, [
+		v,
+		p,
+		m,
+		h
+	]), He = (e) => {
+		p(e.target.value), R(!1), z(-1);
+	}, Ue = (e) => {
+		if (Oe?.(e), !e.defaultPrevented) switch (e.key) {
+			case "ArrowDown":
+			case "ArrowUp":
+				if (e.preventDefault(), !J) {
+					R(!1);
+					return;
+				}
+				z(ue(Q, Z.length, e.key === "ArrowDown" ? 1 : -1));
+				break;
+			case "Enter":
+				if (J && Q >= 0) {
+					e.preventDefault();
+					let t = Z[Q];
+					t !== void 0 && Ve(t);
+				}
+				break;
+			case "Escape": J && (e.preventDefault(), e.stopPropagation(), R(!0), z(-1));
+		}
+	}, We = (e) => {
+		L(!0), R(!1), Ee?.(e);
+	}, Ge = (e) => {
+		L(!1), z(-1), De?.(e);
+	}, Ke = $ ? re(W.current) : null, qe = /* @__PURE__ */ a("div", {
+		ref: W,
+		className: ["kapi-ac", X && "kapi-ac--loading"].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ i("input", {
+				...O,
+				ref: Me,
+				type: "text",
+				role: "combobox",
+				autoComplete: "off",
+				"aria-autocomplete": "list",
+				"aria-expanded": $,
+				"aria-controls": N,
+				"aria-activedescendant": $ && Q >= 0 ? F(Q) : void 0,
+				"aria-busy": X || void 0,
+				...t(A ? null : je, {
+					id: M,
+					describedBy: n(P, O["aria-describedby"]),
+					invalid: x ? x === "err" : void 0
+				}),
+				required: C,
+				className: ne({
+					size: Se,
+					status: x,
+					className: we
+				}),
+				value: f,
+				onChange: He,
+				onKeyDown: Ue,
+				onFocus: We,
+				onBlur: Ge
+			}),
+			X && /* @__PURE__ */ i("span", {
+				className: "kapi-ac__spinner kapi-spinner kapi-spinner--sm",
+				"aria-hidden": "true"
+			}),
+			Ke && ge(/* @__PURE__ */ a("div", {
+				ref: G,
+				className: "kapi-ac__menu",
+				"data-side": Re?.side ?? "bottom",
+				style: ze,
+				onMouseDown: (e) => e.preventDefault(),
+				children: [/* @__PURE__ */ i("ul", {
+					ref: U,
+					id: N,
+					role: "listbox",
+					className: "kapi-ac__list",
+					hidden: Z.length === 0,
+					children: Z.map((e, t) => {
+						let n = I(e), r = t === Q;
+						return /* @__PURE__ */ i("li", {
+							id: F(t),
+							role: "option",
+							"aria-selected": r,
+							className: ["kapi-ac__opt", r && "kapi-ac__opt--active"].filter(Boolean).join(" "),
+							onMouseEnter: () => z(t),
+							onClick: () => Ve(e),
+							children: _ ? _(e, {
+								query: f,
+								active: r
+							}) : le(n, f).map((e, t) => e.match ? /* @__PURE__ */ i("mark", {
+								className: "kapi-ac__mark",
+								children: e.text
+							}, t) : /* @__PURE__ */ i("span", { children: e.text }, t))
+						}, g ? g(e) : `${n}-${t}`);
+					})
+				}), (X || Le) && /* @__PURE__ */ i("div", {
+					className: "kapi-ac__status",
+					role: "status",
+					"aria-live": "polite",
+					children: X ? Ae : ke
+				})]
+			}), Ke)
+		]
+	});
+	return A ? /* @__PURE__ */ i(r, {
+		label: S,
+		htmlFor: M,
+		required: C,
+		help: w,
+		helpId: P,
+		status: x,
+		className: Ce,
+		children: qe
+	}) : qe;
+};
+//#endregion
+export { u as DEFAULT_AUTOCOMPLETE_LABELS, d as KapiAutocomplete };

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

@@ -0,0 +1,23 @@
+import type { ButtonHTMLAttributes, ReactNode, Ref } from "react";
+export type KapiButtonVariant = "default" | "primary" | "danger" | "success" | "warning" | "info" | "tonal" | "ghost" | "outline-primary" | "outline-success" | "outline-warning" | "outline-danger" | "tonal-primary" | "tonal-success" | "tonal-warning" | "tonal-danger";
+export type KapiButtonSize = "sm" | "md" | "lg";
+export type KapiButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+    /** Estilo del botón. `default` es el neutro (borde + card). */
+    variant?: KapiButtonVariant;
+    /** Escala de control compartida con inputs y selects (sm / md / lg). */
+    size?: KapiButtonSize;
+    /** Botón cuadrado sólo de ícono (pasa `aria-label`). */
+    iconOnly?: boolean;
+    /** Borde con el color del texto (`currentColor`). */
+    bordered?: boolean;
+    /** Ícono (lucide-react) a la izquierda del texto. */
+    icon?: ReactNode;
+    /** Texto del botón (va a la derecha del `icon`). */
+    children?: ReactNode;
+    /** Ref al `<button>` nativo. */
+    ref?: Ref<HTMLButtonElement>;
+};
+/** Clases de un botón. Pura y exportada: es lo que se testea (no el markup). */
+export declare const buttonClasses: ({ variant, size, iconOnly, bordered, className }?: Pick<KapiButtonProps, "variant" | "size" | "iconOnly" | "bordered" | "className">) => string;
+/** Botón base: variantes de color, tamaños, sólo ícono y borde. Acepta los atributos nativos de `<button>`. */
+export declare const KapiButton: ({ variant, size, iconOnly, bordered, icon, className, type, children, ref, ...rest }: KapiButtonProps) => import("react").JSX.Element;