@kapiuara/ui 0.0.0-stage → 0.1.0

package/dist/components/inputs/KapiFileUpload.js

@@ -0,0 +1,134 @@
+"use client";
+import { fieldControlProps as e, joinIds as t } from "./fieldLogic.js";
+import { useKapiField as n } from "./KapiField.js";
+import { useLabels as r } from "../locale/KapiLocaleProvider.js";
+import { joinClasses as i } from "../rootProps.js";
+import { formatFileSize as a, isActivationKey as o, matchesAccept as s, mergeFiles as c, removeFileAt as l } from "./fileUploadLogic.js";
+/* empty css                   */
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useEffect as f, useId as p, useRef as m, useState as h } from "react";
+import { FileText as g, UploadCloud as _, X as v } from "lucide-react";
+//#region src/components/inputs/KapiFileUpload.tsx
+var y = {
+	drop: "Arrastra archivos o",
+	choose: "elige",
+	remove: "Quitar",
+	hint: "PDF, JPG, PNG · hasta 10MB"
+}, b = ({ multiple: b = !0, accept: x, hint: S, onChange: C, disabled: w = !1, className: T, style: E, labels: D, name: O, id: k, onBlur: A, invalid: j, "aria-describedby": M, ref: N }) => {
+	let P = r("fileUpload", y, D), F = S ?? P.hint, I = n(), [L, R] = h([]), [z, B] = h(!1), V = m(null), H = p(), U = `${H}-title`, W = `${H}-hint`, G = !!I?.labelId, K = e(I, {
+		id: k,
+		describedBy: t(G && W, M),
+		invalid: j
+	});
+	f(() => {
+		let e = V.current;
+		if (!O || !e || typeof DataTransfer > "u" || L.length === 0 && !e.files?.length) return;
+		let t = new DataTransfer();
+		L.forEach((e) => t.items.add(e)), e.files = t.files;
+	}, [L, O]);
+	let q = (e) => {
+		R(e), C?.(e);
+	}, J = (e) => {
+		let t = Array.from(e ?? []);
+		t.length !== 0 && q(c(L, t, b));
+	}, Y = () => V.current?.click();
+	return /* @__PURE__ */ d("div", {
+		className: i("kapi-upload-wrap", T),
+		style: E,
+		children: [
+			/* @__PURE__ */ d("div", {
+				ref: N,
+				id: K.id,
+				"aria-describedby": K["aria-describedby"],
+				"aria-invalid": K["aria-invalid"],
+				"aria-labelledby": G ? t(I?.labelId, U) : void 0,
+				onBlur: A,
+				className: `kapi-upload${z ? " is-over" : ""}`,
+				onClick: Y,
+				onKeyDown: (e) => {
+					o(e.key) && (e.preventDefault(), Y());
+				},
+				onDragOver: (e) => {
+					e.preventDefault(), w || B(!0);
+				},
+				onDragLeave: () => B(!1),
+				onDrop: (e) => {
+					if (e.preventDefault(), B(!1), w) return;
+					let t = Array.from(e.dataTransfer.files).filter((e) => s(e, x));
+					t.length !== 0 && q(c(L, t, b));
+				},
+				role: "button",
+				tabIndex: w ? -1 : 0,
+				"aria-disabled": w || void 0,
+				children: [/* @__PURE__ */ u("span", {
+					className: "kapi-upload__ico",
+					children: /* @__PURE__ */ u(_, {
+						size: 22,
+						strokeWidth: 1.9
+					})
+				}), /* @__PURE__ */ d("div", {
+					className: "kapi-upload__body",
+					children: [/* @__PURE__ */ d("div", {
+						id: U,
+						className: "kapi-upload__t",
+						children: [
+							P.drop,
+							" ",
+							/* @__PURE__ */ u("b", { children: P.choose })
+						]
+					}), /* @__PURE__ */ u("div", {
+						id: W,
+						className: "kapi-upload__s",
+						children: F
+					})]
+				})]
+			}),
+			/* @__PURE__ */ u("input", {
+				ref: V,
+				className: "kapi-upload__input",
+				type: "file",
+				hidden: !0,
+				name: O,
+				multiple: b,
+				accept: x,
+				disabled: w,
+				tabIndex: -1,
+				onChange: (e) => {
+					J(e.target.files), e.target.value = "";
+				}
+			}),
+			L.length > 0 && /* @__PURE__ */ u("div", {
+				className: "kapi-upload__list",
+				children: L.map((e, t) => /* @__PURE__ */ d("div", {
+					className: "kapi-upload__file",
+					children: [
+						/* @__PURE__ */ u(g, {
+							className: "kapi-upload__fileico",
+							size: 16,
+							strokeWidth: 1.9
+						}),
+						/* @__PURE__ */ u("span", {
+							className: "kapi-upload__name",
+							children: e.name
+						}),
+						/* @__PURE__ */ u("span", {
+							className: "kapi-upload__size",
+							children: a(e.size)
+						}),
+						/* @__PURE__ */ u("button", {
+							type: "button",
+							"aria-label": `${P.remove} ${e.name}`,
+							onClick: () => q(l(L, t)),
+							children: /* @__PURE__ */ u(v, {
+								size: 15,
+								strokeWidth: 2.2
+							})
+						})
+					]
+				}, `${e.name}-${t}`))
+			})
+		]
+	});
+};
+//#endregion
+export { y as DEFAULT_FILE_UPLOAD_LABELS, b as KapiFileUpload };

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

@@ -0,0 +1,13 @@
+import type { ButtonHTMLAttributes, ReactNode, Ref } from "react";
+export type KapiIconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "aria-label"> & {
+    /** Nombre accesible (el botón no tiene texto visible). */
+    "aria-label": string;
+    /** Ícono (lucide-react). Si falta, muestra el glifo `⋯` (acciones de fila). */
+    icon?: ReactNode;
+    /** Ref al `<button>` nativo. */
+    ref?: Ref<HTMLButtonElement>;
+};
+/** Clases del botón. Pura y exportada para testear. */
+export declare const iconButtonClasses: (className?: string) => string;
+/** Botón cuadrado de ícono (`.kapi-btn--icon`), p. ej. el `⋯` de acciones de una fila. */
+export declare const KapiIconButton: ({ icon, className, type, ref, ...rest }: KapiIconButtonProps) => import("react").JSX.Element;

package/dist/components/inputs/KapiIconButton.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/inputs/KapiIconButton.tsx
+var t = (e = "") => [
+	"kapi-btn",
+	"kapi-btn--icon",
+	e
+].filter(Boolean).join(" "), n = ({ icon: n, className: r, type: i = "button", ref: a, ...o }) => /* @__PURE__ */ e("button", {
+	ref: a,
+	type: i,
+	className: t(r),
+	...o,
+	children: n ?? "⋯"
+});
+//#endregion
+export { n as KapiIconButton, t as iconButtonClasses };

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

@@ -0,0 +1,92 @@
+import { type InputHTMLAttributes, type ReactElement, type ReactNode, type Ref, type TextareaHTMLAttributes } from "react";
+import { type KapiFieldStatus } from "./KapiField";
+import type { KapiLabelsOverride } from "../labelsLogic";
+import "./inputsExtra.css";
+export type KapiInputSize = "sm" | "md" | "lg";
+/** Props propias del design system, comunes a input y textarea. */
+type KapiInputOwnProps = {
+    /** Escala de control compartida con botones y selects. */
+    size?: KapiInputSize | undefined;
+    /** Validación: borde verde (`ok`) o rojo (`err`). */
+    status?: KapiFieldStatus | undefined;
+    /** Angosto y centrado (notas, cantidades en celdas). */
+    num?: boolean | undefined;
+    /** Etiqueta. Si hay `label` o `help`, el control se envuelve en un `KapiField`. */
+    label?: ReactNode | undefined;
+    /** Agrega el asterisco de obligatorio a la etiqueta. */
+    required?: boolean | undefined;
+    /** Ayuda / mensaje de error bajo el control (toma el color de `status`). */
+    help?: ReactNode | undefined;
+    /** Clase del `KapiField` contenedor (si lo hay). `className` va al control. */
+    fieldClassName?: string | undefined;
+};
+/** Textos fijos del input (prop `labels`). */
+export type KapiInputLabels = {
+    /** `aria-label` del botón de limpiar. */
+    clear: string;
+};
+export declare const DEFAULT_INPUT_LABELS: KapiInputLabels;
+/**
+ * Adornos del input (sólo `<input>`, no `multiline`). Con alguno, el input se envuelve en una caja
+ * (`.kapi-inputbox`) que lleva el borde, el fondo y el anillo de foco; sin ninguno el markup es el de siempre.
+ */
+type KapiInputAdornmentProps = {
+    /** Ícono al inicio. Decorativo (`aria-hidden`). */
+    startIcon?: ReactNode;
+    /** Ícono al final. Decorativo (`aria-hidden`). */
+    endIcon?: ReactNode;
+    /** Texto corto antes del valor (`$`, `+54`). Lo leen los lectores (se suma a `aria-describedby`). */
+    prefix?: ReactNode;
+    /** Texto corto después del valor (`kg`, `ARS`). Lo leen los lectores (se suma a `aria-describedby`). */
+    suffix?: ReactNode;
+    /** Botón para vaciar el campo; aparece sólo con valor. Dispara `onChange` con `""` y deja el foco en el input. */
+    clearable?: boolean;
+    /** Avisa que se limpió (además del `onChange`). */
+    onClear?: () => void;
+    /**
+     * Atajo de teclado que enfoca el campo (`"/"`, `"Control+K"`), dibujado como `<kbd>` al final mientras el
+     * campo está vacío y anunciado con `aria-keyshortcuts`. Sólo presentación: la app registra la tecla
+     * (p. ej. con `useHotkey`).
+     */
+    shortcut?: string | undefined;
+    /** Textos fijos (botón de limpiar). */
+    labels?: KapiLabelsOverride<KapiInputLabels> | undefined;
+};
+/**
+ * `prefix` se omite de los atributos HTML: el global `prefix` (RDFa) choca con el adorno del mismo nombre.
+ * Con adornos, `className` va a la caja (es la que se ve y ocupa el lugar); sin adornos, al `<input>`.
+ */
+export type KapiInputProps = KapiInputOwnProps & KapiInputAdornmentProps & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> & {
+    multiline?: false;
+    /** Ref al `<input>`. */
+    ref?: Ref<HTMLInputElement>;
+};
+/** El textarea no lleva adornos. */
+export type KapiTextareaProps = KapiInputOwnProps & {
+    [K in keyof KapiInputAdornmentProps]?: never;
+} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size" | "prefix"> & {
+    /** Renderiza un `<textarea>` en vez de un `<input>`. */
+    multiline: true;
+    /** Ref al `<textarea>`. */
+    ref?: Ref<HTMLTextAreaElement>;
+};
+/** Clases del control. Pura y exportada: es lo que se testea (no el markup). */
+export declare const inputClasses: ({ size, status, num, className }?: {
+    size?: KapiInputSize | undefined;
+    status?: KapiFieldStatus | undefined;
+    num?: boolean | undefined;
+    className?: string | undefined;
+}) => string;
+type KapiInputComponent = {
+    (props: KapiInputProps): ReactElement | null;
+    (props: KapiTextareaProps): ReactElement | null;
+    displayName?: string;
+};
+/**
+ * Campo de texto (`.kapi-input`). `<input>` por defecto; con `multiline` es un `<textarea>`.
+ * Con `label` / `help` se envuelve en un `KapiField` y conecta label, ayuda y `aria-invalid`.
+ * Adornos opcionales (`startIcon`, `endIcon`, `prefix`, `suffix`, `clearable`, `shortcut`): ver
+ * `KapiInputAdornmentProps`.
+ */
+export declare const KapiInput: KapiInputComponent;
+export {};

package/dist/components/inputs/KapiInput.js

@@ -0,0 +1,123 @@
+"use client";
+import { fieldControlProps as e, joinIds as t } from "./fieldLogic.js";
+import { KapiField as n, useKapiField as r } from "./KapiField.js";
+import { resolveGroupSize as i } from "./inputGroupLogic.js";
+import { useKapiInputGroup as a } from "./KapiInputGroup.js";
+import { hasAdornments as ee, hasValue as o, inputBoxClasses as te, present as s } from "./inputLogic.js";
+import { useLabels as c } from "../locale/KapiLocaleProvider.js";
+/* empty css                */
+import { jsx as l, jsxs as ne } from "react/jsx-runtime";
+import { useId as u, useRef as re, useState as d } from "react";
+import { X as f } from "lucide-react";
+//#region src/components/inputs/KapiInput.tsx
+var p = { clear: "Limpiar" }, m = (e) => {
+	Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set?.call(e, ""), e.dispatchEvent(new Event("input", { bubbles: !0 }));
+}, h = ({ size: e = "md", status: t, num: n = !1, className: r = "" } = {}) => [
+	"kapi-input",
+	e !== "md" && `kapi-input--${e}`,
+	n && "kapi-input--num",
+	t && `kapi-input--${t}`,
+	r
+].filter(Boolean).join(" "), g = (g) => {
+	let { size: _, status: v, num: y, label: b, required: x, help: S, fieldClassName: C, className: w, multiline: T, id: E, startIcon: D, endIcon: O, prefix: k, suffix: A, clearable: j, onClear: M, shortcut: N, labels: ie, ref: ae, ...P } = g, F = ae, I = r(), L = c("input", p, ie), R = i(_, a()?.size), z = !T && ee({
+		startIcon: D,
+		endIcon: O,
+		prefix: k,
+		suffix: A,
+		clearable: j,
+		shortcut: N
+	}), B = re(null), V = P, [H, U] = d(() => o(V.defaultValue)), W = b != null || !!S, G = u(), K = E ?? (W ? G : I?.controlId), q = S ? `${K}-help` : void 0, J = u(), Y = z && s(k) ? `${J}-prefix` : void 0, X = z && s(A) ? `${J}-suffix` : void 0, Z = {
+		...e(W ? null : I, {
+			id: K,
+			describedBy: t(q, P["aria-describedby"], Y, X),
+			invalid: v ? v === "err" : void 0
+		}),
+		required: x,
+		className: z ? "kapi-inputbox__control" : h({
+			size: R,
+			status: v,
+			num: y,
+			className: w
+		})
+	}, oe = (e) => {
+		B.current = e, typeof F == "function" ? F(e) : F && (F.current = e);
+	}, Q = V.value === void 0 ? H : o(V.value), se = () => {
+		let e = B.current;
+		e && (m(e), U(!1), e.focus(), M?.());
+	}, $ = T ? /* @__PURE__ */ l("textarea", {
+		ref: F,
+		...P,
+		...Z
+	}) : z ? /* @__PURE__ */ ne("div", {
+		className: te({
+			size: R,
+			status: v,
+			disabled: V.disabled,
+			className: w
+		}),
+		onMouseDown: (e) => {
+			e.target === B.current || V.disabled || (e.preventDefault(), B.current?.focus());
+		},
+		children: [
+			s(D) && /* @__PURE__ */ l("span", {
+				className: "kapi-inputbox__icon",
+				"aria-hidden": "true",
+				children: D
+			}),
+			s(k) && /* @__PURE__ */ l("span", {
+				id: Y,
+				className: "kapi-inputbox__affix",
+				children: k
+			}),
+			/* @__PURE__ */ l("input", {
+				ref: oe,
+				...V,
+				...Z,
+				"aria-keyshortcuts": V["aria-keyshortcuts"] ?? (N || void 0),
+				onChange: (e) => {
+					U(o(e.target.value)), V.onChange?.(e);
+				}
+			}),
+			s(A) && /* @__PURE__ */ l("span", {
+				id: X,
+				className: "kapi-inputbox__affix",
+				children: A
+			}),
+			j && Q && !V.disabled && !V.readOnly && /* @__PURE__ */ l("button", {
+				type: "button",
+				tabIndex: -1,
+				className: "kapi-inputbox__clear",
+				"aria-label": L.clear,
+				onClick: se,
+				children: /* @__PURE__ */ l(f, { "aria-hidden": "true" })
+			}),
+			N && !Q && /* @__PURE__ */ l("kbd", {
+				className: "kapi-inputbox__kbd",
+				"aria-hidden": "true",
+				children: N
+			}),
+			s(O) && /* @__PURE__ */ l("span", {
+				className: "kapi-inputbox__icon",
+				"aria-hidden": "true",
+				children: O
+			})
+		]
+	}) : /* @__PURE__ */ l("input", {
+		ref: F,
+		...V,
+		...Z
+	});
+	return W ? /* @__PURE__ */ l(n, {
+		label: b,
+		htmlFor: K,
+		required: x,
+		help: S,
+		helpId: q,
+		status: v,
+		className: C,
+		children: $
+	}) : $;
+};
+g.displayName = "KapiInput";
+//#endregion
+export { p as DEFAULT_INPUT_LABELS, g as KapiInput, h as inputClasses };

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

@@ -0,0 +1,37 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import type { KapiFieldStatus } from "./KapiField";
+import { type KapiInputGroupSize } from "./inputGroupLogic";
+import "./KapiInputGroup.css";
+export type { KapiInputGroupSize };
+/** Atributos nativos (`id`, `style`, `data-*`…) van a la caja `role="group"` (el rol es propio). */
+export type KapiInputGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "role"> & {
+    /** Escala compartida: los `KapiInput` y `KapiSelect` de adentro la toman si no traen `size` propio. */
+    size?: KapiInputGroupSize;
+    /** Borde de validación del grupo entero (también se pinta solo si un input de adentro tiene `status`). */
+    status?: KapiFieldStatus;
+    /** Controles y adornos del grupo (`KapiInput`, `KapiSelect`, `KapiInputGroupAddon`…), en orden. */
+    children: ReactNode;
+};
+export type KapiInputGroupAddonProps = {
+    /** Sólo decorativo (un ícono suelto): se oculta a lectores. Un texto como "https://" se deja visible. */
+    decorative?: boolean;
+    className?: string;
+    children: ReactNode;
+};
+type KapiInputGroupContextValue = {
+    size?: KapiInputGroupSize | undefined;
+};
+/** Lo que el grupo le pasa a los controles de adentro (el tamaño); `null` fuera de un grupo. */
+export declare const useKapiInputGroup: () => KapiInputGroupContextValue | null;
+/**
+ * Junta varios controles en UNA caja: borde y radio por fuera (sólo las esquinas externas), separadores
+ * entre segmentos y un solo anillo de foco cuando cualquiera tiene el foco. Segmentos soportados:
+ * `KapiInput` (con o sin adornos), `KapiSelect` (el control cerrado), `KapiButton` y `KapiInputGroup.Addon`.
+ * Sólo estiliza: cada control conserva su comportamiento. Un `KapiInput` con `label`/`help` no va adentro:
+ * envuelve el grupo entero en un `KapiField`. Ahí la etiqueta apunta al input de texto; el `KapiSelect`
+ * usa su propio id (dale `aria-label`). Con varios inputs de texto, pasales `id` explícitos.
+ */
+export declare const KapiInputGroup: {
+    ({ size, status, className, children, ...rest }: KapiInputGroupProps): import("react").JSX.Element;
+    Addon: ({ decorative, className, children }: KapiInputGroupAddonProps) => import("react").JSX.Element;
+};

package/dist/components/inputs/KapiInputGroup.js

@@ -0,0 +1,29 @@
+"use client";
+import { inputGroupAddonClasses as e, inputGroupClasses as t } from "./inputGroupLogic.js";
+/* empty css                   */
+import { jsx as n } from "react/jsx-runtime";
+import { createContext as r, useContext as i, useMemo as a } from "react";
+//#region src/components/inputs/KapiInputGroup.tsx
+var o = r(null), s = () => i(o), c = ({ decorative: t = !1, className: r, children: i }) => /* @__PURE__ */ n("span", {
+	className: e(r),
+	"aria-hidden": t || void 0,
+	children: i
+}), l = ({ size: e, status: r, className: i, children: s, ...c }) => {
+	let l = a(() => ({ size: e }), [e]);
+	return /* @__PURE__ */ n(o.Provider, {
+		value: l,
+		children: /* @__PURE__ */ n("div", {
+			...c,
+			role: "group",
+			className: t({
+				size: e,
+				status: r,
+				className: i
+			}),
+			children: s
+		})
+	});
+};
+l.Addon = c;
+//#endregion
+export { l as KapiInputGroup, s as useKapiInputGroup };

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

@@ -0,0 +1,52 @@
+import { type Ref } from "react";
+import { type KapiInputProps } from "./KapiInput";
+/** Props comunes: las de `KapiInput` (label, help, status, size…) salvo el valor, que cada máscara tipa. */
+type MaskedBaseProps = Omit<KapiInputProps, "value" | "defaultValue" | "multiline" | "type"> & {
+    /** Ref al `<input>`. */
+    ref?: Ref<HTMLInputElement>;
+};
+export type KapiDniInputProps = MaskedBaseProps & {
+    /** Dígitos del DNI (sin puntos). Controlado si viene definido. */
+    value?: string;
+    /** Dígitos iniciales en modo no controlado (sin `value`). */
+    defaultValue?: string;
+    /** Se llama con los dígitos (sin puntos) en cada cambio. */
+    onValueChange?: (digits: string) => void;
+};
+/** DNI argentino con máscara `12.345.678` (7 u 8 dígitos). El valor son sólo los dígitos. */
+export declare const KapiDniInput: ({ value, defaultValue, onValueChange, onChange, ref, placeholder, ...rest }: KapiDniInputProps) => import("react").JSX.Element;
+export type KapiCuitInputProps = MaskedBaseProps & {
+    /** Dígitos del CUIT/CUIL (sin guiones). Controlado si viene definido. */
+    value?: string;
+    /** Dígitos iniciales en modo no controlado (sin `value`). */
+    defaultValue?: string;
+    /** Se llama con los dígitos y si el CUIT está completo y con dígito verificador correcto. */
+    onValueChange?: (digits: string, valid: boolean) => void;
+    /** Ayuda que se muestra cuando el CUIT está completo pero el dígito verificador no cierra. Gana sobre `invalid` de la clave `cuitInput`. */
+    invalidMessage?: string;
+};
+/** Textos del CUIT (clave `cuitInput` del provider; por instancia se pisa con `invalidMessage`, porque `labels` es el de `KapiInput`). */
+export type KapiCuitInputLabels = {
+    invalid: string;
+};
+export declare const DEFAULT_CUIT_INPUT_LABELS: KapiCuitInputLabels;
+/**
+ * CUIT/CUIL con máscara `20-12345678-9` y validación del dígito verificador. Completo e inválido → borde
+ * rojo y `aria-invalid` (salvo que `status` venga de afuera); si el campo tiene label o ayuda, muestra
+ * `invalidMessage`.
+ */
+export declare const KapiCuitInput: ({ value, defaultValue, onValueChange, onChange, invalidMessage, status, help, label, ref, placeholder, ...rest }: KapiCuitInputProps) => import("react").JSX.Element;
+export type KapiCurrencyInputProps = MaskedBaseProps & {
+    /** Importe. Controlado si viene definido (`null` = vacío). */
+    value?: number | null;
+    /** Importe inicial en modo no controlado (sin `value`); `null` = vacío. */
+    defaultValue?: number | null;
+    /** Se llama con el importe (`null` si está vacío) cada vez que cambia. */
+    onValueChange?: (value: number | null) => void;
+};
+/**
+ * Importe en pesos con formato es-AR (`$ 1.234,56`): puntos de miles automáticos y coma decimal
+ * mientras se tipea; al salir del campo completa los dos decimales. El valor es un `number`.
+ */
+export declare const KapiCurrencyInput: ({ value, defaultValue, onValueChange, onChange, onBlur, ref, placeholder, ...rest }: KapiCurrencyInputProps) => import("react").JSX.Element;
+export {};

package/dist/components/inputs/KapiMaskedInput.js

@@ -0,0 +1,78 @@
+"use client";
+import { assignRef as e } from "./fieldLogic.js";
+import { useLabels as t } from "../locale/KapiLocaleProvider.js";
+import { KapiInput as n } from "./KapiInput.js";
+import { caretForSignificant as r, countSignificant as i, formatCuit as a, formatCurrency as o, formatDni as s, isValidCuit as c, maskCurrencyInput as l, onlyDigits as u, parseCurrency as d } from "./maskLogic.js";
+import { jsx as f } from "react/jsx-runtime";
+import { useCallback as p, useRef as m, useState as h } from "react";
+//#region src/components/inputs/KapiMaskedInput.tsx
+var g = (t, n, a) => ({
+	setRef: p((t) => e(n, t), [n]),
+	apply: (e, n) => {
+		let o = e.target, s = o.selectionStart ?? o.value.length;
+		if (a !== void 0 && u(o.value).length > a) {
+			let e = Math.max(0, s - (o.value.length - n.length));
+			return o.value = n, o.setSelectionRange(e, e), n;
+		}
+		let c = i(o.value, s), l = t(o.value);
+		if (o.value = l, document.activeElement === o) {
+			let e = r(l, c);
+			o.setSelectionRange(e, e);
+		}
+		return l;
+	}
+}), _ = ({ value: e, defaultValue: t = "", onValueChange: r, onChange: i, ref: a, placeholder: o = "12.345.678", ...c }) => {
+	let [l, d] = h(() => u(t, 8)), p = e === void 0 ? l : u(e, 8), { setRef: m, apply: _ } = g(s, a, 8);
+	return /* @__PURE__ */ f(n, {
+		...c,
+		ref: m,
+		value: s(p),
+		placeholder: o,
+		inputMode: "numeric",
+		autoComplete: "off",
+		onChange: (t) => {
+			let n = u(_(t, s(p)));
+			n !== p && (e === void 0 && d(n), r?.(n)), i?.(t);
+		}
+	});
+}, v = { invalid: "CUIT inválido: revisa el dígito verificador" }, y = ({ value: e, defaultValue: r = "", onValueChange: i, onChange: o, invalidMessage: s, status: l, help: d, label: p, ref: m, placeholder: _ = "20-12345678-9", ...y }) => {
+	let b = t("cuitInput", v), [x, S] = h(() => u(r, 11)), C = e === void 0 ? x : u(e, 11), w = C.length === 11 && !c(C), T = p != null || !!d, { setRef: E, apply: D } = g(a, m, 11);
+	return /* @__PURE__ */ f(n, {
+		...y,
+		ref: E,
+		label: p,
+		help: T && w ? s ?? b.invalid : d,
+		status: l ?? (w ? "err" : void 0),
+		value: a(C),
+		placeholder: _,
+		inputMode: "numeric",
+		autoComplete: "off",
+		onChange: (t) => {
+			let n = u(D(t, a(C)));
+			n !== C && (e === void 0 && S(n), i?.(n, c(n))), o?.(t);
+		}
+	});
+}, b = ({ value: e, defaultValue: t = null, onValueChange: r, onChange: i, onBlur: a, ref: s, placeholder: c = "$ 0,00", ...u }) => {
+	let [p, _] = h(() => o(e === void 0 ? t : e)), v = m(d(p)), [y, b] = h(e);
+	e !== void 0 && e !== y && (b(e), e !== d(p) && (_(o(e)), v.current = e));
+	let { setRef: x, apply: S } = g(l, s);
+	return /* @__PURE__ */ f(n, {
+		...u,
+		ref: x,
+		value: p,
+		placeholder: c,
+		inputMode: "decimal",
+		autoComplete: "off",
+		onChange: (e) => {
+			let t = S(e, p);
+			_(t);
+			let n = d(t);
+			n !== v.current && (v.current = n, r?.(n)), i?.(e);
+		},
+		onBlur: (e) => {
+			_(o(d(p))), a?.(e);
+		}
+	});
+};
+//#endregion
+export { v as DEFAULT_CUIT_INPUT_LABELS, y as KapiCuitInput, b as KapiCurrencyInput, _ as KapiDniInput };

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

@@ -0,0 +1,44 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+import "./inputsExtra.css";
+import type { KapiFieldStatus } from "./KapiField";
+import { type KapiInputSize } from "./KapiInput";
+import type { KapiLabelsOverride } from "../labelsLogic";
+export type KapiNumberStepperProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step"> & {
+    /** Valor actual (controlado). */
+    value: number;
+    /** Se llama con el número nuevo, ya acotado a `min`/`max`. */
+    onChange: (value: number) => void;
+    /** Mínimo permitido; en el tope el botón − se deshabilita. */
+    min?: number;
+    /** Máximo permitido; en el tope el botón + se deshabilita. */
+    max?: number;
+    /** Cuánto suman o restan los botones − y +. */
+    step?: number;
+    /** Tamaño del control: `sm` · `md` · `lg`. */
+    size?: KapiInputSize;
+    /** Estado de validación (borde y ayuda). */
+    status?: KapiFieldStatus;
+    /** Etiqueta visible; con ella (o `help`) el control se envuelve en un `KapiField`. */
+    label?: ReactNode;
+    /** Texto de ayuda o error bajo el control. */
+    help?: ReactNode;
+    /** Class of the group wrapper. `className` goes to the `<input>`. */
+    wrapperClassName?: string;
+    /** Textos de los botones − y +. */
+    labels?: KapiLabelsOverride<KapiNumberStepperLabels> | undefined;
+};
+/** Wrapper classes. Pure and exported. */
+export declare const stepperClasses: ({ size, className }?: {
+    size?: KapiInputSize | undefined;
+    className?: string | undefined;
+}) => string;
+/**
+ * Numeric field with − / + buttons. Controlled. Typing is free while focused and is
+ * committed (clamped to bounds) on blur / Enter; the buttons and arrow keys step immediately.
+ */
+export type KapiNumberStepperLabels = {
+    decrease: string;
+    increase: string;
+};
+export declare const DEFAULT_NUMBER_STEPPER_LABELS: KapiNumberStepperLabels;
+export declare const KapiNumberStepper: ({ value, onChange, min, max, step, size, status, label, help, wrapperClassName, labels, className, disabled, id, ...rest }: KapiNumberStepperProps) => import("react").JSX.Element;