@kapiuara/ui 0.1.0 → 0.2.0

package/dist/components/data/KapiTableFilter.d.ts

@@ -11,6 +11,9 @@ export type KapiTableFilterLabels = {
     filterAll: string;
     /** Separador del contador "N de M". */
     of: string;
+    /** Nombre accesible de la región `role="search"`. Dos filtros en la misma página son
+     *  indistinguibles sin él; `aria-label` del consumidor lo pisa. */
+    region: string;
 };
 export declare const DEFAULT_TABLE_FILTER_LABELS: KapiTableFilterLabels;
 /** Atributos nativos (`id`, `style`, `data-*`…) van a la región `role="search"` (el rol es propio). */
@@ -45,4 +48,4 @@ export type KapiTableFilterProps = Omit<HTMLAttributes<HTMLDivElement>, "childre
  * lugar de la pantalla y conectarla al `filter`/`onFilterChange` de la tabla, o reemplazarla por una
  * UI propia. Con `debounce` el campo va adelante del valor emitido.
  */
-export declare function KapiTableFilter({ value, onChange, columns, count, debounce, label, size, labels, className, ...rest }: KapiTableFilterProps): import("react").JSX.Element;
+export declare function KapiTableFilter({ value, onChange, columns, count, debounce, label, size, labels, className, "aria-label": ariaLabel, ...rest }: KapiTableFilterProps): import("react").JSX.Element;

package/dist/components/data/KapiTableFilter.js

@@ -16,64 +16,66 @@ var g = {
 	filterPlaceholder: "Filtrar…",
 	filterColumn: "Columna del filtro",
 	filterAll: "Todas",
-	of: "de"
+	of: "de",
+	region: "Filtro de la tabla"
 }, _ = "\0all", v = (e, t) => e.text === t.text && e.column === t.column;
-function y({ value: y, onChange: b, columns: x, count: S, debounce: C = 0, label: w, size: T = "sm", labels: E, className: D, ...O }) {
-	let k = n("tableFilter", g, E), A = f(() => o(x), [x]), [j, M] = m(y), N = p(y), [P, F] = m(y);
-	v(P, y) || (F(y), v(N.current, y) || M(y));
-	let I = p(void 0);
-	u(() => () => clearTimeout(I.current), []);
-	let L = (e) => {
-		clearTimeout(I.current), N.current = e, b(e);
-	}, R = (e, t) => {
-		M(e), clearTimeout(I.current), !t && C > 0 ? I.current = setTimeout(() => L(e), C) : L(e);
-	}, z = d(), B = /* @__PURE__ */ l(t, {
+function y({ value: y, onChange: b, columns: x, count: S, debounce: C = 0, label: w, size: T = "sm", labels: E, className: D, "aria-label": O, ...k }) {
+	let A = n("tableFilter", g, E), j = f(() => o(x), [x]), [M, N] = m(y), P = p(y), [F, I] = m(y);
+	v(F, y) || (I(y), v(P.current, y) || N(y));
+	let L = p(void 0);
+	u(() => () => clearTimeout(L.current), []);
+	let R = (e) => {
+		clearTimeout(L.current), P.current = e, b(e);
+	}, z = (e, t) => {
+		N(e), clearTimeout(L.current), !t && C > 0 ? L.current = setTimeout(() => R(e), C) : R(e);
+	}, B = d(), V = /* @__PURE__ */ l(t, {
 		size: T,
 		className: "kapi-tablefilter__group",
 		children: [/* @__PURE__ */ c(i, {
-			id: `${z}-col`,
+			id: `${B}-col`,
 			searchable: !1,
-			"aria-label": k.filterColumn,
+			"aria-label": A.filterColumn,
 			className: "kapi-tablefilter__col",
 			options: [{
 				value: _,
-				label: k.filterAll
-			}, ...A],
-			value: j.column ?? _,
+				label: A.filterAll
+			}, ...j],
+			value: M.column ?? _,
 			onChange: (e) => {
-				e !== null && R({
-					...j,
+				e !== null && z({
+					...M,
 					column: e === _ ? null : e
 				}, !0);
 			}
 		}), /* @__PURE__ */ c(r, {
-			id: z,
+			id: B,
 			type: "search",
-			"aria-label": w == null ? k.filter : void 0,
-			placeholder: k.filterPlaceholder,
+			"aria-label": w == null ? A.filter : void 0,
+			placeholder: A.filterPlaceholder,
 			spellCheck: !1,
 			startIcon: /* @__PURE__ */ c(h, {}),
 			clearable: !0,
-			value: j.text,
-			onChange: (e) => R({
-				...j,
+			value: M.text,
+			onChange: (e) => z({
+				...M,
 				text: e.target.value
 			}, !1)
 		})]
 	});
 	return /* @__PURE__ */ l("div", {
-		...O,
+		...k,
 		className: a("kapi-tablefilter", D),
 		role: "search",
-		children: [w == null ? B : /* @__PURE__ */ c(e, {
+		"aria-label": O ?? A.region,
+		children: [w == null ? V : /* @__PURE__ */ c(e, {
 			label: w,
-			htmlFor: z,
+			htmlFor: B,
 			className: "kapi-tablefilter__field",
-			children: B
+			children: V
 		}), /* @__PURE__ */ c("span", {
 			className: "kapi-tablefilter__count",
 			"aria-live": "polite",
-			children: S && s(y) ? `${S.shown} ${k.of} ${S.total}` : ""
+			children: S && s(y) ? `${S.shown} ${A.of} ${S.total}` : ""
 		})]
 	});
 }

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

@@ -5,6 +5,9 @@ import type { KapiLabelsOverride } from "../labelsLogic";
 export type KapiFacetedSearchLabels = {
     /** Nombre accesible del campo. */
     input: string;
+    /** Nombre accesible de la región `role="search"`. Dos búsquedas en la misma página son
+     *  indistinguibles sin él; `aria-label` del consumidor lo pisa. */
+    region: string;
     placeholder: string;
     /** "Buscar “texto”" en el desplegable. */
     searchFor: string;
@@ -42,4 +45,4 @@ export type KapiFacetedSearchProps = Omit<HTMLAttributes<HTMLDivElement>, "child
  * Teclado: flechas y Enter en el desplegable, Backspace con el campo vacío suelta la faceta pendiente
  * y después el último chip, Escape cancela la faceta pendiente.
  */
-export declare function KapiFacetedSearch({ facets, chips, onText, onClearAll, labels, className, onMouseDown, ...rest }: KapiFacetedSearchProps): import("react").JSX.Element;
+export declare function KapiFacetedSearch({ facets, chips, onText, onClearAll, labels, className, onMouseDown, "aria-label": ariaLabel, ...rest }: KapiFacetedSearchProps): import("react").JSX.Element;

package/dist/components/inputs/KapiFacetedSearch.js

@@ -13,6 +13,7 @@ import { Search as y } from "lucide-react";
 //#region src/components/inputs/KapiFacetedSearch.tsx
 var b = {
 	input: "Buscar o filtrar",
+	region: "Búsqueda",
 	placeholder: "Buscar o filtrar…",
 	searchFor: "Buscar",
 	pickValue: "elegir valor…",
@@ -21,56 +22,57 @@ var b = {
 	valueOf: "Valor de",
 	clearAll: "Limpiar todo"
 };
-function x({ facets: x, chips: S, onText: C, onClearAll: w, labels: T, className: E, onMouseDown: D, ...O }) {
-	let k = e("facetedSearch", b, T), A = g(), j = `${A}-list`, M = _(null), N = _(null), P = _(null), [F, I] = v(""), [L, R] = v(null), [z, B] = v(!1), [V, H] = v(-1), U = s(x, L, F), W = l(L), G = z && !W, K = () => requestAnimationFrame(() => N.current?.focus()), q = () => {
-		I(""), R(null), H(-1);
-	}, J = () => {
-		q(), B(!1), K();
-	}, Y = (e) => {
-		e.type === "text" ? (C(e.text), J()) : e.type === "option" ? (L?.apply(e.option.value), J()) : e.facet.kind === "flag" ? (e.facet.apply("true"), J()) : (R(e.facet), I(""), H(-1), B(!0), l(e.facet) ? requestAnimationFrame(() => P.current?.focus()) : K());
+function x({ facets: x, chips: S, onText: C, onClearAll: w, labels: T, className: E, onMouseDown: D, "aria-label": O, ...k }) {
+	let A = e("facetedSearch", b, T), j = g(), M = `${j}-list`, N = _(null), P = _(null), F = _(null), [I, L] = v(""), [R, z] = v(null), [B, V] = v(!1), [H, U] = v(-1), W = s(x, R, I), G = l(R), K = B && !G, q = () => requestAnimationFrame(() => P.current?.focus()), J = () => {
+		L(""), z(null), U(-1);
+	}, Y = () => {
+		J(), V(!1), q();
 	}, X = (e) => {
+		e.type === "text" ? (C(e.text), Y()) : e.type === "option" ? (R?.apply(e.option.value), Y()) : e.facet.kind === "flag" ? (e.facet.apply("true"), Y()) : (z(e.facet), L(""), U(-1), V(!0), l(e.facet) ? requestAnimationFrame(() => F.current?.focus()) : q());
+	}, Z = (e) => {
 		let t = o(e.key, {
-			input: F,
-			pending: !!L,
-			active: V,
-			open: G,
+			input: I,
+			pending: !!R,
+			active: H,
+			open: K,
 			chips: S.length
 		});
 		if (t) switch (e.preventDefault(), t) {
 			case "next":
 			case "prev":
-				B(!0), H((e) => u(G ? e : -1, U.length, t === "next" ? 1 : -1));
+				V(!0), U((e) => u(K ? e : -1, W.length, t === "next" ? 1 : -1));
 				break;
 			case "select": {
-				let e = U[V];
-				e && Y(e);
+				let e = W[H];
+				e && X(e);
 				break;
 			}
 			case "text":
-				C(F.trim()), J();
+				C(I.trim()), Y();
 				break;
 			case "cancel":
-				q();
+				J();
 				break;
 			case "close":
-				B(!1), H(-1);
+				V(!1), U(-1);
 				break;
 			case "dropPending":
-				R(null), H(-1);
+				z(null), U(-1);
 				break;
 			case "removeLast": S[S.length - 1]?.onRemove();
 		}
-	}, Z = (e) => {
+	}, Q = (e) => {
 		let t = e.target.value === "";
-		(e.key === "Escape" || e.key === "Backspace" && t) && (e.preventDefault(), q(), K());
-	}, Q = (e) => `${A}-opt-${e}`;
+		(e.key === "Escape" || e.key === "Backspace" && t) && (e.preventDefault(), J(), q());
+	}, $ = (e) => `${j}-opt-${e}`;
 	return /* @__PURE__ */ h("div", {
-		...O,
-		ref: M,
+		...k,
+		ref: N,
 		className: t("kapi-facets", E),
 		role: "search",
+		"aria-label": O ?? A.region,
 		onMouseDown: (e) => {
-			D?.(e), !e.defaultPrevented && e.target === e.currentTarget && (e.preventDefault(), N.current?.focus(), B(!0));
+			D?.(e), !e.defaultPrevented && e.target === e.currentTarget && (e.preventDefault(), P.current?.focus(), V(!0));
 		},
 		children: [
 			/* @__PURE__ */ m(y, {
@@ -81,90 +83,90 @@ function x({ facets: x, chips: S, onText: C, onClearAll: w, labels: T, className
 			S.map((e) => /* @__PURE__ */ m(i, {
 				size: "sm",
 				onRemove: () => {
-					e.onRemove(), K();
+					e.onRemove(), q();
 				},
-				removeLabel: `${k.remove} ${e.label}`,
+				removeLabel: `${A.remove} ${e.label}`,
 				children: e.label
 			}, e.key)),
-			L && /* @__PURE__ */ h(i, {
+			R && /* @__PURE__ */ h(i, {
 				size: "sm",
 				tone: "primary",
 				className: "kapi-facets__pending",
-				children: [L.label, ":"]
+				children: [R.label, ":"]
 			}),
-			W && L ? /* @__PURE__ */ m("span", {
+			G && R ? /* @__PURE__ */ m("span", {
 				className: "kapi-facets__date",
-				onKeyDown: Z,
-				children: L.kind === "dateRange" ? /* @__PURE__ */ m(r, {
-					ref: P,
-					"aria-label": `${k.valueOf} ${L.label}`,
+				onKeyDown: Q,
+				children: R.kind === "dateRange" ? /* @__PURE__ */ m(r, {
+					ref: F,
+					"aria-label": `${A.valueOf} ${R.label}`,
 					onChange: ({ from: e, to: t }) => {
-						e && t && (L.apply(d(e, t)), J());
+						e && t && (R.apply(d(e, t)), Y());
 					}
 				}) : /* @__PURE__ */ m(n, {
-					ref: P,
-					"aria-label": `${k.valueOf} ${L.label}`,
+					ref: F,
+					"aria-label": `${A.valueOf} ${R.label}`,
 					onChange: (e) => {
-						e && (L.apply(f(e)), J());
+						e && (R.apply(f(e)), Y());
 					}
 				})
 			}) : /* @__PURE__ */ m("input", {
-				ref: N,
+				ref: P,
 				className: "kapi-facets__input",
 				type: "text",
 				role: "combobox",
 				autoComplete: "off",
-				"aria-label": k.input,
-				"aria-expanded": G,
-				"aria-controls": j,
+				"aria-label": A.input,
+				"aria-expanded": K,
+				"aria-controls": M,
 				"aria-autocomplete": "list",
-				"aria-activedescendant": G && V >= 0 ? Q(V) : void 0,
-				placeholder: S.length === 0 && !L ? k.placeholder : void 0,
-				value: F,
-				onFocus: () => B(!0),
-				onClick: () => B(!0),
+				"aria-activedescendant": K && H >= 0 ? $(H) : void 0,
+				placeholder: S.length === 0 && !R ? A.placeholder : void 0,
+				value: I,
+				onFocus: () => V(!0),
+				onClick: () => V(!0),
 				onBlur: (e) => {
 					let t = e.relatedTarget;
-					(!t || !M.current?.contains(t)) && B(!1);
+					(!t || !N.current?.contains(t)) && V(!1);
 				},
 				onChange: (e) => {
-					I(e.target.value), B(!0), H(-1);
+					L(e.target.value), V(!0), U(-1);
 				},
-				onKeyDown: X
+				onKeyDown: Z
 			}),
 			w && S.length > 0 && /* @__PURE__ */ m("button", {
 				type: "button",
 				className: "kapi-facets__clear",
 				onClick: () => {
-					w(), q(), K();
+					w(), J(), q();
 				},
-				children: k.clearAll
+				children: A.clearAll
 			}),
 			/* @__PURE__ */ h(a, {
-				open: G,
-				anchorRef: M,
-				onClose: () => B(!1),
+				open: K,
+				anchorRef: N,
+				onClose: () => V(!1),
 				matchAnchorWidth: !0,
 				role: "listbox",
-				id: j,
-				"aria-label": L ? L.label : k.input,
+				id: M,
+				"aria-label": R ? R.label : A.input,
 				closeOnEscape: !1,
 				restoreFocus: !1,
 				className: "kapi-facets__menu",
-				children: [U.length === 0 && /* @__PURE__ */ m("div", {
+				children: [W.length === 0 && /* @__PURE__ */ m("div", {
 					className: "kapi-facets__empty",
-					children: k.empty
-				}), U.map((e, t) => /* @__PURE__ */ m("div", {
-					id: Q(t),
+					children: A.empty
+				}), W.map((e, t) => /* @__PURE__ */ m("div", {
+					id: $(t),
 					role: "option",
-					"aria-selected": t === V,
+					"aria-selected": t === H,
 					"aria-label": e.type === "option" ? c(e.option) : void 0,
-					className: `kapi-facets__opt${t === V ? " kapi-facets__opt--active" : ""}`,
+					className: `kapi-facets__opt${t === H ? " kapi-facets__opt--active" : ""}`,
 					onMouseDown: (e) => e.preventDefault(),
-					onMouseEnter: () => H(t),
-					onClick: () => Y(e),
+					onMouseEnter: () => U(t),
+					onClick: () => X(e),
 					children: e.type === "text" ? /* @__PURE__ */ h("span", { children: [
-						k.searchFor,
+						A.searchFor,
 						" “",
 						e.text,
 						"”"
@@ -177,7 +179,7 @@ function x({ facets: x, chips: S, onText: C, onClearAll: w, labels: T, className
 						children: e.facet.label
 					}), e.facet.kind !== "flag" && /* @__PURE__ */ h("span", {
 						className: "kapi-facets__hint",
-						children: [" · ", k.pickValue]
+						children: [" · ", A.pickValue]
 					})] })
 				}, e.type === "facet" ? `f-${e.facet.key}` : e.type === "option" ? `o-${e.option.value}` : "t"))]
 			})

package/dist/components/layout/KapiShell.js

@@ -30,6 +30,7 @@ var l = ({ rail: l, panel: u, children: d, contextMenuItems: f, rightClick: p =
 				u,
 				/* @__PURE__ */ o("main", {
 					className: `kapi-content${g ? ` ${g}` : ""}`,
+					tabIndex: 0,
 					children: d
 				}),
 				m,