@kapiuara/ui 0.0.0-stage → 0.1.1

package/dist/components/navigation/KapiSteps.js

@@ -0,0 +1,63 @@
+"use client";
+import { useLabels as e } from "../locale/KapiLocaleProvider.js";
+import { joinClasses as t } from "../rootProps.js";
+/* empty css              */
+import { resolveSteps as n, stepsClasses as r } from "./stepsLogic.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Check as o, X as s } from "lucide-react";
+//#region src/components/navigation/KapiSteps.tsx
+var c = {
+	complete: "Completado",
+	current: "En curso",
+	upcoming: "Pendiente",
+	error: "Con error"
+}, l = {
+	size: 14,
+	strokeWidth: 3,
+	"aria-hidden": !0
+};
+function u({ steps: u, current: d, orientation: f = "vertical", size: p = "md", labels: m, className: h, ref: g, ..._ }) {
+	let v = e("steps", c, m), { statuses: y, currentIndex: b } = n(u, d);
+	return /* @__PURE__ */ i("ol", {
+		..._,
+		ref: g,
+		className: t(r(f, p), h),
+		children: u.map((e, t) => {
+			let n = y[t] ?? "upcoming";
+			return /* @__PURE__ */ a("li", {
+				className: `kapi-steps__item is-${n}`,
+				"aria-current": t === b ? "step" : void 0,
+				children: [/* @__PURE__ */ i("span", {
+					className: "kapi-steps__head",
+					children: /* @__PURE__ */ i("span", {
+						className: "kapi-steps__marker",
+						"aria-hidden": "true",
+						children: n === "complete" ? /* @__PURE__ */ i(o, { ...l }) : n === "error" ? /* @__PURE__ */ i(s, { ...l }) : t + 1
+					})
+				}), /* @__PURE__ */ a("span", {
+					className: "kapi-steps__body",
+					children: [
+						/* @__PURE__ */ i("span", {
+							className: "kapi-steps__label",
+							children: e.label
+						}),
+						/* @__PURE__ */ a("span", {
+							className: "kapi-steps__sr",
+							children: [
+								" (",
+								v[n],
+								")"
+							]
+						}),
+						e.description != null && /* @__PURE__ */ i("span", {
+							className: "kapi-steps__desc",
+							children: e.description
+						})
+					]
+				})]
+			}, e.id);
+		})
+	});
+}
+//#endregion
+export { c as DEFAULT_STEPS_LABELS, u as KapiSteps };

package/dist/components/navigation/KapiTabs.d.ts

@@ -0,0 +1,56 @@
+import "./navigation.css";
+import { type HTMLAttributes, type ReactNode } from "react";
+/** Pestaña de `KapiTabs`. `Id` acota los ids (p. ej. una unión de literales). */
+export type KapiTabItem<Id extends string = string> = {
+    /** Id único de la pestaña (es el `value` cuando está activa). */
+    id: Id;
+    /** Texto visible de la pestaña. */
+    label: ReactNode;
+    /** Ícono (lucide-react) antes del label. */
+    icon?: ReactNode | undefined;
+    /** Contador en una píldora tras el label (p. ej. documentos adjuntos); `0` también se muestra. */
+    count?: number | undefined;
+};
+/**
+ * Atributos nativos (`id`, `style`, `aria-label`, `data-*`…) van al `role="tablist"`. `Id` se infiere de
+ * `tabs` (o del `onChange`), sin escribir el argumento de tipo.
+ */
+export type KapiTabsProps<Id extends string = string> = Omit<HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "role" | "defaultValue"> & {
+    /** Pestañas, en orden; cada una con `id`, `label` e `icon` opcional. */
+    tabs: KapiTabItem<Id>[];
+    /** Id de la pestaña activa (controlado). */
+    value: Id;
+    /** Se llama con el `id` de la pestaña elegida (click o flechas). */
+    onChange: (id: Id) => void;
+    /**
+     * Base de ids para vincular cada tab con su `KapiTabPanel` (misma `idBase`). Con ella, cada tab
+     * lleva `aria-controls`; sin ella, los tabs igual tienen id estable pero no apuntan a paneles
+     * (el consumidor que pinta el contenido por su cuenta no queda con referencias rotas).
+     */
+    idBase?: string;
+};
+/**
+ * Pestañas segmentadas (controladas), con navegación por teclado (activación automática).
+ * Para el vínculo tab ↔ panel del patrón WAI-ARIA, pasar `idBase` y renderizar `KapiTabPanel`.
+ */
+export declare function KapiTabs<Id extends string = string>({ tabs, value, onChange, className, idBase, onKeyDown: onKeyDownProp, ...rest }: KapiTabsProps<Id>): import("react").JSX.Element;
+export type KapiTabPanelProps = {
+    /** Misma base que el `idBase` del `KapiTabs` que lo controla. */
+    idBase: string;
+    /** Id de la pestaña dueña del panel. */
+    tabId: string;
+    /** Si es el panel de la pestaña activa. Los inactivos quedan `hidden`. */
+    active: boolean;
+    /** Mantener montado el contenido de los paneles inactivos (conserva su estado). */
+    keepMounted?: boolean;
+    /** Clase del panel (`role="tabpanel"`). */
+    className?: string;
+    /** Contenido del panel. */
+    children?: ReactNode;
+};
+/**
+ * Panel de una pestaña (`role="tabpanel"`), nombrado por su tab vía `aria-labelledby` y enfocable
+ * (`tabIndex=0`) para llegar al contenido con Tab. Los inactivos se renderizan `hidden` para que las
+ * referencias `aria-controls` sigan siendo válidas.
+ */
+export declare function KapiTabPanel({ idBase, tabId: owner, active, keepMounted, className, children }: KapiTabPanelProps): import("react").JSX.Element;

package/dist/components/navigation/KapiTabs.js

@@ -0,0 +1,81 @@
+"use client";
+import { joinClasses as e } from "../rootProps.js";
+import { useSlidingIndicator as t } from "../../hooks/useSlidingIndicator.js";
+/* empty css               */
+import { useScrollEdges as n } from "../../hooks/useScrollEdges.js";
+import { nextTabId as r, tabClasses as i, tabId as a, tabPanelId as o } from "./tabsLogic.js";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useCallback as u, useId as d, useLayoutEffect as f, useRef as p } from "react";
+//#region src/components/navigation/KapiTabs.tsx
+function m({ tabs: m, value: h, onChange: g, className: _, idBase: v, onKeyDown: y, ...b }) {
+	let x = d(), S = v ?? x, C = p({}), { containerRef: w, indicatorRef: T } = t({
+		active: h,
+		deps: [m],
+		findActive: (e) => e.querySelector("[role=\"tab\"][aria-selected=\"true\"]")
+	}), { ref: E, edges: D, reveal: O } = n({ axis: "x" }), k = u((e) => {
+		w.current = e, E.current = e;
+	}, [w, E]), A = p(!1);
+	f(() => {
+		let e = w.current?.querySelector("[role=\"tab\"][aria-selected=\"true\"]");
+		e && O(e, { instant: !A.current }), A.current = !0;
+	}, [
+		h,
+		w,
+		O
+	]);
+	let j = (e) => {
+		if (y?.(e), e.defaultPrevented) return;
+		let t = r(m.map((e) => e.id), h, e.key);
+		t !== void 0 && (e.preventDefault(), g(t), C.current[t]?.focus());
+	};
+	return /* @__PURE__ */ l("div", {
+		...b,
+		ref: k,
+		className: e("kapi-tabs", "kapi-fade-x", _),
+		"data-edge-start": D.start ? "" : void 0,
+		"data-edge-end": D.end ? "" : void 0,
+		role: "tablist",
+		onKeyDown: j,
+		children: [/* @__PURE__ */ c("span", {
+			ref: T,
+			className: "kapi-tabs__indicator",
+			"aria-hidden": "true"
+		}), m.map((e) => {
+			let t = e.id === h;
+			return /* @__PURE__ */ l("button", {
+				ref: (t) => {
+					C.current[e.id] = t;
+				},
+				type: "button",
+				id: a(S, e.id),
+				role: "tab",
+				"aria-controls": v ? o(v, e.id) : void 0,
+				"aria-selected": t,
+				tabIndex: t ? 0 : -1,
+				className: i(t),
+				onClick: () => g(e.id),
+				children: [
+					e.icon,
+					e.label,
+					e.count !== void 0 && /* @__PURE__ */ l(s, { children: [" ", /* @__PURE__ */ c("span", {
+						className: "kapi-tabs__count",
+						children: e.count
+					})] })
+				]
+			}, e.id);
+		})]
+	});
+}
+function h({ idBase: e, tabId: t, active: n, keepMounted: r = !1, className: i, children: s }) {
+	return /* @__PURE__ */ c("div", {
+		id: o(e, t),
+		role: "tabpanel",
+		"aria-labelledby": a(e, t),
+		tabIndex: 0,
+		hidden: !n,
+		className: i,
+		children: n || r ? s : null
+	});
+}
+//#endregion
+export { h as KapiTabPanel, m as KapiTabs };

package/dist/components/navigation/KapiTree.d.ts

@@ -0,0 +1,56 @@
+import { type HTMLAttributes, type ReactNode, type Ref } from "react";
+import { type KapiTreeNode } from "./treeLogic";
+import "./navigation.css";
+import type { KapiLabelsOverride } from "../labelsLogic";
+export type KapiTreeLabels = {
+    /** Descripción de un nodo mientras carga sus hijos. */
+    loading: string;
+};
+export declare const DEFAULT_TREE_LABELS: KapiTreeLabels;
+/**
+ * Atributos nativos (`id`, `style`, `aria-label`, `data-*`…) van al `<ul role="tree">`. `T` (el `data` de los
+ * nodos) e `Id` se infieren de `nodes`, sin escribir los argumentos de tipo.
+ */
+export type KapiTreeProps<T = unknown, Id extends string = string> = Omit<HTMLAttributes<HTMLUListElement>, "children" | "onSelect" | "defaultValue" | "onChange"> & {
+    /** Nodos raíz del árbol, con sus hijos anidados (o cargados al expandir con `onExpand`). */
+    nodes: KapiTreeNode<T, Id>[];
+    /** Controlado: ids expandidos. */
+    expanded?: Id[];
+    /** Expandidos al inicio cuando no es controlado. */
+    defaultExpanded?: Id[];
+    /** Nueva lista de expandidos (controlado o no). */
+    onExpandedChange?: (expanded: Id[]) => void;
+    /**
+     * Pide los hijos de un nodo diferido: se dispara al expandir un nodo con `hasChildren`, sin `children` y que
+     * no esté `loading`. No se repite para un nodo ya cargado (para seguir cada expansión, `onExpandedChange`).
+     * Si la carga falla, el consumidor tiene que volver a poner `loading: false` (sin `children`) para que el
+     * nodo pueda reintentar al expandirse de nuevo.
+     */
+    onExpand?: (node: KapiTreeNode<T, Id>) => void;
+    /** Controlado: ids seleccionados. */
+    selected?: Id[];
+    /** Seleccionados al inicio cuando no es controlado. */
+    defaultSelected?: Id[];
+    /** Nueva selección (controlado o no) y el nodo que la cambió. */
+    onSelectedChange?: (selected: Id[], node: KapiTreeNode<T, Id>) => void;
+    /** Varios seleccionados a la vez (`aria-multiselectable`): Espacio/Enter/clic alternan. */
+    multiple?: boolean;
+    /**
+     * Contenido rico del nodo (ícono, contador…). El nombre accesible sale de lo que renderiza. Si incluye
+     * controles (un botón, un enlace), Enter/Espacio y el type-ahead sobre ellos no los toma el árbol: se activan
+     * de forma nativa. Las flechas, Inicio/Fin y `*` siguen siendo del árbol (mueven el foco entre nodos), así que
+     * un control que las necesite (un input con cursor, un slider) debe frenar su propagación con `stopPropagation`.
+     * Un clic en ellos sí llega a la fila (que selecciona): usa `stopPropagation` para evitarlo.
+     */
+    renderLabel?: (node: KapiTreeNode<T, Id>) => ReactNode;
+    /** Textos fijos (clave `tree`). */
+    labels?: KapiLabelsOverride<KapiTreeLabels> | undefined;
+    /** Ref al `<ul role="tree">`. */
+    ref?: Ref<HTMLUListElement>;
+};
+/**
+ * Árbol (WAI-ARIA APG, Tree View): `tree` / `treeitem` / `group` con nivel, posición y tabindex itinerante.
+ * Flechas recorren y abren/cierran, Home/End, Enter/Espacio seleccionan, `*` expande los hermanos y escribir
+ * salta al nodo que empieza con ese texto. Los hijos diferidos se piden en `onExpand`.
+ */
+export declare function KapiTree<T = unknown, Id extends string = string>({ nodes, expanded: expandedProp, defaultExpanded, onExpandedChange, onExpand, selected: selectedProp, defaultSelected, onSelectedChange, multiple, renderLabel, labels, className, onKeyDown, onFocus, ...rest }: KapiTreeProps<T, Id>): import("react").JSX.Element;

package/dist/components/navigation/KapiTree.js

@@ -0,0 +1,157 @@
+"use client";
+import { useLabels as e } from "../locale/KapiLocaleProvider.js";
+import { joinClasses as t } from "../rootProps.js";
+/* empty css               */
+import { TREE_KEYS as n, flattenVisible as r, isExpandable as i, matchTypeahead as a, needsChildren as o, resolveTabStop as s, toggleSelectedId as c, treeKeyAction as l } from "./treeLogic.js";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useId as p, useMemo as m, useRef as h, useState as g } from "react";
+import { ChevronRight as _ } from "lucide-react";
+//#region src/components/navigation/KapiTree.tsx
+var v = { loading: "Cargando…" }, y = 500, b = (e) => e.length === 1 && e.trim() !== "";
+function x({ nodes: x, expanded: S, defaultExpanded: ee = [], onExpandedChange: C, onExpand: w, selected: T, defaultSelected: E = [], onSelectedChange: D, multiple: O = !1, renderLabel: k, labels: A, className: j, onKeyDown: M, onFocus: te, ...ne }) {
+	let re = e("tree", v, A), N = p(), [P, F] = g(ee), [I, L] = g(E), [R, z] = g(null), B = h(/* @__PURE__ */ new Map()), V = h({ text: "" }), H = S ?? P, U = T ?? I, W = m(() => r(x, H), [x, H]), G = s(x, W, R, U), K = m(() => new Map(W.map((e, t) => [e.node.id, {
+		...e,
+		node: e.node,
+		index: t
+	}])), [W]), q = (e, t) => {
+		S === void 0 && F(e), C?.(e), t.filter(o).forEach((e) => w?.(e));
+	}, J = (e) => !e.disabled && i(e), Y = (e) => {
+		J(e) && !H.includes(e.id) && q([...H, e.id], [e]);
+	}, X = (e) => {
+		J(e) && H.includes(e.id) && q(H.filter((t) => t !== e.id), []);
+	}, ie = (e) => {
+		H.includes(e.id) ? X(e) : Y(e);
+	}, Z = (e) => {
+		if (e.disabled) return;
+		let t = c(U, e.id, O);
+		T === void 0 && L(t), D?.(t, e);
+	}, Q = (e) => {
+		z(e), B.current.get(e)?.focus();
+	}, ae = (e) => {
+		if (M?.(e), e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey) return;
+		let t = G;
+		if (t === null) return;
+		let r = e.target.getAttribute("role") === "treeitem", i = e.key === "Enter" || e.key === " ";
+		if (!r && (i || b(e.key))) return;
+		if (n.has(e.key)) {
+			e.preventDefault();
+			let n = l({
+				key: e.key,
+				nodes: x,
+				visible: W,
+				focusId: t,
+				expanded: H
+			});
+			if (!n) return;
+			switch (n.type) {
+				case "focus":
+					Q(n.id);
+					break;
+				case "select": {
+					let e = K.get(n.id)?.node;
+					e && Z(e);
+					break;
+				}
+				case "expand": {
+					let e = K.get(n.id)?.node;
+					e && Y(e);
+					break;
+				}
+				case "collapse": {
+					let e = K.get(n.id)?.node;
+					e && X(e);
+					break;
+				}
+				case "expandMany": {
+					let e = n.ids.filter((e) => !H.includes(e)), t = e.flatMap((e) => K.get(e)?.node ?? []);
+					q([...H, ...e], t);
+					break;
+				}
+			}
+			return;
+		}
+		if (!b(e.key)) return;
+		let o = K.get(t)?.index;
+		if (o === void 0) return;
+		let s = V.current;
+		clearTimeout(s.timer), s.text += e.key, s.timer = setTimeout(() => s.text = "", y);
+		let c = a(W, o, s.text);
+		c && (e.preventDefault(), Q(c));
+	}, oe = (e) => {
+		te?.(e);
+		let t = e.target.dataset.treeId;
+		t !== void 0 && z(t);
+	}, $ = (e) => e.map((e) => {
+		let n = K.get(e.id);
+		if (!n) return null;
+		let r = i(e), a = r && H.includes(e.id), o = U.includes(e.id), s = r && e.loading === !0, c = `${N}-l-${n.index}`, l = `${N}-w-${n.index}`;
+		return /* @__PURE__ */ f("li", {
+			ref: (t) => {
+				t ? B.current.set(e.id, t) : B.current.delete(e.id);
+			},
+			role: "treeitem",
+			"data-tree-id": e.id,
+			className: t("kapi-tree__item", o && "kapi-tree__item--selected", a && "kapi-tree__item--open"),
+			"aria-labelledby": c,
+			"aria-describedby": s ? l : void 0,
+			"aria-level": n.level,
+			"aria-setsize": n.setSize,
+			"aria-posinset": n.posInSet,
+			"aria-expanded": r ? a : void 0,
+			"aria-selected": o,
+			"aria-disabled": e.disabled || void 0,
+			"aria-busy": s || void 0,
+			tabIndex: G === e.id ? 0 : -1,
+			children: [/* @__PURE__ */ f("div", {
+				className: "kapi-tree__row",
+				style: { "--kapi-tree-level": n.level },
+				onClick: () => Z(e),
+				children: [
+					r ? /* @__PURE__ */ d("span", {
+						className: "kapi-tree__toggle",
+						"aria-hidden": "true",
+						onClick: (t) => {
+							t.stopPropagation(), ie(e);
+						},
+						children: /* @__PURE__ */ d(_, {
+							className: "kapi-tree__chevron",
+							size: 16,
+							strokeWidth: 2.2
+						})
+					}) : /* @__PURE__ */ d("span", {
+						className: "kapi-tree__toggle kapi-tree__toggle--leaf",
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ d("span", {
+						id: c,
+						className: "kapi-tree__label",
+						children: k ? k(e) : e.label
+					}),
+					s && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("span", {
+						className: "kapi-tree__spinner kapi-spinner kapi-spinner--sm",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ d("span", {
+						id: l,
+						className: "kapi-tree__sr",
+						children: re.loading
+					})] })
+				]
+			}), a && e.children?.length ? /* @__PURE__ */ d("ul", {
+				role: "group",
+				className: "kapi-tree__group",
+				children: $(e.children)
+			}) : null]
+		}, e.id);
+	});
+	return /* @__PURE__ */ d("ul", {
+		...ne,
+		role: "tree",
+		"aria-multiselectable": O || void 0,
+		className: t("kapi-tree", j),
+		onKeyDown: ae,
+		onFocus: oe,
+		children: $(x)
+	});
+}
+//#endregion
+export { v as DEFAULT_TREE_LABELS, x as KapiTree };

package/dist/components/navigation/KapiWizard.d.ts

@@ -0,0 +1,49 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import type { KapiLabelsOverride } from "../labelsLogic";
+export type KapiWizardStep = {
+    title: string;
+    desc?: ReactNode | undefined;
+    content: ReactNode;
+    /** Si devuelve false, "Siguiente"/"Finalizar" NO avanza (validación por paso). */
+    validate?: (() => boolean) | undefined;
+};
+export type KapiWizardOrientation = "horizontal" | "vertical";
+export type KapiWizardLabels = {
+    finish: string;
+    cancel: string;
+    back: string;
+    next: string;
+};
+export declare const DEFAULT_WIZARD_LABELS: KapiWizardLabels;
+/** Atributos nativos (`id`, `style`, `data-*`…) van al contenedor del wizard. */
+export type KapiWizardProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Pasos, en orden; cada uno con título, contenido y `validate` opcional. */
+    steps: KapiWizardStep[];
+    /** Disposición del indicador de pasos. */
+    orientation?: KapiWizardOrientation;
+    /** Se dispara con el botón del último paso (si su `validate` lo permite). */
+    onFinish?: () => void;
+    /** Se dispara con el botón del primer paso. */
+    onCancel?: () => void;
+    /** Contenido del botón final; gana sobre `labels.finish`. Lo mismo `cancelLabel`, `backLabel` y `nextLabel`. */
+    finishLabel?: ReactNode;
+    /** Contenido del botón de cancelar (primer paso); gana sobre `labels.cancel`. */
+    cancelLabel?: ReactNode;
+    /** Contenido del botón de volver; gana sobre `labels.back`. */
+    backLabel?: ReactNode;
+    /** Contenido del botón de avanzar; gana sobre `labels.next`. */
+    nextLabel?: ReactNode;
+    /** Textos fijos de los botones (clave `wizard`). */
+    labels?: KapiLabelsOverride<KapiWizardLabels> | undefined;
+    /** Paso actual (controlado). Si se omite, el wizard maneja su propio estado. */
+    step?: number;
+    /** Paso inicial no controlado. */
+    defaultStep?: number;
+    /** Se llama en cada cambio de paso (controlado o no). */
+    onStepChange?: (step: number) => void;
+};
+/**
+ * Form por pasos, inline (para modal, metelo dentro de un modal). Sólo se retrocede por click
+ * en un paso; "Siguiente" respeta `validate()`; el primer paso muestra "Cancelar".
+ */
+export declare const KapiWizard: ({ steps, orientation, onFinish, onCancel, finishLabel, cancelLabel, backLabel, nextLabel, labels, step, defaultStep, onStepChange, className, ...rest }: KapiWizardProps) => import("react").JSX.Element | null;

package/dist/components/navigation/KapiWizard.js

@@ -0,0 +1,104 @@
+"use client";
+import { KapiButton as e } from "../inputs/KapiButton.js";
+import { useLabels as t } from "../locale/KapiLocaleProvider.js";
+import { joinClasses as n } from "../rootProps.js";
+import { canJumpTo as r, clampStep as i, resolveAdvance as a } from "./wizardLogic.js";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useState as l } from "react";
+import { Check as u, ChevronLeft as d, ChevronRight as f } from "lucide-react";
+//#region src/components/navigation/KapiWizard.tsx
+var p = {
+	finish: "Finalizar",
+	cancel: "Cancelar",
+	back: "Atrás",
+	next: "Siguiente"
+}, m = {
+	size: 15,
+	strokeWidth: 2.2
+}, h = (e, t) => e === void 0 ? t : e, g = ({ steps: g, orientation: _ = "horizontal", onFinish: v, onCancel: y, finishLabel: b, cancelLabel: x, backLabel: S, nextLabel: C, labels: w, step: T, defaultStep: E = 0, onStepChange: D, className: O, ...k }) => {
+	let A = t("wizard", p, w), [j, M] = l(E), N = i(T ?? j, g.length), P = g[N];
+	if (!P) return null;
+	let F = N === g.length - 1, I = (e) => {
+		let t = i(e, g.length);
+		t !== N && (T === void 0 && M(t), D?.(t));
+	}, L = (e) => {
+		r(e, N) && I(e);
+	}, R = () => {
+		let e = a(g, N);
+		e === "next" ? I(N + 1) : e === "finish" && v?.();
+	}, z = /* @__PURE__ */ c("div", {
+		className: "kapi-wz__nav",
+		children: [/* @__PURE__ */ s(e, {
+			onClick: N === 0 ? y : () => I(N - 1),
+			children: N === 0 ? h(x, A.cancel) : /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(d, { ...m }), h(S, A.back)] })
+		}), /* @__PURE__ */ s(e, {
+			variant: "primary",
+			onClick: R,
+			children: F ? h(b, A.finish) : /* @__PURE__ */ c(o, { children: [h(C, A.next), /* @__PURE__ */ s(f, { ...m })] })
+		})]
+	}), B = /* @__PURE__ */ s("div", {
+		className: "kapi-wz__pane",
+		children: P.content
+	}, N);
+	return _ === "vertical" ? /* @__PURE__ */ c("div", {
+		...k,
+		className: n("kapi-wz kapi-wz--v", O),
+		children: [/* @__PURE__ */ s("div", {
+			className: "kapi-wz__rail",
+			children: g.map((e, t) => /* @__PURE__ */ c("button", {
+				type: "button",
+				className: `kapi-wz__vstep${t === N ? " is-on" : ""}`,
+				"aria-current": t === N ? "step" : void 0,
+				onClick: () => L(t),
+				children: [/* @__PURE__ */ s("span", {
+					className: `kapi-step__dot${t < N ? " kapi-step__dot--done" : ""}${t === N ? " kapi-step__dot--on" : ""}`,
+					children: t < N ? /* @__PURE__ */ s(u, {
+						size: 13,
+						strokeWidth: 3
+					}) : t + 1
+				}), /* @__PURE__ */ c("span", {
+					className: "kapi-wz__vlabel",
+					children: [/* @__PURE__ */ s("b", { children: e.title }), e.desc && /* @__PURE__ */ s("span", { children: e.desc })]
+				})]
+			}, `${t}-${e.title}`))
+		}), /* @__PURE__ */ c("div", {
+			className: "kapi-wz__main",
+			children: [B, z]
+		})]
+	}) : /* @__PURE__ */ c("div", {
+		...k,
+		className: n("kapi-wz", O),
+		children: [
+			/* @__PURE__ */ s("div", {
+				className: "kapi-wz__steps",
+				children: g.map((e, t) => /* @__PURE__ */ c("button", {
+					type: "button",
+					className: `kapi-wz__step${t === N ? " is-on" : ""}${t < N ? " is-done" : ""}`,
+					"aria-current": t === N ? "step" : void 0,
+					onClick: () => L(t),
+					children: [
+						/* @__PURE__ */ s("span", {
+							className: "kapi-wz__num",
+							children: t < N ? /* @__PURE__ */ s(u, {
+								size: 16,
+								strokeWidth: 3
+							}) : t + 1
+						}),
+						/* @__PURE__ */ s("span", {
+							className: "kapi-wz__st",
+							children: e.title
+						}),
+						e.desc && /* @__PURE__ */ s("span", {
+							className: "kapi-wz__ss",
+							children: e.desc
+						})
+					]
+				}, `${t}-${e.title}`))
+			}),
+			B,
+			z
+		]
+	});
+};
+//#endregion
+export { p as DEFAULT_WIZARD_LABELS, g as KapiWizard };

package/dist/components/navigation/MiniNavItem.d.ts

@@ -0,0 +1,35 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import "./navigation.css";
+import type { KapiBadgeVariant } from "../display/KapiBadge";
+import { type KapiNavBadgeValue } from "./navBadgeLogic";
+type MiniNavItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+    /** Etiqueta del ítem: queda oculta a la vista pero es el nombre accesible y el texto del tooltip. */
+    label: ReactNode;
+    /** Ícono; sin él se muestran las iniciales o la inicial de la etiqueta. */
+    icon?: ReactNode;
+    /** Iniciales (ítems "recientes"). */
+    initials?: string | undefined;
+    /** Ítem actual. */
+    active?: boolean | undefined;
+    /** Aviso en la esquina del ícono. */
+    badge?: KapiNavBadgeValue | undefined;
+    /** Color del aviso. */
+    badgeTone?: KapiBadgeVariant | undefined;
+    /** Texto accesible del aviso. */
+    badgeLabel?: string | undefined;
+    /** Enlace real en vez de botón. */
+    href?: string | undefined;
+    /** Abre el enlace en una pestaña nueva. */
+    newTab?: boolean | undefined;
+    /** Aviso de pestaña nueva para lectores de pantalla. */
+    newTabLabel?: string | undefined;
+};
+/**
+ * Con `href` se dibuja un `<a>` que navega solo: los atributos de botón (`onClick` incluido) no se le pasan,
+ * igual que un ítem enlace desplegado no llama a `onSelect`.
+ *
+ * Ítem de navegación del panel plegado en modo mini: sólo el ícono (o la inicial), el aviso en la esquina y
+ * un tooltip con el título y el aviso. La etiqueta sigue en el DOM (oculta a la vista) como nombre accesible.
+ */
+export declare const MiniNavItem: ({ label, icon, initials, active, badge, badgeTone, badgeLabel, href, newTab, newTabLabel, className, disabled, type, ...rest }: MiniNavItemProps) => import("react").JSX.Element;
+export {};

package/dist/components/navigation/MiniNavItem.js

@@ -0,0 +1,57 @@
+"use client";
+import { joinClasses as e } from "../rootProps.js";
+import { KapiTooltip as t } from "../overlays/KapiTooltip.js";
+/* empty css               */
+import { navBadgeA11yText as n } from "./navBadgeLogic.js";
+import { KapiNavBadge as r } from "./KapiNavBadge.js";
+import { useKapiPanelMini as i } from "./panelMini.js";
+import { miniInitial as a, miniTooltipLabel as o, nodeText as s } from "./panelMiniLogic.js";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/navigation/MiniNavItem.tsx
+var d = ({ label: d, icon: f, initials: p, active: m = !1, badge: h, badgeTone: g, badgeLabel: _, href: v, newTab: y, newTabLabel: b, className: x, disabled: S, type: C = "button", ...w }) => {
+	let { tooltipSide: T } = i(), E = s(d), D = o(E, n(h, _)), O = e("kapi-ctxitem", "kapi-ctxitem--mini", m && "kapi-ctxitem--on", x), k = f == null || f === !1 ? /* @__PURE__ */ l("span", {
+		className: "kapi-ctxitem__initial",
+		children: p ?? a(E)
+	}) : f, A = /* @__PURE__ */ u(c, { children: [
+		/* @__PURE__ */ l("span", {
+			className: "kapi-ctxitem__miniicon",
+			"aria-hidden": "true",
+			children: k
+		}),
+		/* @__PURE__ */ l("span", {
+			className: "kapi-ctxitem__sr",
+			children: d
+		}),
+		/* @__PURE__ */ l(r, {
+			value: h,
+			tone: g,
+			label: _,
+			placement: "corner"
+		})
+	] });
+	return /* @__PURE__ */ l(t, {
+		label: D,
+		prefer: T,
+		children: v === void 0 ? /* @__PURE__ */ l("button", {
+			...w,
+			type: C,
+			className: O,
+			disabled: S,
+			"aria-current": m ? "page" : void 0,
+			children: A
+		}) : /* @__PURE__ */ u("a", {
+			className: e(O, "kapi-ctxitem--link"),
+			href: S ? void 0 : v,
+			rel: "noopener noreferrer",
+			target: y ? "_blank" : void 0,
+			"aria-current": m ? "page" : void 0,
+			"aria-disabled": S || void 0,
+			children: [A, y && /* @__PURE__ */ u(c, { children: [" ", /* @__PURE__ */ l("span", {
+				className: "kapi-ctxitem__sr",
+				children: b
+			})] })]
+		})
+	});
+};
+//#endregion
+export { d as MiniNavItem };

package/dist/components/navigation/accordionLogic.d.ts

@@ -0,0 +1,4 @@
+/** Deja los ids válidos para el modo: `single` conserva sólo el primero; multi quita duplicados. */
+export declare const normalizeOpenIds: <Id extends string>(ids: ReadonlyArray<Id>, single: boolean) => Id[];
+/** Alterna un ítem sin mutar. En `single`, abrir uno cierra el resto. */
+export declare const toggleOpenId: <Id extends string>(open: ReadonlyArray<Id>, id: Id, single: boolean) => Id[];

package/dist/components/navigation/accordionLogic.js

@@ -0,0 +1,4 @@
+//#region src/components/navigation/accordionLogic.ts
+var e = (e, t) => t ? e.slice(0, 1) : Array.from(new Set(e)), t = (e, t, n) => e.includes(t) ? e.filter((e) => e !== t) : n ? [t] : [...e, t];
+//#endregion
+export { e as normalizeOpenIds, t as toggleOpenId };