@kapiuara/ui 0.0.0-stage → 0.1.0

package/dist/components/layout/KapiAccessCard.js

@@ -0,0 +1,66 @@
+"use client";
+import { useLabels as e } from "../locale/KapiLocaleProvider.js";
+import { DEFAULT_LINK_LABELS as t } from "../locale/linkLabels.js";
+import { accessCardAffordance as n, accessCardClasses as r, isActivationKey as i, linkAttrs as a } from "./accessCardLogic.js";
+/* empty css                   */
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { ChevronRight as l, ExternalLink as u } from "lucide-react";
+//#region src/components/layout/KapiAccessCard.tsx
+var d = ({ icon: d, tone: f, title: p, description: m, external: h = !1, href: g, newTab: _, onClick: v, className: y, style: b, id: x, labels: S }) => {
+	let C = e("link", t, S), w = r({
+		tone: f,
+		className: y
+	}), T = /* @__PURE__ */ c(o, { children: [
+		/* @__PURE__ */ s("span", {
+			className: "kapi-accesscard__icon",
+			"aria-hidden": "true",
+			children: d
+		}),
+		/* @__PURE__ */ c("span", {
+			className: "kapi-accesscard__txt",
+			children: [/* @__PURE__ */ s("span", {
+				className: "kapi-accesscard__title",
+				children: p
+			}), m !== void 0 && /* @__PURE__ */ s("span", {
+				className: "kapi-accesscard__desc",
+				children: m
+			})]
+		}),
+		n(h) === "external" ? /* @__PURE__ */ s(u, {
+			className: "kapi-accesscard__go kapi-accesscard__go--ext",
+			size: 16,
+			"aria-hidden": "true"
+		}) : /* @__PURE__ */ s(l, {
+			className: "kapi-accesscard__go",
+			size: 16,
+			"aria-hidden": "true"
+		})
+	] });
+	return g === void 0 ? /* @__PURE__ */ s("div", {
+		className: w,
+		style: b,
+		id: x,
+		role: "button",
+		tabIndex: 0,
+		onClick: v,
+		onKeyDown: (e) => {
+			i(e.key) && (e.preventDefault(), v?.());
+		},
+		children: T
+	}) : /* @__PURE__ */ c("a", {
+		className: w,
+		style: b,
+		id: x,
+		href: g,
+		...a({
+			external: h,
+			newTab: _
+		}),
+		children: [T, _ && /* @__PURE__ */ c("span", {
+			className: "kapi-accesscard__sr",
+			children: [" ", C.newTab]
+		})]
+	});
+};
+//#endregion
+export { d as KapiAccessCard };

package/dist/components/layout/KapiAccountMenu.d.ts

@@ -0,0 +1,61 @@
+import { type RefObject } from "react";
+import { type KapiRootProps } from "../rootProps";
+import type { KapiLabelsOverride } from "../labelsLogic";
+export type KapiAccountMenuUser = {
+    name: string;
+    email: string;
+    role?: string;
+    /** Pisa las iniciales calculadas desde `name`. */
+    initials?: string;
+};
+/** `className`/`style` van al menú (`role="menu"`); `id` también (para el `aria-controls` del disparador). */
+export type KapiAccountMenuProps = KapiRootProps & {
+    /** Muestra u oculta el menú (controlado). */
+    open: boolean;
+    /** Pide cerrar el menú (Escape, click afuera o tras elegir una acción); el foco vuelve al disparador. */
+    onClose: () => void;
+    /** Usuario de la cabecera: nombre, email, rol e iniciales opcionales. */
+    user: KapiAccountMenuUser;
+    /** Cantidad de notificaciones sin leer; con 0 o sin valor no se muestra el badge. */
+    notificationsCount?: number | undefined;
+    /** Click en "Notificaciones"; después el menú se cierra. */
+    onNotifications?: (() => void) | undefined;
+    /** Click en "Mi perfil"; después el menú se cierra. */
+    onProfile?: (() => void) | undefined;
+    /** Click en "Configuración"; después el menú se cierra. */
+    onConfig?: (() => void) | undefined;
+    /** Click en "Cerrar sesión"; después el menú se cierra. */
+    onLogout?: (() => void) | undefined;
+    /** Textos del menú. */
+    labels?: KapiLabelsOverride<KapiAccountMenuLabels> | undefined;
+    /**
+     * Disparador al que vuelve el foco al cerrar con Escape o al elegir un ítem. Sin él, vuelve al
+     * elemento que tenía el foco al abrir (normalmente el botón que lo abrió).
+     */
+    triggerRef?: RefObject<HTMLElement | null> | undefined;
+};
+export type KapiAccountMenuLabels = {
+    notifications: string;
+    profile: string;
+    config: string;
+    theme: string;
+    themeLight: string;
+    themeDark: string;
+    /** Sigue al modo claro/oscuro del sistema operativo. */
+    themeSystem: string;
+    font: string;
+    logout: string;
+    /** Nombre accesible del menú. */
+    menu: string;
+};
+export declare const DEFAULT_ACCOUNT_MENU_LABELS: KapiAccountMenuLabels;
+/**
+ * Menú de cuenta: popover que nace del botón "Cuenta" del rail. Controlado por
+ * `open`; el tema y la fuente se leen y cambian con `useKapiTheme`. Se cierra con
+ * click afuera (backdrop) o Escape.
+ * Patrón WAI-ARIA menu button: al abrir enfoca el primer ítem; flechas (con vuelta), Home/End recorren
+ * `menuitem`/`menuitemradio` (modelo compartido `menuKeyboardLogic`); Escape o elegir un ítem cierran y
+ * devuelven el foco al disparador; Tab cierra y deja seguir el foco. El disparador lo pone el consumidor
+ * (con `aria-haspopup="menu"` y `aria-expanded`).
+ */
+export declare function KapiAccountMenu({ open, onClose, user, notificationsCount, onNotifications, onProfile, onConfig, onLogout, labels, id, triggerRef, className, style }: KapiAccountMenuProps): import("react").JSX.Element | null;

package/dist/components/layout/KapiAccountMenu.js

@@ -0,0 +1,212 @@
+"use client";
+import { useLabels as e } from "../locale/KapiLocaleProvider.js";
+import { joinClasses as t } from "../rootProps.js";
+import { useExitPresence as n } from "../overlays/useExitPresence.js";
+import { focusedMenuIndex as r, menuKeyIntent as i, nextEnabledIndex as a } from "../overlays/menuKeyboardLogic.js";
+import { initialsFrom as o } from "../display/avatarLogic.js";
+import { useKapiTheme as s } from "../../hooks/useKapiTheme.js";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useEffect as d, useId as f, useRef as p } from "react";
+import { Bell as m, LogOut as h, Settings as g, User as _ } from "lucide-react";
+//#region src/components/layout/KapiAccountMenu.tsx
+var v = {
+	notifications: "Notificaciones",
+	profile: "Mi perfil",
+	config: "Configuración",
+	theme: "Tema",
+	themeLight: "Claro",
+	themeDark: "Oscuro",
+	themeSystem: "Sistema",
+	font: "Fuente",
+	logout: "Cerrar sesión",
+	menu: "Menú de cuenta"
+}, y = {
+	size: 18,
+	strokeWidth: 1.8
+}, b = [{
+	key: "nunito",
+	label: "Nunito"
+}, {
+	key: "roboto",
+	label: "Roboto"
+}], x = ({ label: e, children: t }) => {
+	let n = f();
+	return /* @__PURE__ */ u("div", {
+		className: "kapi-acct__row",
+		role: "group",
+		"aria-labelledby": n,
+		children: [/* @__PURE__ */ l("span", {
+			id: n,
+			className: "kapi-acct__rowlabel",
+			children: e
+		}), /* @__PURE__ */ l("div", {
+			className: "kapi-acct__seg",
+			children: t
+		})]
+	});
+}, S = "[role=\"menuitem\"], [role=\"menuitemradio\"]";
+function C({ open: f, onClose: C, user: w, notificationsCount: T = 0, onNotifications: E, onProfile: D, onConfig: O, onLogout: k, labels: A, id: j, triggerRef: M, className: N, style: P }) {
+	let { preference: F, setPreference: I, font: L, setFont: R } = s(), z = e("accountMenu", v, A), B = [
+		{
+			key: "light",
+			label: z.themeLight
+		},
+		{
+			key: "dark",
+			label: z.themeDark
+		},
+		{
+			key: "system",
+			label: z.themeSystem
+		}
+	], V = p(null), H = p(null), { present: U, closing: W } = n(f, V), G = () => Array.from(V.current?.querySelectorAll(S) ?? []), K = () => {
+		C(), (M?.current ?? H.current)?.focus();
+	}, q = p(K);
+	if (q.current = K, d(() => {
+		f && (H.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, V.current?.querySelector(S)?.focus());
+	}, [f]), d(() => {
+		if (!f) return;
+		let e = (e) => {
+			e.key === "Escape" && (e.preventDefault(), q.current());
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [f]), !U) return null;
+	let J = (e) => () => {
+		e?.(), K();
+	}, Y = (e) => {
+		let t = i(e.key);
+		if (t.kind === "move") {
+			e.preventDefault();
+			let n = G();
+			n[a(r(document.activeElement), t.dir, n.map((e, t) => t))]?.focus();
+		} else t.kind === "close" && t.returnFocus ? (e.preventDefault(), e.stopPropagation(), K()) : t.kind === "close" && !t.returnFocus && ((M?.current ?? H.current)?.focus(), C());
+	}, X = 0, Z = () => ({
+		tabIndex: -1,
+		"data-menu-index": X++
+	});
+	return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("div", {
+		className: "kapi-acct__backdrop",
+		"data-closing": W || void 0,
+		onClick: C,
+		"aria-hidden": "true"
+	}), /* @__PURE__ */ u("div", {
+		ref: V,
+		id: j,
+		className: t("kapi-acct", N),
+		style: P,
+		role: "menu",
+		"data-closing": W || void 0,
+		inert: W || void 0,
+		"aria-label": z.menu,
+		onKeyDown: Y,
+		children: [/* @__PURE__ */ u("div", {
+			className: "kapi-acct__head",
+			children: [/* @__PURE__ */ l("span", {
+				className: "kapi-acct__av",
+				children: w.initials ?? o(w.name)
+			}), /* @__PURE__ */ u("div", {
+				className: "kapi-acct__who",
+				children: [/* @__PURE__ */ l("div", {
+					className: "kapi-acct__name",
+					children: w.name
+				}), /* @__PURE__ */ l("div", {
+					className: "kapi-acct__mail",
+					children: w.role ? `${w.email} · ${w.role}` : w.email
+				})]
+			})]
+		}), /* @__PURE__ */ u("div", {
+			className: "kapi-acct__body",
+			children: [
+				/* @__PURE__ */ u("button", {
+					type: "button",
+					role: "menuitem",
+					...Z(),
+					className: "kapi-acct__item",
+					onClick: J(E),
+					children: [/* @__PURE__ */ u("span", {
+						className: "kapi-acct__label",
+						children: [/* @__PURE__ */ l(m, {
+							...y,
+							color: "var(--kapi-ink-3)"
+						}), z.notifications]
+					}), T > 0 && /* @__PURE__ */ l("span", {
+						className: "kapi-acct__badge",
+						children: T
+					})]
+				}),
+				/* @__PURE__ */ l("button", {
+					type: "button",
+					role: "menuitem",
+					...Z(),
+					className: "kapi-acct__item",
+					onClick: J(D),
+					children: /* @__PURE__ */ u("span", {
+						className: "kapi-acct__label",
+						children: [/* @__PURE__ */ l(_, {
+							...y,
+							color: "var(--kapi-ink-3)"
+						}), z.profile]
+					})
+				}),
+				/* @__PURE__ */ l("button", {
+					type: "button",
+					role: "menuitem",
+					...Z(),
+					className: "kapi-acct__item",
+					onClick: J(O),
+					children: /* @__PURE__ */ u("span", {
+						className: "kapi-acct__label",
+						children: [/* @__PURE__ */ l(g, {
+							...y,
+							color: "var(--kapi-ink-3)"
+						}), z.config]
+					})
+				}),
+				/* @__PURE__ */ l(x, {
+					label: z.theme,
+					children: B.map((e) => /* @__PURE__ */ l("button", {
+						type: "button",
+						role: "menuitemradio",
+						...Z(),
+						className: F === e.key ? "on" : "",
+						"aria-checked": F === e.key,
+						onClick: () => I(e.key),
+						children: e.label
+					}, e.key))
+				}),
+				/* @__PURE__ */ l(x, {
+					label: z.font,
+					children: b.map((e) => /* @__PURE__ */ l("button", {
+						type: "button",
+						role: "menuitemradio",
+						...Z(),
+						className: L === e.key ? "on" : "",
+						"aria-checked": L === e.key,
+						onClick: () => R(e.key),
+						children: e.label
+					}, e.key))
+				}),
+				/* @__PURE__ */ l("div", {
+					role: "separator",
+					className: "kapi-acct__sep"
+				}),
+				/* @__PURE__ */ l("button", {
+					type: "button",
+					role: "menuitem",
+					...Z(),
+					className: "kapi-acct__item kapi-acct__item--danger",
+					onClick: J(k),
+					children: /* @__PURE__ */ u("span", {
+						className: "kapi-acct__label",
+						children: [/* @__PURE__ */ l(h, {
+							...y,
+							color: "var(--kapi-danger)"
+						}), z.logout]
+					})
+				})
+			]
+		})]
+	})] });
+}
+//#endregion
+export { v as DEFAULT_ACCOUNT_MENU_LABELS, C as KapiAccountMenu };

package/dist/components/layout/KapiCard.d.ts

@@ -0,0 +1,43 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import "./KapiCard.css";
+type DivProps = Omit<HTMLAttributes<HTMLDivElement>, "title">;
+export type KapiCardHeaderProps = DivProps & {
+    /** Título a la izquierda de la cabecera. */
+    title?: ReactNode;
+    /** Acciones a la derecha (botones, badge, link…). */
+    actions?: ReactNode;
+};
+/** Cabecera de card: título a la izquierda, acciones a la derecha. */
+export declare function KapiCardHeader({ title, actions, className, children, ...rest }: KapiCardHeaderProps): import("react").JSX.Element;
+/** Cuerpo de card (ocupa el alto restante). */
+export declare function KapiCardBody({ className, ...rest }: DivProps): import("react").JSX.Element;
+/** Pie de card, con separador superior y acciones alineadas a la derecha. */
+export declare function KapiCardFooter({ className, ...rest }: DivProps): import("react").JSX.Element;
+export type KapiCardProps = DivProps & {
+    /** Atajo: si se pasa, renderiza un `KapiCardHeader`. */
+    title?: ReactNode;
+    /** Atajo: acciones a la derecha de la cabecera (botones, badge, link…). */
+    actions?: ReactNode;
+    /** Atajo: si se pasa, renderiza un `KapiCardFooter`. */
+    footer?: ReactNode;
+    /** Sin padding propio: para contenido a sangre (tablas, listas) con header/footer con su padding. */
+    flush?: boolean;
+    /**
+     * La card es contenedor (`container: kapi-card`): bajo 360px de ancho el header apila título y
+     * acciones y el pie reparte sus botones. Opt-in porque el contenedor no toma ancho de su contenido
+     * (en un flex que la dimensiona por contenido hay que darle ancho). Default `false`.
+     */
+    responsive?: boolean;
+    /**
+     * La card responde al puntero: cursor, hover-lift y anillo de foco. Es sólo presentación —
+     * el destino lo pone el consumidor (`onClick` con `role`/`tabIndex`, o un enlace adentro).
+     * Default `false`: una card de panel estática no se mueve. Sin movimiento, el lift se apaga.
+     */
+    interactive?: boolean;
+};
+/**
+ * Card. Dos formas de uso: props (`title`/`actions`/`footer` + children)
+ * o composición con `KapiCardHeader`, `KapiCardBody` y `KapiCardFooter`.
+ */
+export declare function KapiCard({ title, actions, footer, flush, responsive, interactive, className, children, ...rest }: KapiCardProps): import("react").JSX.Element;
+export {};

package/dist/components/layout/KapiCard.js

@@ -0,0 +1,53 @@
+"use client";
+import { cardClasses as e, hasCardHeader as t } from "./cardLogic.js";
+/* empty css             */
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/layout/KapiCard.tsx
+function i({ title: e, actions: t, className: i, children: a, ...o }) {
+	return /* @__PURE__ */ r("div", {
+		className: ["kapi-panelcard__head", i].filter(Boolean).join(" "),
+		...o,
+		children: [
+			e != null && /* @__PURE__ */ n("span", { children: e }),
+			a,
+			t != null && /* @__PURE__ */ n("span", {
+				className: "kapi-panelcard__actions",
+				children: t
+			})
+		]
+	});
+}
+function a({ className: e, ...t }) {
+	return /* @__PURE__ */ n("div", {
+		className: ["kapi-card__body", e].filter(Boolean).join(" "),
+		...t
+	});
+}
+function o({ className: e, ...t }) {
+	return /* @__PURE__ */ n("div", {
+		className: ["kapi-card__foot", e].filter(Boolean).join(" "),
+		...t
+	});
+}
+function s({ title: s, actions: c, footer: l, flush: u = !1, responsive: d = !1, interactive: f = !1, className: p, children: m, ...h }) {
+	let g = t(s, c) || l != null;
+	return /* @__PURE__ */ r("div", {
+		className: e({
+			flush: u,
+			responsive: d,
+			interactive: f,
+			className: p
+		}),
+		...h,
+		children: [
+			t(s, c) && /* @__PURE__ */ n(i, {
+				title: s,
+				actions: c
+			}),
+			g ? /* @__PURE__ */ n(a, { children: m }) : m,
+			l != null && /* @__PURE__ */ n(o, { children: l })
+		]
+	});
+}
+//#endregion
+export { s as KapiCard, a as KapiCardBody, o as KapiCardFooter, i as KapiCardHeader };

package/dist/components/layout/KapiCluster.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from "react";
+import { type KapiClusterAlign, type KapiClusterJustify, type KapiGap } from "./layoutPrimitives";
+import "./layout-primitives.css";
+export type KapiClusterProps = HTMLAttributes<HTMLDivElement> & {
+    /** Espacio entre hijos: número = px, string = largo CSS. Default 12px. */
+    gap?: KapiGap;
+    /** Distribución en el eje principal (`justify-content`). */
+    justify?: KapiClusterJustify;
+    /** Alineación en el eje cruzado (`align-items`). Default `center`. */
+    align?: KapiClusterAlign;
+    /** Si los hijos saltan de línea. Default `true`. */
+    wrap?: boolean;
+};
+/** Fila horizontal que envuelve (flex row wrap). */
+export declare function KapiCluster({ gap, justify, align, wrap, className, style, children, ...rest }: KapiClusterProps): import("react").JSX.Element;

package/dist/components/layout/KapiCluster.js

@@ -0,0 +1,21 @@
+"use client";
+import { clusterProps as e } from "./layoutPrimitives.js";
+/* empty css                      */
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/layout/KapiCluster.tsx
+function n({ gap: n, justify: r, align: i, wrap: a, className: o, style: s, children: c, ...l }) {
+	return /* @__PURE__ */ t("div", {
+		...l,
+		...e({
+			gap: n,
+			justify: r,
+			align: i,
+			wrap: a,
+			className: o,
+			style: s
+		}),
+		children: c
+	});
+}
+//#endregion
+export { n as KapiCluster };

package/dist/components/layout/KapiContextSlot.d.ts

@@ -0,0 +1,45 @@
+import { type ReactNode } from "react";
+import "../navigation/navigation.css";
+import { type KapiPanelCollapsedMode } from "../navigation/panelMiniLogic";
+import { type KapiRootProps } from "../rootProps";
+import type { KapiLabelsOverride } from "../labelsLogic";
+/** `className`/`style`/`id` van al contenedor del panel (`.kapi-ctxslot`), no al backdrop móvil. */
+export type KapiContextSlotProps = KapiRootProps & {
+    /** Título del panel (cabecera). */
+    title: ReactNode;
+    /** Acciones extra en la cabecera, a la izquierda del botón de plegar. */
+    actions?: ReactNode;
+    /** Contenido del panel (usa KapiPanelItem, KapiPanelSection…). */
+    children?: ReactNode;
+    /** Estado controlado. Si se omite, el slot maneja su propio estado. */
+    open?: boolean;
+    /** Estado inicial no controlado. Por defecto: abierto en desktop, cerrado en móvil. */
+    defaultOpen?: boolean;
+    /** Se llama con el estado nuevo al plegar o desplegar. */
+    onOpenChange?: (open: boolean) => void;
+    /** Lado del contenido donde se ubica el panel. Por defecto "left". */
+    side?: "left" | "right";
+    /**
+     * Cómo queda plegado en desktop: `hidden` (default) lo oculta y deja el botón de reabrir; `mini` deja una tira
+     * de íconos (los `KapiPanelItem`, ítems de `KapiContextSections` y cabeceras de `KapiPanelGroup`) con tooltip
+     * y avisos. En móvil siempre es un drawer.
+     */
+    collapsedMode?: KapiPanelCollapsedMode | undefined;
+    /** Nombre accesible del `<aside>` del panel; gana sobre `labels.region`. */
+    "aria-label"?: string;
+    /** Textos de plegar/desplegar. */
+    labels?: KapiLabelsOverride<KapiContextSlotLabels> | undefined;
+};
+/**
+ * Panel contextual plegable (OPCIONAL en el shell). Desktop: colapsa su ancho con
+ * animación (258px ↔ 44px con botón de reabrir). Móvil: drawer superpuesto con backdrop.
+ * Funciona con o sin rail: no depende de él.
+ */
+/** `region` es el nombre del panel (sin `aria-label`). */
+export type KapiContextSlotLabels = {
+    collapse: string;
+    expand: string;
+    region: string;
+};
+export declare const DEFAULT_CONTEXT_SLOT_LABELS: KapiContextSlotLabels;
+export declare const KapiContextSlot: ({ title, actions, children, open, defaultOpen, onOpenChange, side, collapsedMode, "aria-label": ariaLabelProp, labels, className, style, id }: KapiContextSlotProps) => import("react").JSX.Element;

package/dist/components/layout/KapiContextSlot.js

@@ -0,0 +1,92 @@
+"use client";
+import { useLabels as e } from "../locale/KapiLocaleProvider.js";
+import { joinClasses as t } from "../rootProps.js";
+/* empty css                           */
+import { KapiPanelMiniContext as n } from "../navigation/panelMini.js";
+import { resolveMini as r } from "../navigation/panelMiniLogic.js";
+import { SHELL_MOBILE_QUERY as i, matchesQuery as a, useMediaQuery as o } from "../../hooks/useMediaQuery.js";
+import { openOnBreakpointCross as s } from "../../hooks/breakpointOpenLogic.js";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useCallback as d, useEffect as f, useMemo as p, useRef as m, useState as h } from "react";
+import { ChevronsLeft as g, ChevronsRight as _ } from "lucide-react";
+//#region src/components/layout/KapiContextSlot.tsx
+var v = {
+	collapse: "Plegar panel",
+	expand: "Desplegar panel",
+	region: "Panel contextual"
+}, y = ({ title: y, actions: b, children: x, open: S, defaultOpen: C, onOpenChange: w, side: T = "left", collapsedMode: E = "hidden", "aria-label": D, labels: O, className: k, style: A, id: j }) => {
+	let M = e("contextSlot", v, O), N = D ?? M.region, P = T === "right", F = P ? _ : g, I = P ? g : _, [L, R] = h(() => C ?? !a("(max-width: 768px)")), z = S ?? L, B = d((e) => {
+		S === void 0 && R(e), w?.(e);
+	}, [S, w]), V = o(i), H = m(V), U = m(V ? C ?? !0 : z);
+	f(() => {
+		let e = s(H.current, V, U.current);
+		H.current = V, e !== null && e !== z && B(e);
+	}, [
+		V,
+		z,
+		B
+	]), f(() => {
+		V || (U.current = z);
+	}, [V, z]);
+	let W = r({
+		collapsedMode: E,
+		open: z,
+		mobile: V
+	}), G = p(() => ({
+		mini: W,
+		expand: () => B(!0),
+		tooltipSide: P ? "left" : "right"
+	}), [
+		W,
+		B,
+		P
+	]);
+	return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ u("div", {
+		id: j,
+		className: t("kapi-ctxslot", P && "kapi-ctxslot--right", !z && "is-collapsed", W && "is-mini kapi-navmini", k),
+		style: A,
+		children: [/* @__PURE__ */ l("div", {
+			className: "kapi-ctxslot__inner",
+			children: /* @__PURE__ */ u("aside", {
+				className: "kapi-ctxpanel",
+				"aria-label": N,
+				children: [/* @__PURE__ */ u("div", {
+					className: "kapi-ctxpanel__head",
+					children: [/* @__PURE__ */ l("span", { children: y }), /* @__PURE__ */ u("div", {
+						className: "kapi-ctxpanel__actions",
+						children: [b, /* @__PURE__ */ l("button", {
+							type: "button",
+							className: "kapi-paneltoggle",
+							onClick: () => B(!1),
+							"aria-label": M.collapse,
+							children: /* @__PURE__ */ l(F, {
+								size: 16,
+								strokeWidth: 2,
+								"aria-hidden": "true"
+							})
+						})]
+					})]
+				}), /* @__PURE__ */ l(n.Provider, {
+					value: G,
+					children: x
+				})]
+			})
+		}), /* @__PURE__ */ l("button", {
+			type: "button",
+			className: "kapi-paneltoggle kapi-ctxslot__reopen",
+			onClick: () => B(!0),
+			"aria-label": M.expand,
+			children: /* @__PURE__ */ l(I, {
+				size: 16,
+				strokeWidth: 2,
+				"aria-hidden": "true"
+			})
+		})]
+	}), /* @__PURE__ */ l("div", {
+		className: "kapi-ctxslot__backdrop",
+		onClick: () => B(!1),
+		"aria-hidden": "true"
+	})] });
+};
+//#endregion
+export { v as DEFAULT_CONTEXT_SLOT_LABELS, y as KapiContextSlot };

package/dist/components/layout/KapiDivider.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import "./KapiDivider.css";
+export type KapiDividerOrientation = "horizontal" | "vertical";
+/** Atributos nativos (`id`, `style`, `data-*`…) van al separador. */
+export type KapiDividerProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Dirección de la línea; `vertical` separa elementos en una fila. */
+    orientation?: KapiDividerOrientation | undefined;
+    /** Texto centrado entre dos líneas (sólo horizontal). */
+    label?: ReactNode | undefined;
+    /** Clase del separador. */
+    className?: string | undefined;
+};
+/** Clases del divisor. Pura y exportada. */
+export declare const dividerClasses: ({ orientation, className }?: Pick<KapiDividerProps, "orientation" | "className">) => string;
+/** Separador horizontal (opcionalmente con texto) o vertical. */
+export declare function KapiDivider({ orientation, label, className, ...rest }: KapiDividerProps): import("react").JSX.Element;

package/dist/components/layout/KapiDivider.js

@@ -0,0 +1,41 @@
+"use client";
+import { joinClasses as e } from "../rootProps.js";
+/* empty css                */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/layout/KapiDivider.tsx
+var r = ({ orientation: e = "horizontal", className: t = "" } = {}) => [
+	"kapi-divider",
+	e === "vertical" && "kapi-divider--vertical",
+	t
+].filter(Boolean).join(" ");
+function i({ orientation: i = "horizontal", label: a, className: o, ...s }) {
+	return i === "horizontal" && a != null ? /* @__PURE__ */ n("div", {
+		...s,
+		role: "separator",
+		className: e("kapi-divider-labeled", o),
+		children: [
+			/* @__PURE__ */ t("span", {
+				className: "kapi-divider",
+				"aria-hidden": !0
+			}),
+			/* @__PURE__ */ t("span", {
+				className: "kapi-divider-labeled__text",
+				children: a
+			}),
+			/* @__PURE__ */ t("span", {
+				className: "kapi-divider",
+				"aria-hidden": !0
+			})
+		]
+	}) : /* @__PURE__ */ t("div", {
+		...s,
+		role: "separator",
+		"aria-orientation": i,
+		className: r({
+			orientation: i,
+			className: o
+		})
+	});
+}
+//#endregion
+export { i as KapiDivider, r as dividerClasses };