@kapiuara/ui 0.0.0-stage → 0.1.1

package/dist/components/inputs/KapiNumberStepper.js

@@ -0,0 +1,100 @@
+"use client";
+import { KapiField as e } from "./KapiField.js";
+import { useLabels as t } from "../locale/KapiLocaleProvider.js";
+/* empty css                */
+import { inputClasses as n } from "./KapiInput.js";
+import { canDecrement as r, canIncrement as i, clampNumber as a, stepValue as o } from "./numberStepLogic.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useEffect as l, useId as u, useState as d } from "react";
+import { Minus as f, Plus as p } from "lucide-react";
+//#region src/components/inputs/KapiNumberStepper.tsx
+var m = ({ size: e = "md", className: t = "" } = {}) => [
+	"kapi-stepper",
+	e !== "md" && `kapi-stepper--${e}`,
+	t
+].filter(Boolean).join(" "), h = {
+	decrease: "Disminuir",
+	increase: "Aumentar"
+}, g = ({ value: g, onChange: _, min: v, max: y, step: b = 1, size: x = "md", status: S, label: C, help: w, wrapperClassName: T, labels: E, className: D, disabled: O, id: k, ...A }) => {
+	let j = t("numberStepper", h, E), M = u(), N = k ?? M, P = {
+		min: v,
+		max: y,
+		step: b
+	}, [F, I] = d(null);
+	l(() => I(null), [g]);
+	let L = (e) => {
+		let t = a(e, P);
+		t !== g && _(t), I(null);
+	}, R = () => {
+		if (F === null) return;
+		let e = Number(F.replace(",", "."));
+		L(F.trim() === "" || Number.isNaN(e) ? g : e);
+	}, z = (e) => {
+		let t = F === null || F.trim() === "" ? NaN : Number(F.replace(",", "."));
+		L(o(Number.isNaN(t) ? g : t, e, P));
+	}, B = /* @__PURE__ */ c("div", {
+		className: m({
+			size: x,
+			className: T
+		}),
+		children: [
+			/* @__PURE__ */ s("button", {
+				type: "button",
+				className: "kapi-stepper__btn",
+				"aria-label": j.decrease,
+				tabIndex: -1,
+				disabled: O || !r(g, P),
+				onClick: () => z(-1),
+				children: /* @__PURE__ */ s(f, {
+					size: 15,
+					strokeWidth: 2.4
+				})
+			}),
+			/* @__PURE__ */ s("input", {
+				...A,
+				id: N,
+				type: "text",
+				inputMode: b % 1 == 0 ? "numeric" : "decimal",
+				role: "spinbutton",
+				"aria-valuenow": g,
+				"aria-valuemin": v,
+				"aria-valuemax": y,
+				"aria-invalid": S === "err" || void 0,
+				className: n({
+					size: x,
+					status: S,
+					num: !0,
+					className: `kapi-stepper__input ${D ?? ""}`.trim()
+				}),
+				value: F ?? String(g),
+				disabled: O,
+				onChange: (e) => I(e.target.value),
+				onBlur: R,
+				onKeyDown: (e) => {
+					e.key === "ArrowUp" ? (e.preventDefault(), z(1)) : e.key === "ArrowDown" ? (e.preventDefault(), z(-1)) : e.key === "Enter" && R();
+				}
+			}),
+			/* @__PURE__ */ s("button", {
+				type: "button",
+				className: "kapi-stepper__btn",
+				"aria-label": j.increase,
+				tabIndex: -1,
+				disabled: O || !i(g, P),
+				onClick: () => z(1),
+				children: /* @__PURE__ */ s(p, {
+					size: 15,
+					strokeWidth: 2.4
+				})
+			})
+		]
+	});
+	return C == null && !w ? B : /* @__PURE__ */ s(e, {
+		label: C,
+		htmlFor: N,
+		help: w,
+		status: S,
+		children: B
+	});
+};
+//#endregion
+export { h as DEFAULT_NUMBER_STEPPER_LABELS, g as KapiNumberStepper, m as stepperClasses };

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

@@ -0,0 +1,7 @@
+import { type KapiCheckControlProps } from "./checkControl";
+export type KapiRadioProps = KapiCheckControlProps;
+/** Radio (`.kapi-check`). Agrupá con el mismo `name`. Props nativas al `<input>`; `className` a la etiqueta. */
+export declare const KapiRadio: {
+    ({ 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/KapiRadio.js

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

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

@@ -0,0 +1,55 @@
+import { type HTMLAttributes, type Ref } from "react";
+import "./inputsExtra.css";
+import type { KapiLabelsOverride } from "../labelsLogic";
+export type KapiRatingSize = "sm" | "md" | "lg";
+export type KapiRatingLabels = {
+    /** Accessible name when there is no `aria-label`. */
+    rating: string;
+    /** Joins value and max: "3 de 5". */
+    of: string;
+};
+export declare const DEFAULT_RATING_LABELS: KapiRatingLabels;
+/** Native attributes (`id`, `style`, `data-*`…) go to the root (slider or image). */
+export type KapiRatingProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "aria-label"> & {
+    /** Current rating, 0..max (halves allowed with `allowHalf`). */
+    value: number;
+    /** Omit to render a read-only (non-interactive) rating. */
+    onChange?: (value: number) => void;
+    /** Cantidad de estrellas (el valor máximo). */
+    max?: number;
+    /** Tamaño de las estrellas. */
+    size?: KapiRatingSize;
+    /** Deshabilita la interacción (se ve atenuado). */
+    disabled?: boolean;
+    /** Allow half stars. */
+    allowHalf?: boolean;
+    /** Accessible name; wins over `labels.rating` ("Calificación"). */
+    "aria-label"?: string;
+    /** Fixed copy (key `rating`). */
+    labels?: KapiLabelsOverride<KapiRatingLabels> | undefined;
+    /** Clase de la raíz. */
+    className?: string;
+    /** Name for native forms: renders an `<input type="hidden">` with the value (disabled with the rating). */
+    name?: string;
+    /** Marks the rating invalid (`aria-invalid`). Without it, taken from the wrapping `KapiField` (`status="err"`). */
+    invalid?: boolean;
+    /** Marks the rating required (`aria-required`). Without it, taken from the wrapping `KapiField`. */
+    required?: boolean;
+    /** Ref to the root (the focusable slider when interactive). */
+    ref?: Ref<HTMLDivElement>;
+};
+/** Wrapper classes. Pure and exported. */
+export declare const ratingClasses: ({ size, interactive, disabled, className }?: {
+    size?: KapiRatingSize | undefined;
+    interactive?: boolean | undefined;
+    disabled?: boolean | undefined;
+    className?: string | undefined;
+}) => string;
+/**
+ * Star rating. With `onChange` it is a keyboard-operable slider
+ * (arrows, Home, End; click or hover-preview with the mouse; clicking the current
+ * value clears it). Without `onChange` it is a read-only image.
+ * Inside a `KapiField` the interactive slider takes the field id, name (`aria-labelledby`), help,
+ * `aria-invalid` and `aria-required`.
+ */
+export declare const KapiRating: ({ value, onChange, max, size, disabled, allowHalf, className, labels, "aria-label": ariaLabelProp, name, invalid, required, id, "aria-describedby": describedBy, ref, ...rest }: KapiRatingProps) => import("react").JSX.Element;

package/dist/components/inputs/KapiRating.js

@@ -0,0 +1,99 @@
+"use client";
+import { fieldControlProps as e } from "./fieldLogic.js";
+import { useKapiField as t } from "./KapiField.js";
+import { useLabels as n } from "../locale/KapiLocaleProvider.js";
+/* empty css                */
+import { normalizeRating as r, ratingFromKey as i, ratingFromPointer as a, starFills as o } from "./ratingLogic.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useState as l } from "react";
+import { Star as u } from "lucide-react";
+//#region src/components/inputs/KapiRating.tsx
+var d = {
+	rating: "Calificación",
+	of: "de"
+}, f = {
+	sm: 16,
+	md: 22,
+	lg: 30
+}, p = ({ size: e = "md", interactive: t = !1, disabled: n = !1, className: r = "" } = {}) => [
+	"kapi-rating",
+	e !== "md" && `kapi-rating--${e}`,
+	t && "kapi-rating--interactive",
+	n && "kapi-rating--disabled",
+	r
+].filter(Boolean).join(" "), m = ({ value: m, onChange: h, max: g = 5, size: _ = "md", disabled: v = !1, allowHalf: y = !1, className: b, labels: x, "aria-label": S, name: C, invalid: w, required: T, id: E, "aria-describedby": D, ref: O, ...k }) => {
+	let A = n("rating", d, x), j = t(), [M, N] = l(null), P = h !== void 0 && !v, F = e(P ? j : null, {
+		id: E,
+		describedBy: D,
+		invalid: w,
+		required: T,
+		labelable: !1,
+		ariaLabel: S
+	}), I = S ?? A.rating, L = r(m, g, y), R = C ? /* @__PURE__ */ s("input", {
+		type: "hidden",
+		name: C,
+		value: L,
+		disabled: v
+	}) : null, z = o(P && M !== null ? M : L, g, y), B = f[_], V = (e, t) => {
+		let n = e.currentTarget.getBoundingClientRect(), r = n.width > 0 ? (e.clientX - n.left) / n.width : 1;
+		return a(t, r, y);
+	}, H = (e) => {
+		let t = i(e.key, L, g, y);
+		t !== null && (e.preventDefault(), t !== L && h?.(t));
+	}, U = z.map((e, t) => /* @__PURE__ */ c("span", {
+		className: "kapi-rating__star",
+		"data-fill": e,
+		onMouseMove: P ? (e) => N(V(e, t)) : void 0,
+		onClick: P ? (e) => {
+			let n = V(e, t);
+			h(n === L ? 0 : n);
+		} : void 0,
+		children: [/* @__PURE__ */ s(u, {
+			size: B,
+			strokeWidth: 2,
+			className: "kapi-rating__base",
+			"aria-hidden": "true"
+		}), e !== "empty" && /* @__PURE__ */ s("span", {
+			className: "kapi-rating__fill",
+			style: { width: e === "half" ? "50%" : "100%" },
+			children: /* @__PURE__ */ s(u, {
+				size: B,
+				strokeWidth: 2,
+				fill: "currentColor",
+				"aria-hidden": "true"
+			})
+		})]
+	}, t)), W = p({
+		size: _,
+		interactive: P,
+		disabled: v,
+		className: b
+	});
+	return P ? /* @__PURE__ */ c("div", {
+		...k,
+		...F,
+		ref: O,
+		className: W,
+		role: "slider",
+		tabIndex: 0,
+		"aria-label": F["aria-labelledby"] ? void 0 : I,
+		"aria-valuemin": 0,
+		"aria-valuemax": g,
+		"aria-valuenow": L,
+		"aria-valuetext": `${L} ${A.of} ${g}`,
+		onKeyDown: H,
+		onMouseLeave: () => N(null),
+		children: [U, R]
+	}) : /* @__PURE__ */ c("div", {
+		...k,
+		ref: O,
+		id: E,
+		"aria-describedby": D,
+		className: W,
+		role: "img",
+		"aria-label": `${I}: ${L} ${A.of} ${g}`,
+		children: [U, R]
+	});
+};
+//#endregion
+export { d as DEFAULT_RATING_LABELS, m as KapiRating, p as ratingClasses };

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

@@ -0,0 +1,41 @@
+import type { FocusEvent, HTMLAttributes, ReactNode, Ref } from "react";
+export type KapiSegmentedVariant = "text" | "icon" | "both";
+export type KapiSegmentedColor = "success" | "warning" | "danger" | "info";
+export type KapiSegmentedItem<Id extends string | number = string> = {
+    id: Id;
+    label: string;
+    /** Ícono (lucide-react). Se muestra en las variantes `icon` y `both`. */
+    icon?: ReactNode;
+    /** Contador en píldora a la derecha. */
+    count?: number;
+    /** Color del ítem cuando está activo (en vez del primario). */
+    color?: KapiSegmentedColor;
+};
+/** Atributos nativos (`id`, `style`, `data-*`…) van al `radiogroup`; el rol y el teclado son propios. */
+export type KapiSegmentedProps<Id extends string | number = string> = Omit<HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "defaultValue" | "role" | "onKeyDown"> & {
+    /** Opciones, en orden; cada una con `id`, `label` y opcionalmente `icon`. */
+    items: KapiSegmentedItem<Id>[];
+    /** `id` de la opción seleccionada (controlado). */
+    value: Id;
+    /** Se llama con el `id` de la opción elegida. */
+    onChange: (id: Id) => void;
+    /** `text` sólo label · `icon` sólo ícono (label en tooltip) · `both` ambos. */
+    variant?: KapiSegmentedVariant | undefined;
+    /** Name for native forms: renders an `<input type="hidden">` with the selected `id`. */
+    name?: string | undefined;
+    /** Fires when focus leaves the group as a whole (moving between options does not count). */
+    onBlur?: ((event: FocusEvent<HTMLDivElement>) => void) | undefined;
+    /** Marks the group invalid (`aria-invalid`). Without it, taken from the wrapping `KapiField` (`status="err"`). */
+    invalid?: boolean | undefined;
+    /** Marks the group required (`aria-required`). Without it, taken from the wrapping `KapiField`. */
+    required?: boolean | undefined;
+    /** Ref to the `radiogroup`. */
+    ref?: Ref<HTMLDivElement> | undefined;
+};
+/**
+ * Segmentado: elección única (patrón WAI-ARIA radio group: `radiogroup`/`radio`, roving tabindex,
+ * flechas con vuelta, Home/End; la flecha marca y enfoca). Un ítem activo con `color` usa ese color (vía `data-color`).
+ * En variante `icon` cada tab muestra su label en un tooltip al hover.
+ * Dentro de un `KapiField` toma id, nombre (`aria-labelledby`), ayuda, `aria-invalid` y `aria-required`.
+ */
+export declare const KapiSegmented: <Id extends string | number = string>({ items, value, onChange, variant, "aria-label": ariaLabel, className, name, onBlur, invalid, required, id, "aria-describedby": describedBy, ref, ...rest }: KapiSegmentedProps<Id>) => import("react").JSX.Element;

package/dist/components/inputs/KapiSegmented.js

@@ -0,0 +1,83 @@
+"use client";
+import { assignRef as e, fieldControlProps as t } from "./fieldLogic.js";
+import { useKapiField as n } from "./KapiField.js";
+import { joinClasses as r } from "../rootProps.js";
+import { useSlidingIndicator as i } from "../../hooks/useSlidingIndicator.js";
+import { KapiTooltip as a } from "../overlays/KapiTooltip.js";
+import { nextRadioIndex as o } from "./segmentedLogic.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/inputs/KapiSegmented.tsx
+var l = ({ items: l, value: u, onChange: d, variant: f = "text", "aria-label": p, className: m, name: h, onBlur: g, invalid: _, required: v, id: y, "aria-describedby": b, ref: x, ...S }) => {
+	let C = t(n(), {
+		id: y,
+		describedBy: b,
+		invalid: _,
+		required: v,
+		labelable: !1,
+		ariaLabel: p
+	}), w = l.find((e) => e.id === u), { containerRef: T, indicatorRef: E } = i({
+		active: u,
+		deps: [l, f],
+		findActive: (e) => e.querySelector("[role=\"radio\"][aria-checked=\"true\"]")
+	}), D = l.findIndex((e) => e.id === u), O = (e) => {
+		let t = o(l.length, D, e.key), n = t === void 0 ? void 0 : l[t];
+		t !== void 0 && n && (e.preventDefault(), d(n.id), T.current?.querySelectorAll("[role=\"radio\"]")[t]?.focus());
+	}, k = (e) => {
+		e.currentTarget.contains(e.relatedTarget) || g?.(e);
+	};
+	return /* @__PURE__ */ c("div", {
+		...S,
+		...C,
+		ref: (t) => {
+			T.current = t, e(x, t);
+		},
+		className: r("kapi-seg", m),
+		role: "radiogroup",
+		"aria-label": p,
+		onKeyDown: O,
+		onBlur: k,
+		children: [
+			/* @__PURE__ */ s("span", {
+				ref: E,
+				className: "kapi-seg__indicator",
+				"data-color": w?.color,
+				"aria-hidden": "true"
+			}),
+			l.map((e, t) => {
+				let n = u === e.id, r = /* @__PURE__ */ c("button", {
+					type: "button",
+					role: "radio",
+					"aria-checked": n,
+					tabIndex: n || D === -1 && t === 0 ? 0 : -1,
+					"aria-label": f === "icon" ? e.label : void 0,
+					className: `kapi-seg__btn${n ? " is-on" : ""}`,
+					"data-color": n && e.color ? e.color : void 0,
+					onClick: () => d(e.id),
+					children: [
+						(f === "icon" || f === "both") && e.icon && /* @__PURE__ */ s("span", {
+							className: "kapi-seg__ico",
+							children: e.icon
+						}),
+						f !== "icon" && /* @__PURE__ */ s("span", { children: e.label }),
+						e.count != null && /* @__PURE__ */ s("span", {
+							className: "kapi-seg__n",
+							children: e.count
+						})
+					]
+				}, e.id);
+				return f === "icon" && e.label ? /* @__PURE__ */ s(a, {
+					label: e.label,
+					prefer: "top",
+					children: r
+				}, e.id) : r;
+			}),
+			h && /* @__PURE__ */ s("input", {
+				type: "hidden",
+				name: h,
+				value: String(u)
+			})
+		]
+	});
+};
+//#endregion
+export { l as KapiSegmented };

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

@@ -0,0 +1,109 @@
+import { type CSSProperties, type FocusEvent, type ReactNode, type Ref } from "react";
+import { type KapiSelectEntry, type KapiSelectGroup, type KapiSelectOption } from "./selectLogic";
+import "./KapiSelect.css";
+import type { KapiLabelsOverride } from "../labelsLogic";
+export type { KapiSelectEntry, KapiSelectGroup, KapiSelectOption };
+export type KapiSelectSize = "sm" | "md" | "lg";
+/** Modo simple (default): el valor es un `string` o `null` (vacío). */
+export type KapiSelectSingleProps<V extends string = string> = {
+    /** Modo simple (`false` u omitido): un solo valor. */
+    multiple?: false;
+    /** Controlado. `null` = sin selección. */
+    value?: V | null;
+    /** No controlado: valor inicial. */
+    defaultValue?: V | null;
+    /** Recibe el valor elegido, o `null` al limpiar. */
+    onChange?: (value: V | null) => void;
+};
+/** Modo múltiple: el valor es siempre un arreglo (vacío = sin selección). */
+export type KapiSelectMultiProps<V extends string = string> = {
+    multiple: true;
+    /** Controlado. */
+    value?: V[];
+    /** No controlado: valor inicial. */
+    defaultValue?: V[];
+    /** Recibe la selección completa. */
+    onChange?: (value: V[]) => void;
+};
+/**
+ * Props de `KapiSelect`. El tipo de `value` / `onChange` depende de `multiple`. `T` tipa
+ * `option.data`; `V` permite estrechar el valor a una unión literal (se infiere de `value`/`onChange`).
+ */
+export type KapiSelectProps<T = unknown, V extends string = string> = KapiSelectBaseProps<T> & (KapiSelectSingleProps<V> | KapiSelectMultiProps<V>);
+/** Props comunes a ambos modos. */
+export interface KapiSelectBaseProps<T = unknown> {
+    /** Opciones (`{ value, label }`) o grupos (`{ label, options }`). Con `loadOptions`, lista inicial para la búsqueda vacía. */
+    options?: KapiSelectEntry<T>[];
+    /** Carga async de opciones según lo tipeado (reemplaza al filtro local); se aborta con `signal` si queda vieja. */
+    loadOptions?: (query: string, context: {
+        signal: AbortSignal;
+    }) => Promise<KapiSelectEntry<T>[]>;
+    /** Espera tras la última tecla antes de llamar a `loadOptions`, en ms. @default 300 */
+    loadDelay?: number;
+    /** Ofrece "Crear “texto”" si ninguna opción coincide exacto; si devuelve una opción, se elige. Una promesa debe terminar (resolver o rechazar): mientras está pendiente no se puede crear otra. */
+    onCreate?: (text: string) => KapiSelectOption<T> | void | Promise<KapiSelectOption<T> | void>;
+    /** Filtrar tipeando. Default `true`. */
+    searchable?: boolean;
+    /** Muestra el botón de limpiar cuando hay valor. */
+    clearable?: boolean;
+    /** Deshabilita el control. */
+    disabled?: boolean;
+    /** Estado de carga: spinner en el control y `loadingMessage` en el menú. */
+    loading?: boolean;
+    /** Gana sobre `labels.placeholder` ("Seleccionar…"). */
+    placeholder?: string;
+    /** Escala compartida con inputs y botones (misma altura por token). Default `md`. */
+    size?: KapiSelectSize;
+    /** Contenido rico de cada opción en el menú (ícono, título, sub-label). */
+    renderOption?: (opt: KapiSelectOption<T>) => ReactNode;
+    /** Gana sobre `labels.noOptions` ("Sin opciones"). */
+    noOptionsMessage?: string;
+    /** Gana sobre `labels.loading` ("Cargando…"). */
+    loadingMessage?: string;
+    /** Nombre del campo: con `name` el valor viaja en el `<form>` en inputs ocultos. */
+    name?: string;
+    /** `id` del control enfocable (no del envoltorio): `className`/`style` van al envoltorio. */
+    id?: string;
+    /** Clase del envoltorio. */
+    className?: string;
+    /** Estilos en línea del envoltorio. */
+    style?: CSSProperties;
+    /** Nombre accesible cuando no hay `<label>` asociado (o `KapiField`). */
+    "aria-label"?: string;
+    /** Textos fijos (limpiar, quitar chip, placeholder y estados del menú). */
+    labels?: KapiLabelsOverride<KapiSelectLabels> | undefined;
+    /** Ref al elemento enfocable (el input si hay búsqueda; el combobox si no). */
+    ref?: Ref<HTMLElement>;
+    /** Se dispara cuando el foco sale del control (moverse dentro de él o de su menú no cuenta). */
+    onBlur?: (event: FocusEvent<HTMLElement>) => void;
+}
+/** Clases del contenedor. Pura y exportada para testear. */
+export declare const selectClasses: ({ size, open, disabled, multi, className }: {
+    size?: KapiSelectSize | undefined;
+    open?: boolean | undefined;
+    disabled?: boolean | undefined;
+    multi?: boolean | undefined;
+    className?: string | undefined;
+}) => string;
+/**
+ * Select: combobox ARIA nativo (sin dependencias). Menú portaleado a `.kapi`
+ * (escapa tablas/overflow), búsqueda sin acentos, teclado completo, grupos y múltiple con chips.
+ */
+export type KapiSelectLabels = {
+    /** Botón que vacía la selección. */
+    clear: string;
+    /** Prefijo del quitar de cada chip en modo múltiple ("Quitar Medicina"). */
+    remove: string;
+    placeholder: string;
+    noOptions: string;
+    loading: string;
+    /** Mensaje cuando `loadOptions` falla. */
+    loadError: string;
+    /** Mensaje cuando la promesa de `onCreate` se rechaza (lo tipeado se conserva para reintentar). */
+    createError: string;
+    /** Prefijo de la opción que crea un valor nuevo ("Crear “Medicina”"). */
+    create: string;
+};
+export declare const DEFAULT_SELECT_LABELS: KapiSelectLabels;
+/** Select: búsqueda, grupos, modo múltiple con chips, teclado y typeahead de WAI-ARIA. */
+export declare const KapiSelect: <T = unknown, V extends string = string>(props: KapiSelectProps<T, V>) => import("react").JSX.Element;