@kapiuara/ui 0.0.0-stage → 0.1.0

package/dist/components/navigation/KapiContextPanel.js

@@ -0,0 +1,265 @@
+"use client";
+import { useLabels as e } from "../locale/KapiLocaleProvider.js";
+import { joinClasses as t } from "../rootProps.js";
+import { canCollapse as n, clampCtxPanelWidth as r, ctxPanelClasses as i, ctxPanelWidthFromDrag as a, resolveCollapsed as o, stepCtxPanelWidth as s } from "./contextPanelLogic.js";
+import { activeIdIn as c } from "./activeItemLogic.js";
+import { CtxSlidingList as l } from "./CtxSlidingList.js";
+/* empty css               */
+import { DEFAULT_LINK_LABELS as u } from "../locale/linkLabels.js";
+import "./navBadgeLogic.js";
+import { KapiNavBadge as d } from "./KapiNavBadge.js";
+import { KapiPanelMiniContext as f, useKapiPanelMini as p } from "./panelMini.js";
+import { MiniNavItem as m } from "./MiniNavItem.js";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { useLayoutEffect as ee, useRef as v, useState as y } from "react";
+import { ChevronsLeft as b, ChevronsRight as x, ExternalLink as S } from "lucide-react";
+//#region src/components/navigation/KapiContextPanel.tsx
+var C = ({ item: e, active: t, onSelect: n, newTabLabel: r }) => {
+	let { mini: i } = p(), a = e.detail !== void 0 || e.initials !== void 0, o = () => n?.(e.id);
+	return i ? /* @__PURE__ */ g(m, {
+		label: e.label,
+		icon: e.icon,
+		initials: e.initials,
+		active: t,
+		badge: e.badge,
+		badgeTone: e.badgeTone,
+		badgeLabel: e.badgeLabel,
+		disabled: e.disabled,
+		...!a && e.href !== void 0 ? {
+			href: e.href,
+			newTab: e.newTab,
+			newTabLabel: r
+		} : { onClick: o }
+	}) : a ? /* @__PURE__ */ _("button", {
+		type: "button",
+		className: `kapi-ctxrec${t ? " kapi-ctxrec--on" : ""}`,
+		"aria-current": t ? "page" : void 0,
+		disabled: e.disabled,
+		onClick: o,
+		children: [
+			e.initials !== void 0 && /* @__PURE__ */ g("span", {
+				className: "kapi-ctxrec__av kapi-ctxrec__av--tone",
+				children: e.initials
+			}),
+			/* @__PURE__ */ _("span", {
+				className: "kapi-ctxrec__txt",
+				children: [/* @__PURE__ */ g("span", {
+					className: "kapi-ctxrec__name",
+					children: e.label
+				}), e.detail !== void 0 && /* @__PURE__ */ g("span", {
+					className: "kapi-ctxrec__sub",
+					children: e.detail
+				})]
+			}),
+			/* @__PURE__ */ g(d, {
+				value: e.badge,
+				tone: e.badgeTone,
+				label: e.badgeLabel,
+				max: 999
+			}),
+			e.trailing
+		]
+	}) : e.href === void 0 ? /* @__PURE__ */ _("button", {
+		type: "button",
+		className: `kapi-ctxitem${t ? " kapi-ctxitem--on" : ""}`,
+		"aria-current": t ? "page" : void 0,
+		disabled: e.disabled,
+		onClick: o,
+		children: [
+			/* @__PURE__ */ _("span", {
+				className: "kapi-ctxitem__main",
+				children: [e.icon, e.label]
+			}),
+			/* @__PURE__ */ g(d, {
+				value: e.badge,
+				tone: e.badgeTone,
+				label: e.badgeLabel,
+				max: 999
+			}),
+			e.trailing
+		]
+	}) : /* @__PURE__ */ _("a", {
+		className: `kapi-ctxitem kapi-ctxitem--link${t ? " kapi-ctxitem--on" : ""}`,
+		href: e.disabled ? void 0 : e.href,
+		rel: "noopener noreferrer",
+		target: e.newTab ? "_blank" : void 0,
+		"aria-current": t ? "page" : void 0,
+		"aria-disabled": e.disabled || void 0,
+		children: [
+			/* @__PURE__ */ _("span", {
+				className: "kapi-ctxitem__main",
+				children: [e.icon, e.label]
+			}),
+			/* @__PURE__ */ g(d, {
+				value: e.badge,
+				tone: e.badgeTone,
+				label: e.badgeLabel,
+				max: 999
+			}),
+			e.trailing,
+			e.external && /* @__PURE__ */ g(S, {
+				className: "kapi-ctxitem__ext",
+				size: 14,
+				"aria-hidden": "true"
+			}),
+			e.newTab && /* @__PURE__ */ g("span", {
+				className: "kapi-ctxitem__sr",
+				children: r
+			})
+		]
+	});
+}, w = ({ sections: t, activeId: n, onSelect: r, search: i, hint: a, labels: o }) => {
+	let s = e("link", u, o);
+	return /* @__PURE__ */ _(h, { children: [
+		i && /* @__PURE__ */ g("input", {
+			type: "search",
+			className: "kapi-ctxsearch kapi-ctxsearch--input",
+			placeholder: i.placeholder,
+			value: i.value,
+			"aria-label": i["aria-label"] ?? i.placeholder,
+			onChange: (e) => i.onChange?.(e.target.value)
+		}),
+		t.map((e, t) => /* @__PURE__ */ _("div", {
+			className: "kapi-ctxsection",
+			children: [
+				t > 0 && /* @__PURE__ */ g("div", { className: "kapi-ctxdivider" }),
+				e.label && /* @__PURE__ */ g("div", {
+					className: "kapi-ct",
+					children: e.label
+				}),
+				/* @__PURE__ */ g(l, {
+					active: c(e.items, n),
+					children: e.items.map((e) => /* @__PURE__ */ g(C, {
+						item: e,
+						active: e.id === n,
+						onSelect: r,
+						newTabLabel: s.newTab
+					}, e.id))
+				})
+			]
+		}, e.id)),
+		a && /* @__PURE__ */ g("div", {
+			className: "kapi-hint",
+			children: a
+		})
+	] });
+}, T = {
+	resize: "Redimensionar panel",
+	collapse: "Plegar panel",
+	expand: "Desplegar panel",
+	region: "Panel contextual"
+}, E = ({ title: c, actions: l, collapsed: u, defaultCollapsed: d, onCollapsedChange: p, collapseLabel: m, expandLabel: h, side: S = "left", collapsedMode: C = "hidden", resizable: E = !1, minWidth: D = 200, maxWidth: O = 420, "aria-label": k, labels: A, className: j, style: M, id: N, ...P }) => {
+	let F = e("contextPanel", T, A), I = m ?? F.collapse, L = h ?? F.expand, R = k ?? F.region, [z, B] = y(d ?? !1), [V, H] = y(null), [U, W] = y(!1), G = v(null), K = v(null), q = o(u, z), J = v(null), [Y, X] = y(null);
+	ee(() => {
+		Y && (q === Y.next && J.current?.focus(), X(null));
+	}, [Y, q]);
+	let Z = (e) => {
+		X({ next: e }), u === void 0 && B(e), p?.(e);
+	}, te = S === "right" ? x : b, ne = S === "right" ? b : x, Q = () => V ?? K.current?.offsetWidth ?? 258, re = (e) => {
+		e.button === 0 && (G.current = {
+			startX: e.clientX,
+			startWidth: Q()
+		}, e.currentTarget.setPointerCapture(e.pointerId), W(!0), e.preventDefault());
+	}, ie = (e) => {
+		let t = G.current;
+		t && H(a(S, t.startWidth, t.startX, e.clientX, D, O));
+	}, $ = (e) => {
+		G.current = null, e.currentTarget.hasPointerCapture(e.pointerId) && e.currentTarget.releasePointerCapture(e.pointerId), W(!1);
+	}, ae = (e) => {
+		let t = s(S, Q(), e.key, D, O);
+		t !== null && (e.preventDefault(), H(t));
+	};
+	if (q) {
+		let e = C === "mini";
+		return /* @__PURE__ */ _("aside", {
+			id: N,
+			className: t(i({
+				side: S,
+				collapsed: !0
+			}), e && "is-mini kapi-navmini", j),
+			style: M,
+			"aria-label": R,
+			children: [/* @__PURE__ */ g("button", {
+				ref: J,
+				type: "button",
+				className: "kapi-paneltoggle",
+				onClick: () => Z(!1),
+				"aria-label": L,
+				children: /* @__PURE__ */ g(ne, {
+					size: 16,
+					strokeWidth: 2,
+					"aria-hidden": "true"
+				})
+			}), e && /* @__PURE__ */ g(f.Provider, {
+				value: {
+					mini: !0,
+					expand: () => Z(!1),
+					tooltipSide: S === "right" ? "left" : "right"
+				},
+				children: /* @__PURE__ */ g(w, {
+					...P,
+					labels: A
+				})
+			})]
+		});
+	}
+	return /* @__PURE__ */ _("aside", {
+		ref: K,
+		id: N,
+		className: t(i({
+			side: S,
+			resizing: U
+		}), j),
+		"aria-label": R,
+		"data-resizable": E || void 0,
+		style: E && V !== null ? {
+			...M,
+			width: V
+		} : M,
+		children: [
+			E && /* @__PURE__ */ g("div", {
+				className: "kapi-ctxpanel__resize",
+				role: "separator",
+				"aria-orientation": "vertical",
+				"aria-label": F.resize,
+				"aria-valuemin": D,
+				"aria-valuemax": O,
+				"aria-valuenow": r(V ?? 258, D, O),
+				tabIndex: 0,
+				onPointerDown: re,
+				onPointerMove: ie,
+				onPointerUp: $,
+				onPointerCancel: $,
+				onKeyDown: ae
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "kapi-ctxpanel__head",
+				children: [/* @__PURE__ */ g("span", { children: c }), /* @__PURE__ */ _("div", {
+					className: "kapi-ctxpanel__actions",
+					children: [l, n({
+						collapsed: u,
+						defaultCollapsed: d,
+						onCollapsedChange: p
+					}) && /* @__PURE__ */ g("button", {
+						ref: J,
+						type: "button",
+						className: "kapi-paneltoggle",
+						onClick: () => Z(!0),
+						"aria-label": I,
+						children: /* @__PURE__ */ g(te, {
+							size: 16,
+							strokeWidth: 2,
+							"aria-hidden": "true"
+						})
+					})]
+				})]
+			}),
+			/* @__PURE__ */ g(w, {
+				...P,
+				labels: A
+			})
+		]
+	});
+};
+//#endregion
+export { T as DEFAULT_CONTEXT_PANEL_LABELS, E as KapiContextPanel, w as KapiContextSections };

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

@@ -0,0 +1,30 @@
+import { type HTMLAttributes } from "react";
+import { type KapiFilterChipItem } from "./filterChipsLogic";
+import "./KapiFilterChips.css";
+import type { KapiLabelsOverride } from "../labelsLogic";
+export type KapiFilterChipsLabels = {
+    /** Nombre accesible del grupo. */
+    group: string;
+};
+export declare const DEFAULT_FILTER_CHIPS_LABELS: KapiFilterChipsLabels;
+/**
+ * Atributos nativos (`id`, `style`, `data-*`…) van al `role="group"`; `aria-label` gana sobre `labels.group`.
+ * `Id` se infiere de `items` (o del `onChange`).
+ */
+export type KapiFilterChipsProps<Id extends string = string> = Omit<HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "role" | "defaultValue"> & {
+    /** Chips, en orden; cada uno con `id`, texto y contador opcional. */
+    items: KapiFilterChipItem<Id>[];
+    /** Id del chip activo. */
+    value: Id;
+    /** Se llama con el `id` del chip elegido. */
+    onChange: (id: Id) => void;
+    /** Tamaño de los chips. */
+    size?: "sm" | "md";
+    /** Textos fijos (clave `filterChips`). */
+    labels?: KapiLabelsOverride<KapiFilterChipsLabels> | undefined;
+};
+/**
+ * Fila de chips-filtro con contador opcional. Cada chip es un toggle (`aria-pressed`);
+ * flechas Izq/Der (y Home/End) mueven el foco con roving tabindex.
+ */
+export declare function KapiFilterChips<Id extends string = string>({ items, value, onChange, size, labels, className, "aria-label": ariaLabelAttr, ...rest }: KapiFilterChipsProps<Id>): import("react").JSX.Element;

package/dist/components/navigation/KapiFilterChips.js

@@ -0,0 +1,40 @@
+"use client";
+import { useLabels as e } from "../locale/KapiLocaleProvider.js";
+import { joinClasses as t } from "../rootProps.js";
+import { activeChipIndex as n, chipAriaLabel as r, filterChipClasses as i, nextChipIndex as a } from "./filterChipsLogic.js";
+/* empty css                    */
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useRef as c } from "react";
+//#region src/components/navigation/KapiFilterChips.tsx
+var l = { group: "Filtros" };
+function u({ items: u, value: d, onChange: f, size: p = "md", labels: m, className: h, "aria-label": g, ..._ }) {
+	let v = e("filterChips", l, m), y = c([]), b = n(u, d), x = (e, t) => {
+		let n = a(t, u.length, e.key);
+		n != null && (e.preventDefault(), y.current[n]?.focus());
+	};
+	return /* @__PURE__ */ o("div", {
+		..._,
+		role: "group",
+		"aria-label": g ?? v.group,
+		className: t("kapi-filterchips", h),
+		children: u.map((e, t) => /* @__PURE__ */ s("button", {
+			ref: (e) => {
+				y.current[t] = e;
+			},
+			type: "button",
+			className: i(e, e.id === d, p),
+			"aria-pressed": e.id === d,
+			"aria-label": r(e),
+			tabIndex: t === b ? 0 : -1,
+			onClick: () => f(e.id),
+			onKeyDown: (e) => x(e, t),
+			children: [/* @__PURE__ */ o("span", { children: e.label }), e.count != null && /* @__PURE__ */ o("span", {
+				className: "kapi-filterchip__count",
+				"aria-hidden": !0,
+				children: e.count
+			})]
+		}, e.id))
+	});
+}
+//#endregion
+export { l as DEFAULT_FILTER_CHIPS_LABELS, u as KapiFilterChips };

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

@@ -0,0 +1,26 @@
+import { type KapiBadgeVariant } from "../display/KapiBadge";
+import { type KapiNavBadgeValue } from "./navBadgeLogic";
+import "./KapiNavBadge.css";
+export type KapiNavBadgeProps = {
+    /** Contador o `"dot"` (aviso sin número). Sin valor o 0 no dibuja nada. */
+    value?: KapiNavBadgeValue | undefined;
+    /** Color por rol, igual que `KapiBadge` (`danger` para vencidos, `warning` para por vencer…). @default "primary" */
+    tone?: KapiBadgeVariant | undefined;
+    /** Texto accesible (p. ej. "3 trámites vencidos"); sin él se lee el número. */
+    label?: string | undefined;
+    /** `inline`: al final de un ítem de lista. `corner`: burbuja sobre la esquina del ícono (rail). @default "inline" */
+    placement?: "inline" | "corner" | undefined;
+    /** Tope visual del contador (por encima, "N+"). @default 99 */
+    max?: number | undefined;
+    /** Muestra el 0 en vez de ocultar el badge. */
+    showZero?: boolean | undefined;
+    /** `false` omite el texto accesible (cuando el contenedor ya lo incluye en su `aria-label`). @default true */
+    announce?: boolean | undefined;
+    /** Clase extra. */
+    className?: string | undefined;
+};
+/**
+ * Badge de atención para navegación (rail, ítems de panel, grupos). Lo visible es `aria-hidden` y el texto
+ * accesible va aparte, así el nombre del ítem que lo contiene queda "Trámites 3 trámites vencidos".
+ */
+export declare const KapiNavBadge: ({ value, tone, label, placement, max, showZero, announce, className }: KapiNavBadgeProps) => import("react").JSX.Element | null;

package/dist/components/navigation/KapiNavBadge.js

@@ -0,0 +1,33 @@
+"use client";
+import { joinClasses as e } from "../rootProps.js";
+import { badgeClasses as t } from "../display/KapiBadge.js";
+import { navBadgeA11yText as n, navBadgeView as r } from "./navBadgeLogic.js";
+/* empty css                 */
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/navigation/KapiNavBadge.tsx
+var s = ({ value: s, tone: c = "primary", label: l, placement: u = "inline", max: d, showZero: f, announce: p = !0, className: m }) => {
+	let h = r(s, {
+		max: d,
+		showZero: f
+	});
+	if (h === null) return null;
+	let g = p ? n(s, l, { showZero: f }) : null, _ = h.kind === "dot";
+	return /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("span", {
+		className: e(t({
+			variant: c,
+			tone: u === "corner" || _ ? "solid" : "subtle",
+			size: "sm"
+		}), "kapi-navbadge", `kapi-navbadge--${u}`, _ && "kapi-navbadge--dot", m),
+		"aria-hidden": "true",
+		children: _ ? null : h.text
+	}), g !== null && /* @__PURE__ */ o(i, { children: [
+		" ",
+		/* @__PURE__ */ a("span", {
+			className: "kapi-navbadge__sr",
+			children: g
+		}),
+		" "
+	] })] });
+};
+//#endregion
+export { s as KapiNavBadge };

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

@@ -0,0 +1,69 @@
+import { type ReactNode } from "react";
+import { type KapiLinkLabels } from "../locale/linkLabels";
+import { type KapiNavBadgeValue } from "./navBadgeLogic";
+import type { KapiBadgeVariant } from "../display/KapiBadge";
+import "./navigation.css";
+import type { KapiRootProps } from "../rootProps";
+import type { KapiLabelsOverride } from "../labelsLogic";
+/** Subítem de `KapiPanelGroup`. `Id` acota los ids (p. ej. una unión de literales). */
+export type KapiPanelGroupItem<Id extends string = string> = {
+    id: Id;
+    label: ReactNode;
+    /** Contador al final del subítem (total neutro; el 0 se muestra). */
+    count?: number;
+    /** Aviso de atención al final: contador (0 no dibuja nada; tope "999+") o `"dot"` sin número. */
+    badge?: KapiNavBadgeValue | undefined;
+    /** Color del aviso, como `KapiBadge` (`danger` para vencidos…). @default "primary" */
+    badgeTone?: KapiBadgeVariant | undefined;
+    /** Texto accesible del aviso (p. ej. "3 trámites vencidos"); sin él se lee el número. */
+    badgeLabel?: string | undefined;
+    /** Ícono (lucide-react) a la izquierda de la etiqueta. */
+    icon?: ReactNode;
+    /** No se puede elegir (botón deshabilitado o enlace `aria-disabled`). */
+    disabled?: boolean;
+    /** Si se pasa, se dibuja un enlace real `<a>` en vez de un botón. */
+    href?: string;
+    /** Destino en otro sistema: agrega el ícono ↗ (sólo con `href`). */
+    external?: boolean;
+    /** Abrir el enlace en una pestaña nueva (sólo con `href`). */
+    newTab?: boolean;
+};
+/**
+ * `className`/`style`/`id` van al contenedor del grupo; `aria-label` nombra la región de los subítems.
+ * `Id` se infiere de `items`.
+ */
+export type KapiPanelGroupProps<Id extends string = string> = KapiRootProps & {
+    /** Etiqueta de la cabecera del grupo. */
+    label: ReactNode;
+    /** Contador de la cabecera (p. ej. 92; total neutro, el 0 se muestra). */
+    count?: number;
+    /** Aviso de atención en la cabecera (convive con `count`): contador (0 no dibuja nada; tope "999+") o `"dot"` sin número. */
+    badge?: KapiNavBadgeValue | undefined;
+    /** Color del aviso, como `KapiBadge` (`danger` para vencidos…). @default "primary" */
+    badgeTone?: KapiBadgeVariant | undefined;
+    /** Texto accesible del aviso (p. ej. "3 trámites vencidos"); sin él se lee el número. */
+    badgeLabel?: string | undefined;
+    /** Ícono opcional de la cabecera. */
+    icon?: ReactNode;
+    /** Subítems que se muestran al abrir el grupo. */
+    items: KapiPanelGroupItem<Id>[];
+    /** Id del subítem activo (`aria-current="page"`); lo decide la app, normalmente desde el router. */
+    activeId?: Id;
+    /** Se llama con el `id` del subítem clickeado (no aplica a los enlaces con `href`). */
+    onSelect?: (id: Id) => void;
+    /** Controlado. */
+    open?: boolean;
+    /** Inicial cuando no es controlado. Por defecto `false`. */
+    defaultOpen?: boolean;
+    /** Se llama con el estado nuevo al abrir o cerrar el grupo. */
+    onOpenChange?: (open: boolean) => void;
+    /** Nombre accesible de la región de subítems; sin él la nombra la cabecera. */
+    "aria-label"?: string;
+    /** Textos fijos (aviso de pestaña nueva; clave compartida `link`). */
+    labels?: KapiLabelsOverride<KapiLinkLabels> | undefined;
+};
+/**
+ * Grupo plegable para el panel contextual: cabecera (ícono + etiqueta + contador + chevron)
+ * que muestra u oculta subítems. Abierto interno o controlado.
+ */
+export declare function KapiPanelGroup<Id extends string = string>({ label, count, badge, badgeTone, badgeLabel, icon, items, activeId, onSelect, open, defaultOpen, onOpenChange, className, style, id, "aria-label": ariaLabel, labels }: KapiPanelGroupProps<Id>): import("react").JSX.Element;

package/dist/components/navigation/KapiPanelGroup.js

@@ -0,0 +1,149 @@
+"use client";
+import { useLabels as e } from "../locale/KapiLocaleProvider.js";
+import { activeIdIn as t } from "./activeItemLogic.js";
+import { CtxSlidingList as n } from "./CtxSlidingList.js";
+/* empty css               */
+import { DEFAULT_LINK_LABELS as r } from "../locale/linkLabels.js";
+import "./navBadgeLogic.js";
+import { KapiNavBadge as i } from "./KapiNavBadge.js";
+import { useKapiPanelMini as a } from "./panelMini.js";
+import { MiniNavItem as o } from "./MiniNavItem.js";
+import { formatCount as s, panelGroupClasses as c, resolveOpen as l } from "./panelGroupLogic.js";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useId as f, useState as p } from "react";
+import { ChevronRight as m, ExternalLink as h } from "lucide-react";
+//#region src/components/navigation/KapiPanelGroup.tsx
+var g = ({ value: e }) => {
+	let t = s(e);
+	return t === null ? null : /* @__PURE__ */ u("span", {
+		className: "kapi-panelgroup__count",
+		children: t
+	});
+}, _ = ({ item: e, active: t, onSelect: n, newTabLabel: r }) => {
+	let a = `kapi-ctxitem${t ? " kapi-ctxitem--on" : ""}`, o = /* @__PURE__ */ d("span", {
+		className: "kapi-ctxitem__main",
+		children: [e.icon, e.label]
+	});
+	return e.href === void 0 ? /* @__PURE__ */ d("button", {
+		type: "button",
+		className: a,
+		"aria-current": t ? "page" : void 0,
+		disabled: e.disabled,
+		onClick: () => n?.(e.id),
+		children: [
+			o,
+			/* @__PURE__ */ u(i, {
+				value: e.badge,
+				tone: e.badgeTone,
+				label: e.badgeLabel,
+				max: 999
+			}),
+			/* @__PURE__ */ u(g, { value: e.count })
+		]
+	}) : /* @__PURE__ */ d("a", {
+		className: `${a} kapi-ctxitem--link`,
+		href: e.disabled ? void 0 : e.href,
+		rel: "noopener noreferrer",
+		target: e.newTab ? "_blank" : void 0,
+		"aria-current": t ? "page" : void 0,
+		"aria-disabled": e.disabled || void 0,
+		children: [
+			o,
+			/* @__PURE__ */ u(i, {
+				value: e.badge,
+				tone: e.badgeTone,
+				label: e.badgeLabel,
+				max: 999
+			}),
+			/* @__PURE__ */ u(g, { value: e.count }),
+			e.external && /* @__PURE__ */ u(h, {
+				className: "kapi-ctxitem__ext",
+				size: 14,
+				"aria-hidden": "true"
+			}),
+			e.newTab && /* @__PURE__ */ u("span", {
+				className: "kapi-ctxitem__sr",
+				children: r
+			})
+		]
+	});
+};
+function v({ label: s, count: h, badge: v, badgeTone: y, badgeLabel: b, icon: x, items: S, activeId: C, onSelect: w, open: T, defaultOpen: E = !1, onOpenChange: D, className: O, style: k, id: A, "aria-label": j, labels: M }) {
+	let N = e("link", r, M), P = f(), F = `${P}-body`, I = `${P}-head`, [L, R] = p(E), z = l(T, L), B = (e) => {
+		T === void 0 && R(e), D?.(e);
+	}, V = () => B(!z), { mini: H, expand: U } = a();
+	return H ? /* @__PURE__ */ u("div", {
+		className: c({
+			open: !1,
+			className: O
+		}),
+		style: k,
+		id: A,
+		children: /* @__PURE__ */ u(o, {
+			label: s,
+			icon: x,
+			active: t(S, C) !== null,
+			badge: v,
+			badgeTone: y,
+			badgeLabel: b,
+			onClick: () => {
+				U(), z || B(!0);
+			}
+		})
+	}) : /* @__PURE__ */ d("div", {
+		className: c({
+			open: z,
+			className: O
+		}),
+		style: k,
+		id: A,
+		children: [/* @__PURE__ */ d("button", {
+			type: "button",
+			id: I,
+			className: "kapi-panelgroup__head",
+			"aria-expanded": z,
+			"aria-controls": F,
+			onClick: V,
+			children: [
+				/* @__PURE__ */ d("span", {
+					className: "kapi-panelgroup__label",
+					children: [x, s]
+				}),
+				/* @__PURE__ */ u(i, {
+					value: v,
+					tone: y,
+					label: b,
+					max: 999
+				}),
+				/* @__PURE__ */ u(g, { value: h }),
+				/* @__PURE__ */ u(m, {
+					className: "kapi-panelgroup__chevron",
+					size: 16,
+					strokeWidth: 2,
+					"aria-hidden": "true"
+				})
+			]
+		}), /* @__PURE__ */ u("div", {
+			id: F,
+			role: "region",
+			"aria-label": j,
+			"aria-labelledby": j ? void 0 : I,
+			className: "kapi-panelgroup__body",
+			inert: !z,
+			children: /* @__PURE__ */ u("div", {
+				className: "kapi-panelgroup__clip",
+				children: /* @__PURE__ */ u(n, {
+					active: t(S, C),
+					children: S.map((e) => /* @__PURE__ */ u(_, {
+						item: e,
+						active: e.id === C,
+						onSelect: w,
+						newTabLabel: N.newTab
+					}, e.id))
+				})
+			})
+		})]
+	});
+}
+//#endregion
+export { v as KapiPanelGroup };

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

@@ -0,0 +1,43 @@
+import "./KapiSteps.css";
+import type { OlHTMLAttributes, ReactNode, Ref } from "react";
+import type { KapiLabelsOverride } from "../labelsLogic";
+import { type KapiStepStatus, type KapiStepsOrientation, type KapiStepsSize } from "./stepsLogic";
+export type { KapiStepStatus, KapiStepsOrientation, KapiStepsSize } from "./stepsLogic";
+/** Paso de `KapiSteps`. `Id` acota los ids (p. ej. una unión de literales). */
+export type KapiStep<Id extends string = string> = {
+    /** Id único del paso (el que se compara con `current`). */
+    id: Id;
+    /** Nombre visible del paso. */
+    label: ReactNode;
+    /** Texto secundario bajo el label (responsable, fecha…). */
+    description?: ReactNode | undefined;
+    /** Estado explícito; gana sobre el derivado de `current`. */
+    status?: KapiStepStatus | undefined;
+};
+/** Texto oculto que anuncia el estado de cada paso a lectores de pantalla. */
+export type KapiStepsLabels = Record<KapiStepStatus, string>;
+export declare const DEFAULT_STEPS_LABELS: KapiStepsLabels;
+/**
+ * Atributos nativos (`id`, `style`, `aria-label`, `data-*`…) van al `<ol>`. `Id` se infiere de `steps`,
+ * sin escribir el argumento de tipo.
+ */
+export type KapiStepsProps<Id extends string = string> = Omit<OlHTMLAttributes<HTMLOListElement>, "children"> & {
+    /** Pasos del circuito, en orden. */
+    steps: KapiStep<Id>[];
+    /** Id del paso actual: los anteriores quedan completos y los siguientes pendientes (salvo `status` explícito). */
+    current?: NoInfer<Id> | undefined;
+    /** Disposición: columna (default) o fila que se acomoda en varias líneas si no entra. */
+    orientation?: KapiStepsOrientation | undefined;
+    /** Tamaño del marcador y del texto. */
+    size?: KapiStepsSize | undefined;
+    /** Textos de estado para lectores de pantalla (clave `steps`). */
+    labels?: KapiLabelsOverride<KapiStepsLabels> | undefined;
+    /** Ref al `<ol>`. */
+    ref?: Ref<HTMLOListElement> | undefined;
+};
+/**
+ * Pasos de un circuito, de solo lectura (p. ej. los estados de un trámite). No navega: para un
+ * formulario por pasos usar `KapiWizard`. Es un `<ol>` con `aria-current="step"` en el paso actual y
+ * el estado de cada paso como texto oculto.
+ */
+export declare function KapiSteps<Id extends string = string>({ steps, current, orientation, size, labels, className, ref, ...rest }: KapiStepsProps<Id>): import("react").JSX.Element;