@kapiuara/ui 0.0.0-stage → 0.1.0

package/dist/components/inputs/KapiSelect.js

@@ -0,0 +1,443 @@
+"use client";
+import { assignRef as e, fieldControlProps as t, focusLeaves as n } from "./fieldLogic.js";
+import { useKapiField as r } from "./KapiField.js";
+import { resolveGroupSize as ee, selectControlId as te } from "./inputGroupLogic.js";
+import { useKapiInputGroup as ne } from "./KapiInputGroup.js";
+import { useLabels as re } from "../locale/KapiLocaleProvider.js";
+import { resolveKapiRoot as ie } from "../../hooks/kapiRoot.js";
+import { SELECT_MENU_PLACEMENT as ae, displayLabel as oe, filterOptions as se, findTypeaheadIndex as ce, flattenOptions as le, indexEntries as ue, initialActiveIndex as de, nextActiveIndex as i, normalizeValue as a, selectedOptions as fe, toggleValue as pe } from "./selectLogic.js";
+import { createLoadSequencer as me, isCreateRow as he, menuItems as ge, mergeKnownOptions as o, selectedFromKnown as _e, withCreated as ve } from "./asyncSelectLogic.js";
+/* empty css               */
+import { usePlacement as ye } from "../../hooks/usePlacement.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useCallback as l, useEffect as u, useId as be, useLayoutEffect as xe, useMemo as d, useRef as f, useState as p } from "react";
+import { Check as Se, ChevronDown as Ce, X as we } from "lucide-react";
+import { createPortal as Te } from "react-dom";
+//#region src/components/inputs/KapiSelect.tsx
+var Ee = 6, De = 500, Oe = [], ke = (e, t) => `${e} “${t.trim()}”`, Ae = ({ size: e = "md", open: t, disabled: n, multi: r, className: ee }) => [
+	"kapisel",
+	`kapisel--${e}`,
+	t && "kapisel--open",
+	n && "kapisel--disabled",
+	r && "kapisel--multi",
+	ee
+].filter(Boolean).join(" "), je = {
+	clear: "Limpiar selección",
+	remove: "Quitar",
+	placeholder: "Seleccionar…",
+	noOptions: "Sin opciones",
+	loading: "Cargando…",
+	loadError: "No se pudieron cargar las opciones",
+	createError: "No se pudo crear la opción",
+	create: "Crear"
+}, Me = (Me) => {
+	let { options: m = Oe, loadOptions: h, loadDelay: Ne = 300, onCreate: Pe, value: Fe, defaultValue: Ie, multiple: g = !1, searchable: _ = !0, clearable: Le = !1, disabled: v = !1, loading: Re = !1, placeholder: ze, size: Be, renderOption: Ve, noOptionsMessage: He, loadingMessage: Ue, name: We, id: Ge, className: Ke, style: qe, "aria-label": Je, labels: Ye, ref: y, onBlur: Xe } = Me, Ze = Me.onChange, b = re("select", je, Ye), Qe = ze ?? b.placeholder, $e = He ?? b.noOptions, et = Ue ?? b.loading, tt = ne(), nt = ee(Be, tt?.size) ?? "md", rt = r(), it = be(), x = te({
+		id: Ge,
+		fieldControlId: rt?.controlId,
+		autoId: it,
+		inGroup: tt !== null
+	}), at = `${x}-listbox`, ot = `${x}-value`, st = (e) => `${x}-opt-${e}`, ct = Fe !== void 0, [lt, ut] = p(() => a(Ie, g)), S = a(ct ? Fe : lt, g), C = d(() => a(S, !0), [S]), [w, T] = p(!1), [E, D] = p(""), [dt, O] = p(-1), k = f(null), A = f(null), ft = f(null), pt = l((t) => {
+		A.current = t, e(y, t);
+	}, [y]), mt = l((t) => {
+		ft.current = t, e(y, t);
+	}, [y]), j = f(null), ht = f({
+		buffer: "",
+		timer: void 0
+	}), M = h !== void 0, N = E.trim(), P = w && !v, F = M || Pe !== void 0, [gt, _t] = p(() => F ? o(/* @__PURE__ */ new Map(), m) : /* @__PURE__ */ new Map()), [vt, yt] = p(m);
+	F && vt !== m && (yt(m), _t((e) => o(e, m)));
+	let I = M && (N !== "" || m.length === 0), [L, bt] = p(null), [R] = p(me), z = L?.query === N, xt = I && P && !z, St = I && z && L.error, B = Re || xt, [Ct, wt] = p(!1), V = f(!1), [Tt, H] = p(!1), Et = B || Ct, U = d(() => F ? _e(gt, S) : fe(m, S), [
+		F,
+		gt,
+		m,
+		S
+	]), W = d(() => I ? z ? L.entries : [] : M ? m : _ ? se(m, E) : m, [
+		I,
+		z,
+		L,
+		M,
+		m,
+		_,
+		E
+	]), G = Pe !== void 0 && _ && !Re && !Ct, K = d(() => ge(W, E, G && !xt, ke(b.create, E)), [
+		W,
+		E,
+		G,
+		xt,
+		b.create
+	]), Dt = d(() => ue(W), [W]), q = K.length > 0 && he(K[K.length - 1]) ? K[K.length - 1] : null, J = dt >= 0 && dt < K.length ? dt : -1, Y = U.length > 0, Ot = _ && E !== "", kt = B ? et : Tt ? b.createError : St ? b.loadError : K.length === 0 ? $e : null, At = f(h), X = f({
+		current: S,
+		query: E,
+		createAllowed: G,
+		createPrefix: b.create
+	});
+	u(() => {
+		At.current = h, X.current = {
+			current: S,
+			query: E,
+			createAllowed: G,
+			createPrefix: b.create
+		};
+	}), u(() => {
+		if (!I || !P || z) return;
+		let e = setTimeout(() => {
+			let e = At.current;
+			if (!e) return;
+			let t = R.start(), n;
+			try {
+				n = e(N, { signal: t.signal });
+			} catch (e) {
+				n = Promise.reject(e);
+			}
+			n.then((e) => {
+				if (!t.isCurrent()) return;
+				_t((t) => o(t, e)), bt({
+					query: N,
+					entries: e,
+					error: !1
+				});
+				let { createAllowed: n, createPrefix: r } = X.current, ee = ge(e, N, n, ke(r, N));
+				O(i(-1, "first", ee));
+			}, () => {
+				t.isCurrent() && bt({
+					query: N,
+					entries: [],
+					error: !0
+				});
+			});
+		}, Ne);
+		return () => clearTimeout(e);
+	}, [
+		I,
+		P,
+		z,
+		N,
+		Ne,
+		R
+	]), u(() => (P || (R.cancel(), bt((e) => e?.error ? null : e), H(!1)), () => R.cancel()), [P, R]);
+	let jt = () => (_ ? A.current : ft.current)?.focus();
+	u(() => () => {
+		clearTimeout(ht.current.timer);
+	}, []), u(() => {
+		v && (T(!1), D(""));
+	}, [v]);
+	let Z = l((e) => {
+		ct || ut(e), Ze?.(e);
+	}, [ct, Ze]), Q = l(() => {
+		T(!1), D(""), O(-1);
+	}, []), $ = (e = "selected") => {
+		v || (T(!0), O(de(K, C, e)));
+	}, Mt = (e) => {
+		g ? (D(""), O(e === null ? -1 : de(le(m), [e], "selected")), A.current?.focus()) : Q();
+	}, Nt = (e) => {
+		if (V.current) return;
+		let t = (t) => {
+			t && (_t((e) => o(e, [t])), Z(ve(X.current.current, t.value, g))), X.current.query.trim() === e && Mt(t ? t.value : null);
+		};
+		H(!1);
+		let n = Pe?.(e);
+		if (!(n instanceof Promise)) {
+			t(n);
+			return;
+		}
+		V.current = !0, wt(!0);
+		let r = () => {
+			V.current = !1, wt(!1);
+		};
+		n.then((e) => {
+			r(), t(e);
+		}, (e) => {
+			r(), H(!0), console.error(e);
+		});
+	}, Pt = (e) => {
+		if (e.disabled) return;
+		if (he(e)) {
+			Nt(N);
+			return;
+		}
+		let t = pe(S, e.value, g);
+		!g && t === S ? Q() : (Z(t), Mt(e.value));
+	}, Ft = (e) => {
+		Z(C.filter((t) => t !== e));
+	}, It = () => {
+		Z(g ? [] : null), D(""), jt();
+	}, { placement: Lt, style: Rt, update: zt } = ye({
+		open: P,
+		anchor: k,
+		floatingRef: j,
+		...ae,
+		offset: Ee
+	});
+	xe(() => {
+		P && zt();
+	}, [
+		P,
+		K.length,
+		kt,
+		zt
+	]), u(() => {
+		if (!P) return;
+		let e = (e) => {
+			let t = e.target;
+			t && (k.current?.contains(t) || j.current?.contains(t)) || Q();
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [P, Q]), u(() => {
+		if (!P || J < 0) return;
+		let e = j.current?.querySelector(`[data-kapisel-index="${J}"]`);
+		e && typeof e.scrollIntoView == "function" && e.scrollIntoView({ block: "nearest" });
+	}, [P, J]);
+	let Bt = (e) => {
+		if (v) return;
+		let t = e.target;
+		j.current?.contains(t) || (t.closest("[data-kapisel-action]") ? e.preventDefault() : t === A.current ? w || $() : (e.preventDefault(), jt(), w ? Q() : $()));
+	}, Vt = (e) => {
+		D(e), T(!0), H(!1), O(M ? -1 : i(-1, "first", ge(se(m, e), e, G, ke(b.create, e))));
+	}, Ht = (e) => {
+		let t = ht.current;
+		clearTimeout(t.timer), t.buffer += e, t.timer = setTimeout(() => {
+			t.buffer = "";
+		}, De);
+		let n = ce(K, t.buffer, w ? J : K.findIndex((e) => C.includes(e.value)));
+		n < 0 || (w || T(!0), O(n));
+	}, Ut = (e) => {
+		if (!v) switch (e.key) {
+			case "ArrowDown":
+			case "ArrowUp":
+				if (e.preventDefault(), !w) {
+					$(e.key === "ArrowDown" ? "selected" : "last");
+					return;
+				}
+				O(i(J, e.key === "ArrowDown" ? "next" : "prev", K));
+				break;
+			case "Home":
+			case "End":
+				if (!w) break;
+				e.preventDefault(), O(i(J, e.key === "Home" ? "first" : "last", K));
+				break;
+			case "Enter":
+				if (w) {
+					e.preventDefault();
+					let t = J >= 0 ? K[J] : void 0;
+					t && Pt(t);
+				} else _ || (e.preventDefault(), $());
+				break;
+			case " ":
+				if (_) break;
+				if (e.preventDefault(), !w) $();
+				else {
+					let e = J >= 0 ? K[J] : void 0;
+					e && Pt(e);
+				}
+				break;
+			case "Escape":
+				w && (e.preventDefault(), e.stopPropagation(), Q());
+				break;
+			case "Tab":
+				w && Q();
+				break;
+			case "Backspace":
+				g && E === "" && C.length > 0 && (e.preventDefault(), Ft(C[C.length - 1]));
+				break;
+			default: !_ && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(), Ht(e.key));
+		}
+	}, Wt = (e) => {
+		n(e.relatedTarget, k.current, j.current) && (w && Q(), Xe?.(e));
+	}, Gt = P ? ie(k.current) : null, Kt = ({ option: e, index: t }) => {
+		let n = C.includes(e.value), r = t === J;
+		return /* @__PURE__ */ c("li", {
+			id: st(t),
+			role: "option",
+			"aria-selected": n,
+			"aria-disabled": e.disabled || void 0,
+			"data-kapisel-index": t,
+			className: [
+				"kapisel__opt",
+				r && "kapisel__opt--active",
+				n && "kapisel__opt--selected",
+				e === q && "kapisel__opt--create",
+				e.disabled && "kapisel__opt--disabled"
+			].filter(Boolean).join(" "),
+			onMouseMove: () => {
+				!e.disabled && !r && O(t);
+			},
+			onClick: () => Pt(e),
+			children: [/* @__PURE__ */ s("span", {
+				className: "kapisel__opt-body",
+				children: Ve && e !== q ? Ve(e) : e.label
+			}), n && /* @__PURE__ */ s(Se, {
+				className: "kapisel__check",
+				size: 15,
+				strokeWidth: 2.4,
+				"aria-hidden": "true"
+			})]
+		}, `${e.value}-${t}`);
+	}, qt = {
+		role: "combobox",
+		...t(rt, {
+			id: x,
+			describedBy: ot,
+			labelable: _,
+			ariaLabel: Je
+		}),
+		"aria-haspopup": "listbox",
+		"aria-expanded": P,
+		"aria-controls": P ? at : void 0,
+		"aria-activedescendant": P && J >= 0 ? st(J) : void 0,
+		"aria-label": Je,
+		"aria-disabled": v || void 0,
+		"aria-busy": Et || void 0
+	}, Jt = !Y && !Ot && /* @__PURE__ */ s("span", {
+		className: "kapisel__placeholder",
+		"aria-hidden": "true",
+		children: Qe
+	});
+	return /* @__PURE__ */ c("div", {
+		ref: k,
+		className: Ae({
+			size: nt,
+			open: P,
+			disabled: v,
+			multi: g,
+			className: Ke
+		}),
+		style: qe,
+		onMouseDown: Bt,
+		children: [
+			/* @__PURE__ */ c("div", {
+				className: "kapisel__values",
+				children: [g && U.map((e) => /* @__PURE__ */ c("span", {
+					className: "kapisel__chip",
+					children: [/* @__PURE__ */ s("span", {
+						className: "kapisel__chip-label",
+						children: e.label
+					}), /* @__PURE__ */ s("button", {
+						type: "button",
+						tabIndex: -1,
+						"data-kapisel-action": !0,
+						className: "kapisel__chip-x",
+						"aria-label": `${b.remove} ${e.label}`,
+						disabled: v,
+						onClick: () => Ft(e.value),
+						children: /* @__PURE__ */ s(we, {
+							size: 12,
+							strokeWidth: 2.6,
+							"aria-hidden": "true"
+						})
+					})]
+				}, e.value)), _ ? /* @__PURE__ */ c("div", {
+					className: "kapisel__inputwrap",
+					children: [
+						!g && Y && !Ot && /* @__PURE__ */ s("span", {
+							className: "kapisel__single",
+							"aria-hidden": "true",
+							children: U[0]?.label
+						}),
+						Jt,
+						/* @__PURE__ */ s("input", {
+							...qt,
+							ref: pt,
+							type: "text",
+							className: "kapisel__input",
+							autoComplete: "off",
+							"aria-autocomplete": "list",
+							disabled: v,
+							value: E,
+							onChange: (e) => Vt(e.target.value),
+							onKeyDown: Ut,
+							onBlur: Wt
+						})
+					]
+				}) : /* @__PURE__ */ c("div", {
+					...qt,
+					ref: mt,
+					className: "kapisel__combo",
+					tabIndex: v ? -1 : 0,
+					onKeyDown: Ut,
+					onBlur: Wt,
+					children: [!g && Y && /* @__PURE__ */ s("span", {
+						className: "kapisel__single",
+						"aria-hidden": "true",
+						children: U[0]?.label
+					}), Jt]
+				})]
+			}),
+			/* @__PURE__ */ s("span", {
+				id: ot,
+				className: "kapisel__sr",
+				children: oe(U, Qe)
+			}),
+			Et && /* @__PURE__ */ s("span", {
+				className: "kapisel__spinner kapi-spinner kapi-spinner--sm",
+				"aria-hidden": "true"
+			}),
+			Le && Y && !v && /* @__PURE__ */ s("button", {
+				type: "button",
+				tabIndex: -1,
+				"data-kapisel-action": !0,
+				className: "kapisel__clear",
+				"aria-label": b.clear,
+				onClick: It,
+				children: /* @__PURE__ */ s(we, {
+					size: 15,
+					strokeWidth: 2.4,
+					"aria-hidden": "true"
+				})
+			}),
+			/* @__PURE__ */ s("span", {
+				className: "kapisel__caret",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ s(Ce, {
+					size: 17,
+					strokeWidth: 2.2
+				})
+			}),
+			We && (g ? C.map((e) => /* @__PURE__ */ s("input", {
+				type: "hidden",
+				name: We,
+				value: e
+			}, e)) : /* @__PURE__ */ s("input", {
+				type: "hidden",
+				name: We,
+				value: S ?? ""
+			})),
+			Gt && Te(/* @__PURE__ */ c("div", {
+				ref: j,
+				className: `kapisel__menu kapisel__menu--${Lt?.side === "top" ? "top" : "bottom"}${tt ? " kapisel__menu--hug" : ""}`,
+				style: Rt,
+				onMouseDown: (e) => e.preventDefault(),
+				children: [/* @__PURE__ */ c("ul", {
+					id: at,
+					role: "listbox",
+					"aria-multiselectable": g || void 0,
+					"aria-label": Je,
+					className: "kapisel__list",
+					hidden: K.length === 0 || B,
+					children: [!B && Dt.map((e) => e.kind === "option" ? Kt(e.item) : /* @__PURE__ */ c("li", {
+						role: "presentation",
+						className: "kapisel__group",
+						children: [/* @__PURE__ */ s("div", {
+							className: "kapisel__group-label",
+							"aria-hidden": "true",
+							children: e.label
+						}), /* @__PURE__ */ s("ul", {
+							role: "group",
+							"aria-label": e.label,
+							className: "kapisel__group-list",
+							children: e.items.map(Kt)
+						})]
+					}, e.key)), q && Kt({
+						option: q,
+						index: K.length - 1
+					})]
+				}), kt && /* @__PURE__ */ s("div", {
+					className: "kapisel__status",
+					role: "status",
+					"aria-live": "polite",
+					children: kt
+				})]
+			}), Gt)
+		]
+	});
+};
+//#endregion
+export { je as DEFAULT_SELECT_LABELS, Me as KapiSelect, Ae as selectClasses };

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

@@ -0,0 +1,42 @@
+import { type InputHTMLAttributes, type ReactNode, type Ref } from "react";
+import "./inputsExtra.css";
+export type KapiSliderTone = "primary" | "success" | "warning" | "danger";
+export type KapiSliderProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step"> & {
+    /** Valor actual (controlado). */
+    value: number;
+    /** Se llama con el número nuevo al mover el control. */
+    onChange: (value: number) => void;
+    /** Mínimo del rango. */
+    min?: number;
+    /** Máximo del rango. */
+    max?: number;
+    /** Paso entre valores. */
+    step?: number;
+    /** Color of the filled track and the thumb. */
+    tone?: KapiSliderTone;
+    /** Label above the slider. */
+    label?: ReactNode;
+    /** Show the current value at the right of the label row. */
+    showValue?: boolean;
+    /** Format the shown value (e.g. `(v) => `${v}%``). */
+    formatValue?: (value: number) => string;
+    /** Marks the slider invalid (`aria-invalid`). Without it, taken from the wrapping `KapiField` (`status="err"`). */
+    invalid?: boolean;
+    /** Class of the wrapper. `className` goes to the `<input>`. */
+    wrapperClassName?: string;
+    /** Ref to the `<input type="range">`. */
+    ref?: Ref<HTMLInputElement>;
+};
+/** Wrapper classes. Pure and exported. */
+export declare const sliderClasses: ({ tone, disabled, className }?: {
+    tone?: KapiSliderTone | undefined;
+    disabled?: boolean | undefined;
+    className?: string | undefined;
+}) => string;
+/**
+ * Range slider of the design system. Controlled; emits a number already snapped to `step`.
+ * The filled track is driven by the `--kapi-slider-pct` custom property.
+ * `name` goes to the native range, so a native `<form>` submits the number. Inside a `KapiField`
+ * (and without its own `label`) it takes the field id, help, `aria-invalid` and `aria-required`.
+ */
+export declare const KapiSlider: ({ value, onChange, min, max, step, tone, label, showValue, formatValue, wrapperClassName, className, style: styleProp, disabled, id, ref, invalid, required, "aria-describedby": describedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, ...rest }: KapiSliderProps) => import("react").JSX.Element;

package/dist/components/inputs/KapiSlider.js

@@ -0,0 +1,70 @@
+"use client";
+import { nativeFieldProps as e } from "./fieldLogic.js";
+import { useKapiField as t } from "./KapiField.js";
+/* empty css                */
+import { clampToStep as n, percentOf as r } from "./sliderLogic.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useId as o } from "react";
+//#region src/components/inputs/KapiSlider.tsx
+var s = ({ tone: e = "primary", disabled: t = !1, className: n = "" } = {}) => [
+	"kapi-slider",
+	e !== "primary" && `kapi-slider--${e}`,
+	t && "kapi-slider--disabled",
+	n
+].filter(Boolean).join(" "), c = ({ value: c, onChange: l, min: u = 0, max: d = 100, step: f = 1, tone: p, label: m, showValue: h, formatValue: g, wrapperClassName: _, className: v, style: y, disabled: b, id: x, ref: S, invalid: C, required: w, "aria-describedby": T, "aria-invalid": E, "aria-required": D, ...O }) => {
+	let k = o(), A = t(), j = e(m == null ? A : null, {
+		id: x,
+		describedBy: T,
+		invalid: C,
+		required: w,
+		ariaInvalid: E,
+		ariaRequired: D
+	}), M = j.id ?? k, N = n(c, {
+		min: u,
+		max: d,
+		step: f
+	}), P = { "--kapi-slider-pct": `${r(N, u, d)}%` }, F = m != null || h, I = g ? g(N) : void 0;
+	return /* @__PURE__ */ a("div", {
+		className: s({
+			tone: p,
+			disabled: b,
+			className: _
+		}),
+		children: [F && /* @__PURE__ */ a("div", {
+			className: "kapi-slider__head",
+			children: [m != null && /* @__PURE__ */ i("label", {
+				htmlFor: M,
+				children: m
+			}), h && /* @__PURE__ */ i("output", {
+				htmlFor: M,
+				className: "kapi-slider__value",
+				children: I ?? N
+			})]
+		}), /* @__PURE__ */ i("input", {
+			...O,
+			...j,
+			ref: S,
+			id: M,
+			required: w,
+			type: "range",
+			className: ["kapi-slider__input", v].filter(Boolean).join(" "),
+			min: u,
+			max: d,
+			step: f,
+			value: N,
+			"aria-valuetext": I,
+			disabled: b,
+			style: {
+				...y,
+				...P
+			},
+			onChange: (e) => l(n(Number(e.target.value), {
+				min: u,
+				max: d,
+				step: f
+			}))
+		})]
+	});
+};
+//#endregion
+export { c as KapiSlider, s as sliderClasses };

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

@@ -0,0 +1,13 @@
+import type { InputHTMLAttributes, Ref } from "react";
+export type KapiSwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "children"> & {
+    /** Marca el control como inválido (`aria-invalid`). Sin la prop, lo toma del `KapiField` (`status="err"`). */
+    invalid?: boolean;
+    /** Ref al `<input>`. */
+    ref?: Ref<HTMLInputElement>;
+};
+/**
+ * Interruptor (`.kapi-switch`). Pasa `aria-label` (no tiene texto propio) o envuélvelo en un `KapiField`,
+ * que le da id (lo nombra su label), ayuda, `aria-invalid` y `aria-required`.
+ * Props nativas al `<input role="switch">`; `className` a la etiqueta contenedora.
+ */
+export declare const KapiSwitch: ({ className, ref, invalid, id, required, "aria-describedby": describedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, ...rest }: KapiSwitchProps) => import("react").JSX.Element;

package/dist/components/inputs/KapiSwitch.js

@@ -0,0 +1,28 @@
+"use client";
+import { nativeFieldProps as e } from "./fieldLogic.js";
+import { useKapiField as t } from "./KapiField.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/inputs/KapiSwitch.tsx
+var i = ({ className: i, ref: a, invalid: o, id: s, required: c, "aria-describedby": l, "aria-invalid": u, "aria-required": d, ...f }) => {
+	let p = e(t(), {
+		id: s,
+		describedBy: l,
+		invalid: o,
+		required: c,
+		ariaInvalid: u,
+		ariaRequired: d
+	});
+	return /* @__PURE__ */ r("label", {
+		className: ["kapi-switch", i].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ n("input", {
+			ref: a,
+			type: "checkbox",
+			role: "switch",
+			...f,
+			...p,
+			required: c
+		}), /* @__PURE__ */ n("span", { className: "kapi-switch__track" })]
+	});
+};
+//#endregion
+export { i as KapiSwitch };

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

@@ -0,0 +1,79 @@
+import { type FocusEvent, type HTMLAttributes, type Ref } from "react";
+import "./KapiTagInput.css";
+import type { KapiLabelsOverride } from "../labelsLogic";
+export type KapiTagInputSize = "sm" | "md" | "lg";
+export type KapiTagInputLabels = {
+    /** Prefijo del botón × de cada etiqueta ("Quitar ana@x.com"). */
+    remove: string;
+    /** Mensaje al repetir una etiqueta (va seguido de la etiqueta). */
+    duplicate: string;
+    /** Mensaje al llegar a `maxTags` (va seguido del tope). */
+    max: string;
+};
+export declare const DEFAULT_TAG_INPUT_LABELS: KapiTagInputLabels;
+/** Lo que va al `<input>` de texto y no al contenedor. */
+type InputOwnedKeys = "id" | "aria-label" | "aria-labelledby" | "aria-describedby";
+/**
+ * Atributos nativos (`className`, `style`, `data-*`…) van al contenedor; `id` y los `aria-*` de nombre y
+ * descripción van al `<input>` de texto (el enfocable, el que nombra el `KapiField`).
+ */
+export type KapiTagInputProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "onBlur" | "defaultValue" | InputOwnedKeys> & {
+    /** Controlado: etiquetas actuales. */
+    value?: string[];
+    /** Etiquetas iniciales cuando no es controlado. */
+    defaultValue?: string[];
+    /** Nueva lista de etiquetas. */
+    onChange?: (values: string[]) => void;
+    /**
+     * Mensaje de error si el texto no sirve como etiqueta; `null` si sirve. Sólo un mensaje no vacío rechaza
+     * (`""` cuenta como válido). Una inválida no se agrega.
+     */
+    validate?: (tag: string) => string | null;
+    /** Tope de etiquetas. */
+    maxTags?: number;
+    /** Deja repetir etiquetas. Default `false`. */
+    allowDuplicates?: boolean;
+    /** Al comparar duplicados, distingue mayúsculas. Default `false`. */
+    caseSensitive?: boolean;
+    /** Texto de ejemplo; se oculta cuando ya hay etiquetas. */
+    placeholder?: string;
+    /** Deshabilita el control entero (texto y etiquetas). */
+    disabled?: boolean;
+    /** Escala compartida con inputs y selects. Default `md`. */
+    size?: KapiTagInputSize;
+    /** Con `name`, cada etiqueta viaja en el form como un `<input type="hidden">` con ese nombre. */
+    name?: string;
+    /** `id` del `<input>` de texto. */
+    id?: string;
+    /** Marca el control inválido (`aria-invalid`). Sin la prop, lo toma del `KapiField`. */
+    invalid?: boolean;
+    /** Marca el control obligatorio (`aria-required`). Sin la prop, lo toma del `KapiField`. */
+    required?: boolean;
+    /** Nombre accesible del `<input>` de texto. */
+    "aria-label"?: string;
+    /** `id` del elemento que nombra al `<input>` de texto. */
+    "aria-labelledby"?: string;
+    /** `id` del elemento que describe al `<input>` de texto (se suma al del mensaje de error propio). */
+    "aria-describedby"?: string;
+    /** Se dispara cuando el foco sale de todo el control (ir del texto a un × no cuenta). */
+    onBlur?: (event: FocusEvent<HTMLElement>) => void;
+    /** Ref al `<input>` de texto. */
+    ref?: Ref<HTMLInputElement>;
+    /** Textos fijos (clave `tagInput`). */
+    labels?: KapiLabelsOverride<KapiTagInputLabels> | undefined;
+};
+/** Clases del contenedor. Pura y exportada para testear. */
+export declare const tagInputClasses: ({ size, invalid, disabled, className }: {
+    size?: KapiTagInputSize | undefined;
+    invalid?: boolean | undefined;
+    disabled?: boolean | undefined;
+    className?: string | undefined;
+}) => string;
+/**
+ * Campo de varios valores de texto (correos, códigos): cada valor queda como una etiqueta. Se confirma con
+ * Enter, coma, pegando una lista (separada por comas o renglones) o al salir del control; Retroceso con el
+ * texto vacío quita la última. `validate`, `maxTags` y los duplicados rechazan con un mensaje y dejan el
+ * texto para corregirlo.
+ */
+export declare function KapiTagInput({ value, defaultValue, onChange, validate, maxTags, allowDuplicates, caseSensitive, placeholder, disabled, size, name, id, invalid, required, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onBlur, ref, labels, className, onClick, ...rest }: KapiTagInputProps): import("react").JSX.Element;
+export {};