@kapiuara/ui 0.0.0-stage → 0.1.0

package/dist/components/locale/labelRegistry.d.ts

@@ -0,0 +1,110 @@
+import type { KapiLabelsOverride } from "../labelsLogic";
+import type { KapiTableLabels } from "../data/KapiTable";
+import type { KapiTableFilterLabels } from "../data/KapiTableFilter";
+import type { KapiPaginationLabels } from "../data/KapiPagination";
+import type { KapiBulkBarLabels } from "../feedback/KapiBulkBar";
+import type { KapiUnsavedBarLabels } from "../feedback/KapiUnsavedBar";
+import type { KapiOfflineBannerLabels } from "../feedback/KapiOfflineBanner";
+import type { KapiTourLabels } from "../feedback/KapiTour";
+import type { KapiCountdownLabels } from "../feedback/countdownLogic";
+import type { KapiDateRangePickerLabels } from "../inputs/KapiDateRangePicker";
+import type { KapiFacetedSearchLabels } from "../inputs/KapiFacetedSearch";
+import type { KapiSelectLabels } from "../inputs/KapiSelect";
+import type { KapiNumberStepperLabels } from "../inputs/KapiNumberStepper";
+import type { KapiFileUploadLabels } from "../inputs/KapiFileUpload";
+import type { KapiInputLabels } from "../inputs/KapiInput";
+import type { KapiTagInputLabels } from "../inputs/KapiTagInput";
+import type { KapiContextSlotLabels } from "../layout/KapiContextSlot";
+import type { KapiAccountMenuLabels } from "../layout/KapiAccountMenu";
+import type { KapiNotificationBellLabels } from "../layout/KapiNotificationBell";
+import type { KapiOffcanvasLabels } from "../overlays/KapiOffcanvas";
+import type { KapiPhotoViewLabels } from "../overlays/KapiPhotoView";
+import type { KapiShapeSheetLabels } from "../overlays/KapiShapeSheet";
+import type { KapiSplitModalLabels } from "../overlays/KapiSplitModal";
+import type { KapiContextPanelLabels } from "../navigation/KapiContextPanel";
+import type { KapiWizardLabels } from "../navigation/KapiWizard";
+import type { KapiStepsLabels } from "../navigation/KapiSteps";
+import type { KapiBreadcrumbLabels } from "../navigation/KapiBreadcrumb";
+import type { KapiRailLabels } from "../layout/KapiRail";
+import type { KapiScrollAreaLabels } from "../layout/KapiScrollArea";
+import type { KapiFabLabels } from "../feedback/KapiFab";
+import type { KapiRatingLabels } from "../inputs/KapiRating";
+import type { KapiCuitInputLabels } from "../inputs/KapiMaskedInput";
+import type { KapiLinkLabels } from "./linkLabels";
+import type { KapiTagLabels } from "../display/KapiTag";
+import type { KapiFileViewerLabels } from "../display/KapiFileViewer";
+import type { KapiCommentComposerLabels } from "../display/KapiCommentComposer";
+import type { KapiToastLabels } from "../feedback/KapiToastContainer";
+import type { KapiAutocompleteLabels } from "../inputs/KapiAutocomplete";
+import type { KapiCollapsiblePanelLabels } from "../navigation/KapiCollapsiblePanel";
+import type { KapiFilterChipsLabels } from "../navigation/KapiFilterChips";
+import type { KapiTreeLabels } from "../navigation/KapiTree";
+import type { KapiCanvasFormLabels } from "../overlays/KapiCanvasForm";
+import type { KapiCommandPaletteLabels } from "../overlays/KapiCommandPalette";
+import type { KapiConfirmLabels } from "../overlays/KapiConfirm";
+import type { KapiContextMenuLabels } from "../overlays/KapiContextMenu";
+import type { KapiDialogLabels } from "../overlays/KapiDialogHost";
+import type { KapiModalLabels } from "../overlays/KapiModal";
+import type { UnsavedGuardLabels } from "../../hooks/useUnsavedGuard";
+/**
+ * Clave → tipo de los textos de cada componente. Es una `interface` a propósito: una app puede
+ * sumar sus propias claves por module augmentation (`declare module "@kapiuara/ui" { interface
+ * KapiLabelRegistry { … } }`) y usar `useLabels` en sus componentes.
+ * `calendar` lo comparten `KapiDatePicker` y `KapiDateRangePicker` (este suma `pickStart`/`pickEnd`).
+ * `link` lo comparten los enlaces con `newTab` (`KapiPanelGroup`, `KapiContextPanel`, `KapiRail`,
+ * `KapiAccessCard`).
+ * `canvasForm` y `unsavedGuard` solo se configuran desde el provider (sin prop `labels` propia).
+ */
+export interface KapiLabelRegistry {
+    accountMenu: KapiAccountMenuLabels;
+    autocomplete: KapiAutocompleteLabels;
+    breadcrumb: KapiBreadcrumbLabels;
+    bulkBar: KapiBulkBarLabels;
+    calendar: KapiDateRangePickerLabels;
+    canvasForm: KapiCanvasFormLabels;
+    collapsiblePanel: KapiCollapsiblePanelLabels;
+    commandPalette: KapiCommandPaletteLabels;
+    commentComposer: KapiCommentComposerLabels;
+    confirm: KapiConfirmLabels;
+    contextMenu: KapiContextMenuLabels;
+    contextPanel: KapiContextPanelLabels;
+    contextSlot: KapiContextSlotLabels;
+    countdown: KapiCountdownLabels;
+    cuitInput: KapiCuitInputLabels;
+    dialog: KapiDialogLabels;
+    fab: KapiFabLabels;
+    facetedSearch: KapiFacetedSearchLabels;
+    fileUpload: KapiFileUploadLabels;
+    fileViewer: KapiFileViewerLabels;
+    filterChips: KapiFilterChipsLabels;
+    input: KapiInputLabels;
+    link: KapiLinkLabels;
+    modal: KapiModalLabels;
+    notificationBell: KapiNotificationBellLabels;
+    numberStepper: KapiNumberStepperLabels;
+    offcanvas: KapiOffcanvasLabels;
+    offlineBanner: KapiOfflineBannerLabels;
+    pagination: KapiPaginationLabels;
+    photoView: KapiPhotoViewLabels;
+    rail: KapiRailLabels;
+    rating: KapiRatingLabels;
+    scrollArea: KapiScrollAreaLabels;
+    select: KapiSelectLabels;
+    shapeSheet: KapiShapeSheetLabels;
+    splitModal: KapiSplitModalLabels;
+    steps: KapiStepsLabels;
+    table: KapiTableLabels;
+    tableFilter: KapiTableFilterLabels;
+    tag: KapiTagLabels;
+    tagInput: KapiTagInputLabels;
+    toast: KapiToastLabels;
+    tour: KapiTourLabels;
+    tree: KapiTreeLabels;
+    unsavedBar: KapiUnsavedBarLabels;
+    unsavedGuard: UnsavedGuardLabels;
+    wizard: KapiWizardLabels;
+}
+/** Overrides por clave que recibe el provider: cada uno parcial (una clave en `undefined` no pisa). */
+export type KapiLabelOverrides = {
+    [K in keyof KapiLabelRegistry]?: KapiLabelsOverride<KapiLabelRegistry[K]>;
+};

package/dist/components/locale/linkLabels.d.ts

@@ -0,0 +1,6 @@
+/** Textos compartidos por los enlaces del DS: clave `link` del registro. */
+export type KapiLinkLabels = {
+    /** Aviso para lectores de pantalla en los enlaces con `newTab`. */
+    newTab: string;
+};
+export declare const DEFAULT_LINK_LABELS: KapiLinkLabels;

package/dist/components/locale/linkLabels.js

@@ -0,0 +1,4 @@
+//#region src/components/locale/linkLabels.ts
+var e = { newTab: "(se abre en una pestaña nueva)" };
+//#endregion
+export { e as DEFAULT_LINK_LABELS };

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

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type CtxSlidingListProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Clave del ítem activo; `null` oculta el indicador. */
+    active?: string | number | null;
+    children: ReactNode;
+};
+/**
+ * Lista del panel contextual con indicador deslizante (misma mecánica que KapiRail).
+ * Interno: el ítem activo se detecta por `aria-current="page"`.
+ */
+export declare const CtxSlidingList: ({ active, children, className, ...rest }: CtxSlidingListProps) => import("react").JSX.Element;

package/dist/components/navigation/CtxSlidingList.js

@@ -0,0 +1,24 @@
+"use client";
+import { joinClasses as e } from "../rootProps.js";
+import { useSlidingIndicator as t } from "../../hooks/useSlidingIndicator.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/navigation/CtxSlidingList.tsx
+var i = ({ active: i = null, children: a, className: o, ...s }) => {
+	let { containerRef: c, indicatorRef: l } = t({
+		active: i,
+		deps: [i, a],
+		findActive: (e) => e.querySelector("[aria-current=\"page\"]")
+	});
+	return /* @__PURE__ */ r("div", {
+		...s,
+		ref: c,
+		className: e("kapi-ctxlist", o),
+		children: [/* @__PURE__ */ n("span", {
+			ref: l,
+			className: "kapi-ctxlist__indicator",
+			"aria-hidden": "true"
+		}), a]
+	});
+};
+//#endregion
+export { i as CtxSlidingList };

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

@@ -0,0 +1,24 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import "./navigation.css";
+/** Sección de `KapiAccordion`. `Id` acota los ids (p. ej. una unión de literales). */
+export type KapiAccordionItem<Id extends string = string> = {
+    id: Id;
+    title: ReactNode;
+    content: ReactNode;
+    disabled?: boolean;
+};
+/** Atributos nativos (`id`, `style`, `data-*`…) van al contenedor. `Id` se infiere de `items`. */
+export type KapiAccordionProps<Id extends string = string> = Omit<HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & {
+    /** Secciones, en orden; cada una con `id`, título, contenido y `disabled` opcional. */
+    items: KapiAccordionItem<Id>[];
+    /** `true` (default): un solo ítem abierto a la vez. `false`: abren varios. */
+    single?: boolean;
+    /** Controlado: ids abiertos. Con `onOpenIdsChange` el padre decide el estado. */
+    openIds?: Id[];
+    /** Inicial cuando no es controlado. */
+    defaultOpenIds?: Id[];
+    /** Se llama con los ids abiertos después de cada apertura o cierre (controlado o no). */
+    onOpenIdsChange?: (openIds: Id[]) => void;
+};
+/** Acordeón: cada ítem es un botón (`aria-expanded`) que controla su región; flechas y Home/End recorren las cabeceras. */
+export declare function KapiAccordion<Id extends string = string>({ items, single, openIds, defaultOpenIds, onOpenIdsChange, className, ...rest }: KapiAccordionProps<Id>): import("react").JSX.Element;

package/dist/components/navigation/KapiAccordion.js

@@ -0,0 +1,68 @@
+"use client";
+import { joinClasses as e } from "../rootProps.js";
+/* empty css               */
+import { normalizeOpenIds as t, toggleOpenId as n } from "./accordionLogic.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useId as a, useState as o } from "react";
+import { ChevronDown as s } from "lucide-react";
+//#region src/components/navigation/KapiAccordion.tsx
+var c = ":scope > .kapi-accordion__item > .kapi-accordion__heading > .kapi-accordion__trigger:not(:disabled)", l = (e) => {
+	if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+	let t = e.currentTarget.closest(".kapi-accordion");
+	if (!t) return;
+	let n = Array.from(t.querySelectorAll(c)), r = n.indexOf(e.currentTarget), i = n.length - 1, a = e.key === "ArrowDown" ? (r + 1) % n.length : e.key === "ArrowUp" ? (r - 1 + n.length) % n.length : e.key === "Home" ? 0 : e.key === "End" ? i : null;
+	a === null || r < 0 || (e.preventDefault(), n[a]?.focus());
+};
+function u({ items: c, single: u = !0, openIds: d, defaultOpenIds: f = [], onOpenIdsChange: p, className: m, ...h }) {
+	let g = a(), [_, v] = o(() => t(f, u)), y = t(d ?? _, u), b = (e) => {
+		let t = n(y, e, u);
+		d === void 0 && v(t), p?.(t);
+	};
+	return /* @__PURE__ */ r("div", {
+		...h,
+		className: e("kapi-accordion", m),
+		children: c.map((e) => {
+			let t = y.includes(e.id), n = `${g}-b-${e.id}`, a = `${g}-p-${e.id}`;
+			return /* @__PURE__ */ i("div", {
+				className: t ? "kapi-accordion__item kapi-accordion__item--open" : "kapi-accordion__item",
+				children: [/* @__PURE__ */ r("h3", {
+					className: "kapi-accordion__heading",
+					children: /* @__PURE__ */ i("button", {
+						type: "button",
+						id: n,
+						className: "kapi-accordion__trigger",
+						"aria-expanded": t,
+						"aria-controls": a,
+						disabled: e.disabled,
+						onClick: () => b(e.id),
+						onKeyDown: l,
+						children: [/* @__PURE__ */ r("span", {
+							className: "kapi-accordion__title",
+							children: e.title
+						}), /* @__PURE__ */ r(s, {
+							className: "kapi-accordion__chevron",
+							size: 18,
+							strokeWidth: 2,
+							"aria-hidden": !0
+						})]
+					})
+				}), /* @__PURE__ */ r("div", {
+					id: a,
+					role: "region",
+					"aria-labelledby": n,
+					className: "kapi-accordion__region",
+					inert: !t,
+					children: /* @__PURE__ */ r("div", {
+						className: "kapi-accordion__clip",
+						children: /* @__PURE__ */ r("div", {
+							className: "kapi-accordion__content",
+							children: e.content
+						})
+					})
+				})]
+			}, e.id);
+		})
+	});
+}
+//#endregion
+export { u as KapiAccordion };

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

@@ -0,0 +1,23 @@
+import "./navigation.css";
+import { type HTMLAttributes, type ReactNode, type Ref } from "react";
+import type { KapiLabelsOverride } from "../labelsLogic";
+export type KapiBreadcrumbItem = {
+    label: ReactNode;
+    onClick?: () => void;
+};
+export type KapiBreadcrumbLabels = {
+    /** Nombre accesible del `<nav>` (sin `aria-label`). */
+    navigation: string;
+};
+export declare const DEFAULT_BREADCRUMB_LABELS: KapiBreadcrumbLabels;
+/** Atributos nativos (`id`, `style`, `data-*`, `aria-*`…) van al `<nav>`. */
+export type KapiBreadcrumbProps = Omit<HTMLAttributes<HTMLElement>, "children"> & {
+    /** Niveles de la ruta, del más general al actual (el último es la página actual). */
+    items: KapiBreadcrumbItem[];
+    /** Textos fijos (clave `breadcrumb`). `aria-label` gana sobre `navigation`. */
+    labels?: KapiLabelsOverride<KapiBreadcrumbLabels> | undefined;
+    /** Ref al `<nav>`. */
+    ref?: Ref<HTMLElement>;
+};
+/** Migas de pan: `Inicio · Personas · Ana Pérez`. El último ítem es la ubicación actual. */
+export declare function KapiBreadcrumb({ items, "aria-label": ariaLabelAttr, labels, className, ref, ...rest }: KapiBreadcrumbProps): import("react").JSX.Element;

package/dist/components/navigation/KapiBreadcrumb.js

@@ -0,0 +1,32 @@
+"use client";
+import { useLabels as e } from "../locale/KapiLocaleProvider.js";
+import { joinClasses as t } from "../rootProps.js";
+/* empty css               */
+import { breadcrumbKinds as n } from "./breadcrumbLogic.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Fragment as a } from "react";
+//#region src/components/navigation/KapiBreadcrumb.tsx
+var o = { navigation: "Ubicación" };
+function s({ items: s, "aria-label": c, labels: l, className: u, ref: d, ...f }) {
+	let p = e("breadcrumb", o, l), m = n(s);
+	return /* @__PURE__ */ r("nav", {
+		...f,
+		ref: d,
+		className: t("kapi-breadcrumb", u),
+		"aria-label": c ?? p.navigation,
+		children: s.map((e, t) => /* @__PURE__ */ i(a, { children: [t > 0 && /* @__PURE__ */ r("span", {
+			"aria-hidden": !0,
+			children: " · "
+		}), m[t] === "link" ? /* @__PURE__ */ r("button", {
+			type: "button",
+			className: "kapi-link",
+			onClick: e.onClick,
+			children: e.label
+		}) : m[t] === "current" ? /* @__PURE__ */ r("b", {
+			"aria-current": "page",
+			children: e.label
+		}) : /* @__PURE__ */ r("span", { children: e.label })] }, t))
+	});
+}
+//#endregion
+export { o as DEFAULT_BREADCRUMB_LABELS, s as KapiBreadcrumb };

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

@@ -0,0 +1,63 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+import { type KapiTooltipSide } from "../overlays/KapiTooltip";
+import "./navigation.css";
+import type { KapiLabelsOverride } from "../labelsLogic";
+export type KapiCollapsiblePanelLabels = {
+    /** Botón de plegar (sin `collapseLabel`). */
+    collapse: string;
+    /** Botón de desplegar (sin `expandLabel`). */
+    expand: string;
+    /** Nombre del `<aside>` (sin `aria-label`). */
+    region: string;
+};
+export declare const DEFAULT_COLLAPSIBLE_PANEL_LABELS: KapiCollapsiblePanelLabels;
+export type KapiCollapsiblePanelSide = "left" | "right";
+/**
+ * Atributos nativos (`id`, `style`, `data-*`…) van al `<aside>`; `style` convive con el ancho propio. El
+ * `onToggle` nativo se omite a propósito: así un `onToggle` viejo (hoy `onCollapsedChange`) no compila.
+ */
+export type KapiCollapsiblePanelProps = Omit<HTMLAttributes<HTMLElement>, "children" | "onToggle"> & {
+    /** Contenido del panel expandido (cuerpo scrolleable). */
+    children?: ReactNode;
+    /** Contenido de la tira cuando está plegado (usa `KapiCollapsiblePanelStripItem`). */
+    strip?: ReactNode;
+    /** Cabecera del panel expandido, a la izquierda del botón de plegar. */
+    header?: ReactNode;
+    /** Estado controlado. Si se omite, el panel maneja el suyo. */
+    collapsed?: boolean;
+    /** Estado inicial plegado (no controlado). */
+    defaultCollapsed?: boolean;
+    /** Se llama al plegar (`true`) o desplegar (`false`) con el estado pedido. */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Borde del layout donde vive: define el sentido de las flechas y el lado del tooltip. */
+    side?: KapiCollapsiblePanelSide;
+    /** Ancho expandido (CSS), por defecto 320px. */
+    expandedWidth?: number | string;
+    /** Ancho de la tira (CSS), por defecto 58px. */
+    collapsedWidth?: number | string;
+    /** Gana sobre `labels.collapse`. */
+    collapseLabel?: string;
+    /** Gana sobre `labels.expand`. */
+    expandLabel?: string;
+    /** Textos fijos (clave `collapsiblePanel`); `aria-label` gana sobre `region`. */
+    labels?: KapiLabelsOverride<KapiCollapsiblePanelLabels> | undefined;
+};
+/** Lado del tooltip: siempre hacia el interior del layout. */
+export declare const tooltipSideFor: (side: KapiCollapsiblePanelSide) => KapiTooltipSide;
+/** Panel lateral plegable con tira (expandido ~320 / tira ~58). Genérico: el contenido es tuyo. */
+export declare const KapiCollapsiblePanel: ({ children, strip, header, collapsed, defaultCollapsed, onCollapsedChange, side, expandedWidth, collapsedWidth, collapseLabel: collapseLabelProp, expandLabel: expandLabelProp, "aria-label": ariaLabelProp, labels, className, style: styleProp, ...rest }: KapiCollapsiblePanelProps) => import("react").JSX.Element;
+/** Atributos nativos (`id`, `style`, `data-*`…) van al `<button>` (no al envoltorio del tooltip). */
+export type KapiCollapsiblePanelStripItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onClick" | "type"> & {
+    /** Ícono (lucide-react). */
+    icon: ReactNode;
+    /** Texto del tooltip y `aria-label`. */
+    label: string;
+    /** Marca el ícono como activo (resaltado y `aria-pressed`). */
+    active?: boolean;
+    /** Click en el ícono. */
+    onClick?: () => void;
+    /** Borde donde vive el panel (el mismo `side` del `KapiCollapsiblePanel`): el tooltip abre hacia el interior. */
+    side?: KapiCollapsiblePanelSide;
+};
+/** Ícono de la tira con tooltip. */
+export declare const KapiCollapsiblePanelStripItem: ({ icon, label, active, onClick, side, className, ...rest }: KapiCollapsiblePanelStripItemProps) => import("react").JSX.Element;

package/dist/components/navigation/KapiCollapsiblePanel.js

@@ -0,0 +1,83 @@
+"use client";
+import { useLabels as e } from "../locale/KapiLocaleProvider.js";
+import { joinClasses as t } from "../rootProps.js";
+import { KapiTooltip as n } from "../overlays/KapiTooltip.js";
+/* empty css               */
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useLayoutEffect as o, useRef as s, useState as c } from "react";
+import { ChevronsLeft as l, ChevronsRight as u } from "lucide-react";
+//#region src/components/navigation/KapiCollapsiblePanel.tsx
+var d = {
+	collapse: "Plegar panel",
+	expand: "Desplegar panel",
+	region: "Panel lateral"
+}, f = (e) => typeof e == "number" ? `${e}px` : e, p = (e) => e === "right" ? "left" : "right", m = ({ children: m, strip: h, header: g, collapsed: _, defaultCollapsed: v = !1, onCollapsedChange: y, side: b = "right", expandedWidth: x = 320, collapsedWidth: S = 58, collapseLabel: C, expandLabel: w, "aria-label": T, labels: E, className: D, style: O, ...k }) => {
+	let A = e("collapsiblePanel", d, E), j = C ?? A.collapse, M = w ?? A.expand, N = T ?? A.region, [P, F] = c(v), I = _ ?? P, L = s(null), [R, z] = c(null);
+	o(() => {
+		R && (I === R.next && L.current?.focus(), z(null));
+	}, [R, I]);
+	let B = () => {
+		let e = !I;
+		z({ next: e }), _ === void 0 && F(e), y?.(e);
+	}, V = b === "right" ? u : l, H = b === "right" ? l : u, U = {
+		...O,
+		"--cpanel-w": f(I ? S : x)
+	};
+	return /* @__PURE__ */ i("aside", {
+		...k,
+		className: t(`kapi-cpanel kapi-cpanel--${b}`, I && "is-collapsed", D),
+		style: U,
+		"aria-label": N,
+		children: I ? /* @__PURE__ */ a("div", {
+			className: "kapi-cpanel__strip",
+			children: [/* @__PURE__ */ i(n, {
+				label: M,
+				prefer: p(b),
+				children: /* @__PURE__ */ i("button", {
+					ref: L,
+					type: "button",
+					className: "kapi-cpanel__fold",
+					onClick: B,
+					"aria-label": M,
+					children: /* @__PURE__ */ i(H, {
+						size: 15,
+						strokeWidth: 2
+					})
+				})
+			}), h]
+		}) : /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ a("div", {
+			className: "kapi-cpanel__head",
+			children: [/* @__PURE__ */ i("div", {
+				className: "kapi-cpanel__header",
+				children: g
+			}), /* @__PURE__ */ i("button", {
+				ref: L,
+				type: "button",
+				className: "kapi-cpanel__fold",
+				onClick: B,
+				"aria-label": j,
+				children: /* @__PURE__ */ i(V, {
+					size: 15,
+					strokeWidth: 2
+				})
+			})]
+		}), /* @__PURE__ */ i("div", {
+			className: "kapi-cpanel__body",
+			children: m
+		})] })
+	});
+}, h = ({ icon: e, label: r, active: a = !1, onClick: o, side: s = "right", className: c, ...l }) => /* @__PURE__ */ i(n, {
+	label: r,
+	prefer: p(s),
+	children: /* @__PURE__ */ i("button", {
+		...l,
+		type: "button",
+		className: t("kapi-cpanel__stripbtn", a && "is-on", c),
+		"aria-label": r,
+		"aria-pressed": a,
+		onClick: o,
+		children: e
+	})
+});
+//#endregion
+export { d as DEFAULT_COLLAPSIBLE_PANEL_LABELS, m as KapiCollapsiblePanel, h as KapiCollapsiblePanelStripItem, p as tooltipSideFor };

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

@@ -0,0 +1,117 @@
+import { type ReactNode } from "react";
+import "./navigation.css";
+import { type KapiLinkLabels } from "../locale/linkLabels";
+import type { KapiPanelCollapsedMode } from "./panelMiniLogic";
+import { type KapiNavBadgeValue } from "./navBadgeLogic";
+import type { KapiBadgeVariant } from "../display/KapiBadge";
+import { type KapiRootProps } from "../rootProps";
+import type { KapiLabelsOverride } from "../labelsLogic";
+/** Ítem de una sección del panel. `Id` acota los ids (p. ej. una unión de literales). */
+export type KapiContextPanelItem<Id extends string = string> = {
+    id: Id;
+    label: ReactNode;
+    /** Segunda línea (si hay `detail` o `initials`, el ítem se dibuja como "reciente"). */
+    detail?: ReactNode;
+    /** Iniciales de un avatar a la izquierda. */
+    initials?: string;
+    /** Ícono (lucide-react) a la izquierda de la etiqueta. */
+    icon?: ReactNode;
+    /** Contenido a la derecha (badge, contador…). */
+    trailing?: ReactNode;
+    /** 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;
+    /** No se puede elegir (botón deshabilitado o enlace `aria-disabled`). */
+    disabled?: boolean;
+    /** Si se pasa (y el ítem no es "reciente"), se dibuja un enlace real `<a>` en vez de un botón. */
+    href?: string;
+    /** Destino en otro sistema: agrega el ícono ↗ a la derecha (sólo con `href`). */
+    external?: boolean;
+    /** Abrir el enlace en una pestaña nueva (sólo con `href`). */
+    newTab?: boolean;
+};
+export type KapiContextPanelSection<Id extends string = string> = {
+    id: string;
+    /** Etiqueta de sección (mayúsculas chicas). */
+    label?: ReactNode;
+    /** Ítems de la sección, en orden. */
+    items: KapiContextPanelItem<Id>[];
+};
+export type KapiContextPanelSearch = {
+    placeholder?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    "aria-label"?: string;
+};
+/** `Id` (el de los ítems) se infiere de `sections`. */
+export type KapiContextSectionsProps<Id extends string = string> = {
+    /** Secciones con sus ítems, en orden; cada una con etiqueta opcional. */
+    sections: KapiContextPanelSection<Id>[];
+    /**
+     * Id del ítem activo (`aria-current="page"`); lo decide la app, normalmente desde el router. Es uno solo
+     * para todo el panel: marca la página actual, no una selección por sección.
+     */
+    activeId?: Id;
+    /** Se llama con el `id` del ítem clickeado (no aplica a los enlaces con `href`). */
+    onSelect?: (id: Id) => void;
+    /** Buscador opcional sobre las secciones. */
+    search?: KapiContextPanelSearch;
+    /** Texto de ayuda al pie. */
+    hint?: ReactNode;
+    /** Textos fijos (aviso de pestaña nueva; clave compartida `link`). */
+    labels?: KapiLabelsOverride<KapiLinkLabels> | undefined;
+};
+/** `className`/`style`/`id` van al `<aside>` (plegado o no); el ancho redimensionado gana sobre `style`. */
+export type KapiContextPanelProps<Id extends string = string> = KapiContextSectionsProps<Id> & KapiRootProps & {
+    /** Título de la cabecera del panel. */
+    title: ReactNode;
+    /** Acciones extra en la cabecera, a la izquierda del botón de plegar. */
+    actions?: ReactNode;
+    /** Estado controlado. Si se omite, el panel maneja el suyo. */
+    collapsed?: boolean;
+    /** Estado inicial plegado (no controlado). Por defecto `false`. */
+    defaultCollapsed?: boolean;
+    /** Se llama al plegar (`true`) o desplegar (`false`) con el estado pedido. */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** `aria-label` del botón de plegar; gana sobre `labels.collapse`. */
+    collapseLabel?: string;
+    /** `aria-label` del botón de reabrir cuando está plegado. */
+    expandLabel?: string;
+    /**
+     * Textos fijos (redimensionar, plegar/desplegar, nombre del panel; `newTab` sale de la clave
+     * compartida `link`). `collapseLabel`, `expandLabel` y `aria-label` ganan sobre ellos.
+     */
+    labels?: KapiLabelsOverride<KapiContextPanelLabels & KapiLinkLabels> | undefined;
+    /** Lado del contenido donde se ubica el panel. Por defecto "left". */
+    side?: "left" | "right";
+    /** Permite cambiar el ancho arrastrando el borde interno (sólo desplegado). Por defecto `false`. */
+    resizable?: boolean;
+    /** Ancho mínimo en px al redimensionar. Por defecto 200. */
+    minWidth?: number;
+    /** Ancho máximo en px al redimensionar. Por defecto 420. */
+    maxWidth?: number;
+    /**
+     * Cómo queda plegado: `hidden` (default) deja sólo el botón de desplegar; `mini` suma debajo los ítems como
+     * íconos con tooltip y avisos.
+     */
+    collapsedMode?: KapiPanelCollapsedMode | undefined;
+    /** Nombre accesible del `<aside>`; gana sobre el nombre de `labels`. */
+    "aria-label"?: string;
+};
+/** Cuerpo del panel (buscador + secciones + hint). Usalo dentro de `KapiContextSlot` o de `KapiContextPanel`. */
+export declare const KapiContextSections: <Id extends string = string>({ sections, activeId, onSelect, search, hint, labels }: KapiContextSectionsProps<Id>) => import("react").JSX.Element;
+export type KapiContextPanelLabels = {
+    resize: string;
+    /** Botón de plegar (sin `collapseLabel`). */
+    collapse: string;
+    /** Botón de reabrir (sin `expandLabel`). */
+    expand: string;
+    /** Nombre del `<aside>` (sin `aria-label`). */
+    region: string;
+};
+export declare const DEFAULT_CONTEXT_PANEL_LABELS: KapiContextPanelLabels;
+/** Panel de contexto genérico: todo el contenido llega por props (nada atado a un módulo). */
+export declare const KapiContextPanel: <Id extends string = string>({ title, actions, collapsed, defaultCollapsed, onCollapsedChange, collapseLabel: collapseLabelProp, expandLabel: expandLabelProp, side, collapsedMode, resizable, minWidth, maxWidth, "aria-label": ariaLabelProp, labels, className, style, id, ...body }: KapiContextPanelProps<Id>) => import("react").JSX.Element;