@kapiuara/ui 0.0.0-stage → 0.1.1

package/dist/components/inputs/KapiButton.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsxs as e } from "react/jsx-runtime";
+//#region src/components/inputs/KapiButton.tsx
+var t = ({ variant: e = "default", size: t = "md", iconOnly: n = !1, bordered: r = !1, className: i = "" } = {}) => [
+	"kapi-btn",
+	e !== "default" && `kapi-btn--${e}`,
+	t !== "md" && `kapi-btn--${t}`,
+	n && "kapi-btn--iconbtn",
+	r && "kapi-btn--bordered",
+	i
+].filter(Boolean).join(" "), n = ({ variant: n = "default", size: r = "md", iconOnly: i = !1, bordered: a = !1, icon: o, className: s, type: c = "button", children: l, ref: u, ...d }) => /* @__PURE__ */ e("button", {
+	ref: u,
+	type: c,
+	className: t({
+		variant: n,
+		size: r,
+		iconOnly: i,
+		bordered: a,
+		className: s
+	}),
+	...d,
+	children: [o, l]
+});
+//#endregion
+export { n as KapiButton, t as buttonClasses };

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

@@ -0,0 +1,35 @@
+import { type HTMLAttributes, type Ref } from "react";
+import { type KapiCalendarLabels } from "./datePickerLogic";
+import type { KapiLabelsOverride } from "../labelsLogic";
+type OwnProps = {
+    /** Día elegido (controlado). `null` = sin elegir. */
+    value?: Date | null;
+    /** Día elegido inicial, sin controlar. @default null */
+    defaultValue?: Date | null;
+    /** Avisa el día elegido. */
+    onChange?: ((date: Date) => void) | undefined;
+    /** Mes visible, cualquier día del mes (controlado). */
+    month?: Date;
+    /** Mes visible inicial, sin controlar. @default el mes del valor, o el actual */
+    defaultMonth?: Date;
+    /** Avisa el cambio de mes visible (flechas de la cabecera o teclado fuera del mes). */
+    onMonthChange?: ((month: Date) => void) | undefined;
+    /** Textos propios; pisan los del `KapiLocaleProvider` y los defaults. */
+    labels?: KapiLabelsOverride<KapiCalendarLabels> | undefined;
+    /** Ref al contenedor del calendario. */
+    ref?: Ref<HTMLDivElement>;
+};
+export type KapiCalendarProps = Omit<HTMLAttributes<HTMLDivElement>, keyof OwnProps> & OwnProps;
+/**
+ * Calendario de un mes, siempre visible. Es el mismo motor que usa `KapiDatePicker` en su popup
+ * (`KapiCalendarGrid`: `role="grid"`, roving tabindex, flechas, Home/End, PageUp/PageDown), pero
+ * suelto: sirve para una agenda o una vista de mes, donde no hay campo que abrir.
+ *
+ * Si lo que necesitás es elegir una fecha dentro de un formulario, usá `KapiDatePicker`.
+ *
+ * Las clases del chrome son `kapi-dp__*` porque son las del calendario compartido: la grilla ya
+ * emite las de los días, así que renombrarlas es un trabajo aparte sobre los tres componentes.
+ * Para estilar desde afuera está `.kapi-cal` en la raíz.
+ */
+export declare const KapiCalendar: ({ value, defaultValue, onChange, month, defaultMonth, onMonthChange, labels, className, ref, ...rest }: KapiCalendarProps) => import("react").JSX.Element;
+export {};

package/dist/components/inputs/KapiCalendar.js

@@ -0,0 +1,60 @@
+"use client";
+import { useKapiLocale as e, useLabels as t } from "../locale/KapiLocaleProvider.js";
+import { localizedCalendarLabels as n, monthTitle as r, sameDay as i } from "./datePickerLogic.js";
+import { KapiCalendarGrid as a } from "./KapiCalendarGrid.js";
+import { joinClasses as o } from "../rootProps.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useState as l } from "react";
+import { ChevronLeft as u, ChevronRight as d } from "lucide-react";
+//#region src/components/inputs/KapiCalendar.tsx
+var f = ({ value: f, defaultValue: p = null, onChange: m, month: h, defaultMonth: g, onMonthChange: _, labels: v, className: y, ref: b, ...x }) => {
+	let S = e(), C = t("calendar", n(S), v), [w, T] = l(p), E = f === void 0 ? w : f, [D, O] = l(() => g ?? E ?? /* @__PURE__ */ new Date()), k = h ?? D, A = (e) => {
+		h === void 0 && O(e), _?.(e);
+	}, j = (e) => A(new Date(k.getFullYear(), k.getMonth() + e, 1)), M = (e) => {
+		f === void 0 && T(e), m?.(e);
+	};
+	return /* @__PURE__ */ c("div", {
+		...x,
+		ref: b,
+		className: o("kapi-cal", "kapi-dp__cal", y),
+		children: [/* @__PURE__ */ c("div", {
+			className: "kapi-dp__head",
+			children: [
+				/* @__PURE__ */ s("button", {
+					type: "button",
+					className: "kapi-dp__nav",
+					"aria-label": C.prevMonth,
+					onClick: () => j(-1),
+					children: /* @__PURE__ */ s(u, {
+						size: 15,
+						strokeWidth: 2.2
+					})
+				}),
+				/* @__PURE__ */ s("span", {
+					className: "kapi-dp__title",
+					children: r(k, C.months)
+				}),
+				/* @__PURE__ */ s("button", {
+					type: "button",
+					className: "kapi-dp__nav",
+					"aria-label": C.nextMonth,
+					onClick: () => j(1),
+					children: /* @__PURE__ */ s(d, {
+						size: 15,
+						strokeWidth: 2.2
+					})
+				})
+			]
+		}), /* @__PURE__ */ s(a, {
+			view: k,
+			onViewChange: A,
+			labels: C,
+			focusTarget: E,
+			isSelected: (e) => i(e, E),
+			dayClassName: (e) => i(e, E) && "kapi-dp__day--sel",
+			onPick: M
+		})]
+	});
+};
+//#endregion
+export { f as KapiCalendar };

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

@@ -0,0 +1,29 @@
+import { type KapiCalendarLabels } from "./datePickerLogic";
+export type KapiCalendarGridProps = {
+    /** Mes visible (cualquier día del mes). */
+    view: Date;
+    /** Pide cambiar el mes visible (al navegar con teclado fuera de sus bordes). */
+    onViewChange: (view: Date) => void;
+    labels: KapiCalendarLabels;
+    /** Día que recibe el foco al entrar (el elegido); si no hay o no está en el mes, hoy o el 1°. */
+    focusTarget?: Date | null;
+    /**
+     * Pedido de foco a la grilla: cada valor nuevo > 0 enfoca el día activo (apertura con el botón o
+     * con Flecha abajo desde el campo). 0 = no enfocar (apertura por foco en el campo).
+     */
+    focusRequest?: number;
+    /** `aria-selected` de cada día. */
+    isSelected: (date: Date) => boolean;
+    /** Clases extra de cada día (selección, tramo del rango…). */
+    dayClassName?: (date: Date) => string | false | null | undefined;
+    onPick: (date: Date) => void;
+    /** Hover/foco sobre un día (`null` al salir de la grilla): previsualización del rango. */
+    onDayHover?: (date: Date | null) => void;
+};
+/**
+ * Grilla de días compartida por `KapiDatePicker` y `KapiDateRangePicker` (patrón WAI-ARIA date picker
+ * dialog): `role="grid"` nombrada por el mes, filas por semana, encabezados con el nombre completo del
+ * día y cada día como `gridcell` con la fecha completa, `aria-selected` y `aria-current="date"` en hoy.
+ * Roving tabindex + flechas, Home/End, PageUp/PageDown (Shift: año); Enter/Espacio eligen (botón nativo).
+ */
+export declare const KapiCalendarGrid: ({ view, onViewChange, labels, focusTarget, focusRequest, isSelected, dayClassName, onPick, onDayHover }: KapiCalendarGridProps) => import("react").JSX.Element;

package/dist/components/inputs/KapiCalendarGrid.js

@@ -0,0 +1,65 @@
+"use client";
+import { useKapiLocale as e } from "../locale/KapiLocaleProvider.js";
+import { buildDays as t, calendarDayLabel as n, calendarRows as r, monthTitle as i, moveCalendarFocus as a, sameDay as o, sameMonth as s } from "./datePickerLogic.js";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useEffect as u, useRef as d, useState as f } from "react";
+//#region src/components/inputs/KapiCalendarGrid.tsx
+var p = ({ view: p, onViewChange: m, labels: h, focusTarget: g, focusRequest: _ = 0, isSelected: v, dayClassName: y, onPick: b, onDayHover: x }) => {
+	let S = e(), C = /* @__PURE__ */ new Date(), w = d(null), [T, E] = f(null), D = d(!1), O = [
+		T,
+		g,
+		C
+	].find((e) => !!e && s(e, p)) ?? new Date(p.getFullYear(), p.getMonth(), 1);
+	u(() => {
+		_ > 0 && (D.current = !0);
+	}, [_]), u(() => {
+		D.current && (D.current = !1, w.current?.querySelector("[role=\"gridcell\"][tabindex=\"0\"]")?.focus());
+	});
+	let k = (e) => {
+		let t = a(O, e);
+		t && (e.preventDefault(), E(t), s(t, p) || m(new Date(t.getFullYear(), t.getMonth(), 1)), D.current = !0);
+	}, A = r(t(p.getFullYear(), p.getMonth()));
+	return /* @__PURE__ */ l("div", {
+		ref: w,
+		className: "kapi-dp__grid",
+		role: "grid",
+		"aria-label": i(p, h.months),
+		onKeyDown: k,
+		onMouseLeave: x ? () => x(null) : void 0,
+		children: [/* @__PURE__ */ c("div", {
+			role: "row",
+			className: "kapi-dp__row",
+			children: h.weekdays.map((e, t) => /* @__PURE__ */ c("div", {
+				role: "columnheader",
+				className: "kapi-dp__wd",
+				"aria-label": h.weekdayNames[t],
+				children: e
+			}, t))
+		}), A.map((e) => /* @__PURE__ */ c("div", {
+			role: "row",
+			className: "kapi-dp__row",
+			children: e.map((e) => /* @__PURE__ */ c("button", {
+				type: "button",
+				role: "gridcell",
+				tabIndex: o(e.date, O) ? 0 : -1,
+				"aria-label": n(e.date, h, S),
+				"aria-selected": v(e.date),
+				"aria-current": o(e.date, C) ? "date" : void 0,
+				className: [
+					"kapi-dp__day",
+					e.out && "kapi-dp__day--out",
+					o(e.date, C) && "kapi-dp__day--today",
+					y?.(e.date)
+				].filter(Boolean).join(" "),
+				onMouseEnter: x ? () => x(e.date) : void 0,
+				onFocus: () => {
+					E(e.date), x?.(e.date);
+				},
+				onClick: () => b(e.date),
+				children: e.day
+			}, e.date.getTime()))
+		}, e[0].date.getTime()))]
+	});
+};
+//#endregion
+export { p as KapiCalendarGrid };

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

@@ -0,0 +1,28 @@
+import type { InputHTMLAttributes, ReactNode, Ref } from "react";
+import "./inputsExtra.css";
+export type KapiCheckCardType = "checkbox" | "radio";
+export type KapiCheckCardProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "children" | "title"> & {
+    /** Título de la tarjeta. */
+    label: ReactNode;
+    /** Subtítulo / detalle. */
+    description?: ReactNode;
+    /** Estado marcado. Controla también el resaltado de la tarjeta, por eso es obligatorio. */
+    checked: boolean;
+    /**
+     * `checkbox` (por defecto) alterna; `radio` elige una de varias: las tarjetas con el mismo `name`
+     * forman un grupo nativo (flechas, un solo tab stop) y cada una lleva su `value`.
+     */
+    type?: KapiCheckCardType | undefined;
+    /** Marca el control como inválido (`aria-invalid`). Sin la prop, lo toma del `KapiField` (`status="err"`). */
+    invalid?: boolean | undefined;
+    /** Ref al `<input>`. */
+    ref?: Ref<HTMLInputElement>;
+};
+/** Clases de la tarjeta. Pura y exportada para testear. */
+export declare const checkCardClasses: (checked: boolean, className?: string, type?: KapiCheckCardType) => string;
+/**
+ * Selección tipo caja (`.kapi-checkcard`): checkbox o radio dentro de una tarjeta clickeable. Controlado.
+ * Dentro de un `KapiField` toma ayuda (`aria-describedby`), `aria-invalid` y `aria-required`, pero no el id:
+ * cada tarjeta se nombra con su propio título y detalle (un grupo comparte el campo).
+ */
+export declare const KapiCheckCard: ({ label, description, checked, type, invalid, className, ref, id, required, "aria-describedby": describedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, ...rest }: KapiCheckCardProps) => import("react").JSX.Element;

package/dist/components/inputs/KapiCheckCard.js

@@ -0,0 +1,41 @@
+"use client";
+import { nativeFieldProps as e } from "./fieldLogic.js";
+import { useKapiField as t } from "./KapiField.js";
+/* empty css                */
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/inputs/KapiCheckCard.tsx
+var i = (e, t = "", n = "checkbox") => [
+	"kapi-checkcard",
+	n === "radio" && "kapi-checkcard--radio",
+	e && "kapi-checkcard--on",
+	t
+].filter(Boolean).join(" "), a = ({ label: a, description: o, checked: s, type: c = "checkbox", invalid: l, className: u, ref: d, id: f, required: p, "aria-describedby": m, "aria-invalid": h, "aria-required": g, ..._ }) => {
+	let v = e(t(), {
+		id: f,
+		describedBy: m,
+		invalid: l,
+		required: p,
+		ariaInvalid: h,
+		ariaRequired: g,
+		takeId: !1
+	});
+	return /* @__PURE__ */ r("label", {
+		className: i(s, u, c),
+		children: [/* @__PURE__ */ n("input", {
+			ref: d,
+			type: c,
+			checked: s,
+			..._,
+			...v,
+			required: p
+		}), /* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("div", {
+			className: "kapi-checkcard__t",
+			children: a
+		}), o != null && /* @__PURE__ */ n("div", {
+			className: "kapi-checkcard__s",
+			children: o
+		})] })]
+	});
+};
+//#endregion
+export { a as KapiCheckCard, i as checkCardClasses };

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

@@ -0,0 +1,7 @@
+import { type KapiCheckControlProps } from "./checkControl";
+export type KapiCheckboxProps = KapiCheckControlProps;
+/** Checkbox (`.kapi-check`). Todas las props nativas van al `<input>`; `className` a la etiqueta. */
+export declare const KapiCheckbox: {
+    ({ label, className, ref, invalid, id, required, "aria-describedby": describedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, ...rest }: KapiCheckControlProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/inputs/KapiCheckbox.js

@@ -0,0 +1,5 @@
+import { createCheckControl as e } from "./checkControl.js";
+//#region src/components/inputs/KapiCheckbox.tsx
+var t = e("checkbox", "KapiCheckbox");
+//#endregion
+export { t as KapiCheckbox };

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

@@ -0,0 +1,46 @@
+import { type CSSProperties, type FocusEvent, type Ref } from "react";
+import { type KapiDatePickerMode, type KapiCalendarLabels } from "./datePickerLogic";
+import "./KapiDatePicker.css";
+import type { KapiLabelsOverride } from "../labelsLogic";
+export type { KapiDatePickerMode };
+export type KapiDatePickerProps = {
+    /** Qué se elige: sólo fecha, sólo hora, o ambas. */
+    mode?: KapiDatePickerMode;
+    /** Valor actual. Se re-sincroniza cada vez que cambia (componente controlado). */
+    value?: Date | null;
+    /** Se llama al elegir, tipear (al salir del campo) o borrar. `null` = vacío. */
+    onChange?: (value: Date | null) => void;
+    /** Texto de ejemplo del campo; por defecto depende de `mode` (`dd/mm/aaaa`, `hh:mm`…). */
+    placeholder?: string;
+    /** Deshabilita el campo y el botón del calendario. */
+    disabled?: boolean;
+    /** `id` del campo de texto (para asociarlo a un `<label>`). */
+    id?: string;
+    /**
+     * Nombre para formularios nativos: un `<input type="hidden">` con el valor como lo serializa el input
+     * nativo (`yyyy-mm-dd`, `hh:mm` o `yyyy-mm-ddThh:mm` según `mode`; vacío sin fecha). El campo de texto no lleva `name`.
+     */
+    name?: string;
+    /** Clase del envoltorio (campo + calendario). */
+    className?: string;
+    /** Estilo del envoltorio; `id` es el del campo de texto. */
+    style?: CSSProperties;
+    /** Nombre accesible del campo de texto cuando no hay `<label>` visible. */
+    "aria-label"?: string;
+    /** Textos del calendario (meses, días, botones). */
+    labels?: KapiLabelsOverride<KapiCalendarLabels> | undefined;
+    /** Paso de la columna de minutos (`15` → 00, 15, 30, 45). Tipear sigue aceptando cualquier minuto. @default 1 */
+    minuteStep?: number;
+    /** Ref al `<input>` de texto. */
+    ref?: Ref<HTMLInputElement>;
+    /** Se dispara cuando el foco sale del control (pasar al calendario o al botón no cuenta). */
+    onBlur?: (event: FocusEvent<HTMLDivElement>) => void;
+};
+/**
+ * Date picker propio (sin librería): calendario + hora, dark-aware.
+ * Se puede ELEGIR con el picker o TIPEAR (máscara dd/mm/aaaa, hh:mm; se parsea al salir del campo).
+ * Controlado: si `value` cambia desde afuera, el texto, la selección y el mes visible se sincronizan.
+ * Teclado: abrir con el botón (o Flecha abajo en el campo) enfoca el día elegido (u hoy) en la grilla;
+ * Escape cierra y devuelve el foco al campo.
+ */
+export declare const KapiDatePicker: ({ mode, value, onChange, placeholder, disabled, id, name, className, style, "aria-label": ariaLabel, labels, minuteStep, ref, onBlur: onBlurProp }: KapiDatePickerProps) => import("react").JSX.Element;

package/dist/components/inputs/KapiDatePicker.js

@@ -0,0 +1,189 @@
+"use client";
+import { assignRef as e, fieldControlProps as t, focusLeaves as n } from "./fieldLogic.js";
+import { useKapiField as r } from "./KapiField.js";
+import { useKapiLocale as i, useLabels as a } from "../locale/KapiLocaleProvider.js";
+import { formDateValue as o, formatValue as s, hasCalendar as ee, hasTime as te, localizedCalendarLabels as ne, maskInput as re, minuteOptions as ie, monthTitle as c, pad as l, parseText as u, sameDay as d } from "./datePickerLogic.js";
+import { KapiCalendarGrid as f } from "./KapiCalendarGrid.js";
+import { useCalendarFocus as p } from "./useCalendarFocus.js";
+import { useDatePopSide as m } from "./useDatePopSide.js";
+/* empty css                   */
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { useEffect as ae, useRef as _, useState as v } from "react";
+import { Calendar as oe, ChevronLeft as se, ChevronRight as ce, Clock as le } from "lucide-react";
+//#region src/components/inputs/KapiDatePicker.tsx
+var ue = {
+	date: "dd/mm/aaaa",
+	time: "hh:mm",
+	datetime: "dd/mm/aaaa hh:mm"
+}, de = Array.from({ length: 24 }, (e, t) => t), y = ({ mode: y = "date", value: b = null, onChange: fe, placeholder: pe, disabled: x = !1, id: me, name: S, className: C, style: w, "aria-label": T, labels: E, minuteStep: D = 1, ref: O, onBlur: k }) => {
+	let A = i(), j = a("calendar", ne(A), E), M = r(), N = ee(y), P = te(y), [F, I] = v(!1), [L, R] = v(b), [z, B] = v(() => s(b, y)), [V, H] = v(() => b ?? /* @__PURE__ */ new Date()), U = _(null), W = _(null), G = _(null), { inputRef: he, focusRequest: ge, openFromKeyboard: K, openFromFocus: _e, returnFocus: q } = p(I), J = b ? b.getTime() : null, [ve, ye] = v(J), [be, Y] = v(y);
+	(ve !== J || be !== y) && (ye(J), Y(y), R(b), B(s(b, y)), b && H(b)), ae(() => {
+		let e = (e) => {
+			let t = U.current;
+			if (!t || t.contains(e.target)) return;
+			let n = document.activeElement;
+			n instanceof HTMLElement && G.current?.contains(n) && n.blur(), I(!1);
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, []);
+	let X = (e) => {
+		R(e), B(s(e, y)), fe?.(e);
+	}, xe = () => {
+		if (!z.trim()) {
+			L && X(null);
+			return;
+		}
+		let e = u(z, y, L);
+		e === void 0 ? B(s(L, y)) : (e && L && e.getTime() === L.getTime() ? B(s(e, y)) : X(e), e && H(e));
+	}, Z = (e) => {
+		let t = L ?? /* @__PURE__ */ new Date(), n = new Date(e);
+		P && n.setHours(t.getHours(), t.getMinutes()), X(n), P || q();
+	}, Q = (e, t) => {
+		let n = new Date(L ?? /* @__PURE__ */ new Date());
+		e != null && n.setHours(e), t != null && n.setMinutes(t), X(n);
+	}, $ = (e) => H(new Date(V.getFullYear(), V.getMonth() + e, 1)), Se = m(F && !x, W, G);
+	return /* @__PURE__ */ g("div", {
+		className: ["kapi-dp", C].filter(Boolean).join(" "),
+		style: w,
+		ref: U,
+		onBlur: (e) => {
+			n(e.relatedTarget, e.currentTarget) && k?.(e);
+		},
+		children: [
+			/* @__PURE__ */ g("div", {
+				className: "kapi-dp__field",
+				ref: W,
+				children: [/* @__PURE__ */ h("input", {
+					ref: (t) => {
+						he.current = t, e(O, t);
+					},
+					...t(M, { id: me }),
+					className: "kapi-input kapi-dp__input",
+					value: z,
+					placeholder: pe ?? ue[y],
+					disabled: x,
+					"aria-label": T,
+					autoComplete: "off",
+					inputMode: "numeric",
+					onChange: (e) => B(re(e.target.value, y)),
+					onFocus: _e,
+					onBlur: xe,
+					onKeyDown: (e) => {
+						e.key === "Escape" && I(!1), e.key === "ArrowDown" && N && (e.preventDefault(), K());
+					}
+				}), /* @__PURE__ */ h("button", {
+					type: "button",
+					className: "kapi-dp__toggle",
+					disabled: x,
+					"aria-label": j.openPicker,
+					"aria-expanded": F,
+					onClick: () => F ? I(!1) : K(),
+					children: h(N ? oe : le, {
+						size: 16,
+						strokeWidth: 1.9
+					})
+				})]
+			}),
+			S && /* @__PURE__ */ h("input", {
+				type: "hidden",
+				name: S,
+				value: o(L, y),
+				disabled: x
+			}),
+			F && !x && /* @__PURE__ */ g("div", {
+				ref: G,
+				className: `kapi-dp__pop${Se === "top" ? " kapi-dp__pop--up" : ""}`,
+				onKeyDown: (e) => {
+					e.key === "Escape" && (e.preventDefault(), q());
+				},
+				children: [N && /* @__PURE__ */ g("div", {
+					className: "kapi-dp__cal",
+					children: [
+						/* @__PURE__ */ g("div", {
+							className: "kapi-dp__head",
+							children: [
+								/* @__PURE__ */ h("button", {
+									type: "button",
+									className: "kapi-dp__nav",
+									"aria-label": j.prevMonth,
+									onClick: () => $(-1),
+									children: /* @__PURE__ */ h(se, {
+										size: 15,
+										strokeWidth: 2.2
+									})
+								}),
+								/* @__PURE__ */ h("span", {
+									className: "kapi-dp__title",
+									children: c(V, j.months)
+								}),
+								/* @__PURE__ */ h("button", {
+									type: "button",
+									className: "kapi-dp__nav",
+									"aria-label": j.nextMonth,
+									onClick: () => $(1),
+									children: /* @__PURE__ */ h(ce, {
+										size: 15,
+										strokeWidth: 2.2
+									})
+								})
+							]
+						}),
+						/* @__PURE__ */ h(f, {
+							view: V,
+							onViewChange: H,
+							labels: j,
+							focusTarget: L,
+							focusRequest: ge,
+							isSelected: (e) => d(e, L),
+							dayClassName: (e) => d(e, L) && "kapi-dp__day--sel",
+							onPick: Z
+						}),
+						/* @__PURE__ */ g("div", {
+							className: "kapi-dp__foot",
+							children: [/* @__PURE__ */ h("button", {
+								type: "button",
+								className: "kapi-dp__link",
+								onClick: () => {
+									X(null), I(!1);
+								},
+								children: j.clear
+							}), /* @__PURE__ */ h("button", {
+								type: "button",
+								className: "kapi-dp__link",
+								onClick: () => {
+									let e = /* @__PURE__ */ new Date();
+									H(e), Z(e);
+								},
+								children: j.today
+							})]
+						})
+					]
+				}), P && /* @__PURE__ */ h("div", {
+					className: "kapi-dp__time",
+					children: /* @__PURE__ */ g("div", {
+						className: "kapi-dp__time-cols",
+						children: [/* @__PURE__ */ h("div", {
+							className: "kapi-dp__time-col",
+							children: de.map((e) => /* @__PURE__ */ h("button", {
+								type: "button",
+								className: `kapi-dp__time-opt${L?.getHours() === e ? " kapi-dp__time-opt--sel" : ""}`,
+								onClick: () => Q(e, null),
+								children: l(e)
+							}, e))
+						}), /* @__PURE__ */ h("div", {
+							className: "kapi-dp__time-col",
+							children: ie(D, L?.getMinutes()).map((e) => /* @__PURE__ */ h("button", {
+								type: "button",
+								className: `kapi-dp__time-opt${L?.getMinutes() === e ? " kapi-dp__time-opt--sel" : ""}`,
+								onClick: () => Q(null, e),
+								children: l(e)
+							}, e))
+						})]
+					})
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { y as KapiDatePicker };

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

@@ -0,0 +1,49 @@
+import { type CSSProperties, type FocusEvent, type Ref } from "react";
+import { type KapiCalendarLabels } from "./datePickerLogic";
+import { type KapiDateRange } from "./dateRangeLogic";
+import "./KapiDatePicker.css";
+import type { KapiLabelsOverride } from "../labelsLogic";
+export type { KapiDateRange };
+/** Textos del rango: los del calendario más la pista de qué punta se está eligiendo. */
+export type KapiDateRangePickerLabels = KapiCalendarLabels & {
+    pickStart: string;
+    pickEnd: string;
+};
+export declare const DEFAULT_DATE_RANGE_LABELS: KapiDateRangePickerLabels;
+export type KapiDateRangePickerProps = {
+    /** Rango actual (`from`/`to`). Se re-sincroniza cada vez que cambia (componente controlado). */
+    value?: KapiDateRange | undefined;
+    /** Se llama con el rango completo (al elegir la segunda fecha o al tipear) o vacío al borrar. */
+    onChange?: ((value: KapiDateRange) => void) | undefined;
+    /** Texto de ejemplo del campo. */
+    placeholder?: string | undefined;
+    /** Deshabilita el campo y el botón del calendario. */
+    disabled?: boolean | undefined;
+    /** `id` del campo de texto (para asociarlo a un `<label>`). */
+    id?: string | undefined;
+    /**
+     * Nombre para formularios nativos: dos `<input type="hidden">`, `name.from` y `name.to`, con cada punta en
+     * `yyyy-mm-dd` (vacías sin rango). El campo de texto no lleva `name`.
+     */
+    name?: string | undefined;
+    /** Clase del envoltorio (campo + calendario). */
+    className?: string | undefined;
+    /** Estilo del envoltorio; `id` es el del campo de texto. */
+    style?: CSSProperties | undefined;
+    /** Nombre accesible del campo de texto cuando no hay `<label>` visible. */
+    "aria-label"?: string | undefined;
+    /** Textos del calendario y de la pista. */
+    labels?: KapiLabelsOverride<KapiDateRangePickerLabels> | undefined;
+    /** Ref al `<input>` de texto. */
+    ref?: Ref<HTMLInputElement> | undefined;
+    /** Se dispara cuando el foco sale del control (pasar al calendario o al botón no cuenta). */
+    onBlur?: ((event: FocusEvent<HTMLDivElement>) => void) | undefined;
+};
+/**
+ * Rango de fechas propio (sin librería), con el mismo look que `KapiDatePicker`. En el calendario, el
+ * primer click marca el inicio y el segundo el fin (en cualquier orden; el hover previsualiza). También
+ * se puede tipear `dd/mm/aaaa – dd/mm/aaaa` (se parsea al salir del campo). Sólo emite rangos completos
+ * o vacío: si se cierra con sólo el inicio elegido, vuelve al último rango. Teclado igual que
+ * `KapiDatePicker` (grilla compartida `KapiCalendarGrid`): Enter/Espacio marcan cada punta.
+ */
+export declare const KapiDateRangePicker: ({ value, onChange, placeholder, disabled, id, name, className, style, "aria-label": ariaLabel, labels, ref, onBlur: onBlurProp }: KapiDateRangePickerProps) => import("react").JSX.Element;