@nubitio/ui 0.1.0

package/dist/index.mjs

@@ -0,0 +1,2332 @@
+import React, { createContext, forwardRef, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region packages/ui/Avatar.tsx
+/**
+* 8 semantic hues aligned with the Fluent / @nubitio design palette.
+* Expressed as HSL so the lightness can be adjusted for dark mode via CSS.
+* The color is set as --avatar-hue on the element and consumed in Avatar.scss.
+*/
+const AVATAR_HUES = [
+	218,
+	148,
+	262,
+	192,
+	36,
+	203,
+	22,
+	340
+];
+const NAMED_SIZES = {
+	xs: 20,
+	sm: 24,
+	md: 32,
+	lg: 40,
+	xl: 48
+};
+function getAvatarInitials(owner = "") {
+	const normalized = owner.trim();
+	if (!normalized) return "NA";
+	const words = normalized.split(/\s+/);
+	if (words.length >= 2) return `${words[0][0]}${words[1][0]}`.toUpperCase();
+	return normalized.slice(0, 2).toUpperCase();
+}
+function getAvatarHue(owner = "") {
+	let hash = 0;
+	for (let i = 0; i < owner.length; i++) hash = hash * 31 + owner.charCodeAt(i) & 268435455;
+	return AVATAR_HUES[Math.abs(hash) % AVATAR_HUES.length];
+}
+const Avatar = ({ owner = "", size, variant = "md", shape = "circle", alt, className }) => {
+	const px = size ?? NAMED_SIZES[variant];
+	const initials = getAvatarInitials(owner);
+	const hue = getAvatarHue(owner);
+	return /* @__PURE__ */ jsx("span", {
+		className: [
+			"nb-avatar",
+			shape === "square" && "nb-avatar--square",
+			className
+		].filter(Boolean).join(" "),
+		role: "img",
+		"aria-label": alt ?? (owner || "Avatar"),
+		style: {
+			width: px,
+			height: px,
+			fontSize: Math.round(px * .38),
+			"--avatar-hue": hue
+		},
+		children: initials
+	});
+};
+//#endregion
+//#region packages/ui/Button.tsx
+const cx$4 = (...values) => values.filter(Boolean).join(" ");
+const Button = ({ variant = "secondary", size = "md", fullWidth = false, icon, loading = false, className, children, disabled, ...props }) => /* @__PURE__ */ jsxs("button", {
+	...props,
+	type: props.type ?? "button",
+	disabled: disabled || loading,
+	"aria-busy": loading || void 0,
+	className: cx$4("nb-button", `nb-button--${variant}`, size === "sm" && "nb-button--sm", fullWidth && "nb-button--full", className),
+	children: [loading ? /* @__PURE__ */ jsx("span", {
+		className: "nb-button-spinner",
+		"aria-hidden": "true"
+	}) : icon ? /* @__PURE__ */ jsx("i", {
+		className: icon,
+		"aria-hidden": "true"
+	}) : null, children]
+});
+const IconButton = ({ icon, label, variant = "default", className, ...props }) => /* @__PURE__ */ jsx("button", {
+	...props,
+	type: props.type ?? "button",
+	"aria-label": props["aria-label"] ?? label,
+	title: props.title ?? label,
+	className: cx$4("nb-icon-button", variant === "danger" && "nb-icon-button--danger", className),
+	children: /* @__PURE__ */ jsx("i", {
+		className: icon,
+		"aria-hidden": "true"
+	})
+});
+//#endregion
+//#region packages/ui/UiStrings.tsx
+const EN_UI_STRINGS = {
+	close: "Close",
+	closeDialog: "Close dialog",
+	closePanel: "Close panel",
+	clearDate: "Clear date",
+	clearDateRange: "Clear date range",
+	openCalendar: "Open calendar",
+	selectDate: "Select date",
+	selectDateRange: "Select date range",
+	previousMonth: "Previous month",
+	nextMonth: "Next month",
+	previousYear: "Previous year",
+	nextYear: "Next year",
+	selectMonthAndYear: "Select month and year",
+	selectYear: "Select year",
+	clear: "Clear",
+	today: "Today",
+	cancel: "Cancel",
+	confirm: "Confirm",
+	back: "Back",
+	previousYears: "Previous years",
+	nextYears: "Next years"
+};
+const ES_UI_STRINGS = {
+	close: "Cerrar",
+	closeDialog: "Cerrar diálogo",
+	closePanel: "Cerrar panel",
+	clearDate: "Limpiar fecha",
+	clearDateRange: "Limpiar rango",
+	openCalendar: "Abrir calendario",
+	selectDate: "Seleccionar fecha",
+	selectDateRange: "Seleccionar rango de fechas",
+	previousMonth: "Mes anterior",
+	nextMonth: "Mes siguiente",
+	previousYear: "Año anterior",
+	nextYear: "Año siguiente",
+	selectMonthAndYear: "Seleccionar mes y año",
+	selectYear: "Seleccionar año",
+	clear: "Limpiar",
+	today: "Hoy",
+	cancel: "Cancelar",
+	confirm: "Confirmar",
+	back: "Volver",
+	previousYears: "Años anteriores",
+	nextYears: "Años siguientes"
+};
+const UiStringsContext = createContext(EN_UI_STRINGS);
+const UiStringsProvider = ({ strings, children }) => {
+	const value = useMemo(() => ({
+		...EN_UI_STRINGS,
+		...strings
+	}), [strings]);
+	return /* @__PURE__ */ jsx(UiStringsContext.Provider, {
+		value,
+		children
+	});
+};
+const useUiStrings = () => useContext(UiStringsContext);
+//#endregion
+//#region packages/ui/AppDialog.tsx
+const formatSize = (value) => {
+	if (value === void 0) return void 0;
+	return typeof value === "number" ? `${value}px` : value;
+};
+const joinClassNames = (...values) => values.filter(Boolean).join(" ");
+const AppDialog = ({ visible, open, title, onClose, children, footer, width, maxWidth, height, fullScreen = false, showCloseButton = true, closeLabel, scrimLabel, closeOnOutsideClick = true, closeOnEscape = true, restoreFocus = true, keepMounted = false, rootClassName, className, headerClassName, titleClassName, bodyClassName, footerClassName, role = "dialog" }) => {
+	const strings = useUiStrings();
+	const resolvedCloseLabel = closeLabel ?? strings.close;
+	const resolvedScrimLabel = scrimLabel ?? strings.closeDialog;
+	const isVisible = visible ?? open ?? false;
+	const titleId = useId();
+	const dialogRef = useRef(null);
+	const lastFocusedElementRef = useRef(null);
+	const restoreFocusRef = useRef(restoreFocus);
+	useEffect(() => {
+		restoreFocusRef.current = restoreFocus;
+	}, [restoreFocus]);
+	useEffect(() => {
+		if (!isVisible) return;
+		lastFocusedElementRef.current = document.activeElement;
+		window.setTimeout(() => {
+			(dialogRef.current?.querySelector("button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex=\"-1\"])"))?.focus();
+		});
+		return () => {
+			if (restoreFocusRef.current) lastFocusedElementRef.current?.focus?.();
+		};
+	}, [isVisible]);
+	useEffect(() => {
+		if (!isVisible || !closeOnEscape) return;
+		const handleKeyDown = (event) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				onClose();
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [
+		closeOnEscape,
+		onClose,
+		isVisible
+	]);
+	if (!isVisible && !keepMounted) return null;
+	return createPortal(/* @__PURE__ */ jsxs("div", {
+		className: joinClassNames("nb-dialog-root", rootClassName),
+		"aria-hidden": !isVisible,
+		style: {
+			pointerEvents: isVisible ? void 0 : "none",
+			visibility: isVisible ? void 0 : "hidden"
+		},
+		children: [/* @__PURE__ */ jsx("button", {
+			className: "nb-dialog__scrim",
+			type: "button",
+			"aria-label": resolvedScrimLabel,
+			onClick: closeOnOutsideClick ? onClose : void 0
+		}), /* @__PURE__ */ jsxs("div", {
+			className: joinClassNames("nb-dialog", fullScreen && "nb-dialog--fullscreen", className),
+			role,
+			"aria-modal": "true",
+			"aria-labelledby": titleId,
+			ref: dialogRef,
+			onKeyDownCapture: (event) => {
+				if (!closeOnEscape && event.key === "Escape") {
+					event.preventDefault();
+					event.stopPropagation();
+				}
+			},
+			style: {
+				width: formatSize(width),
+				maxWidth: formatSize(maxWidth),
+				height: formatSize(height)
+			},
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: joinClassNames("nb-dialog__header", headerClassName),
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: joinClassNames("nb-dialog__title", titleClassName),
+						id: titleId,
+						children: title
+					}), showCloseButton && /* @__PURE__ */ jsx(IconButton, {
+						className: "nb-dialog__close",
+						icon: "ph ph-x",
+						label: resolvedCloseLabel,
+						onClick: onClose
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: joinClassNames("nb-dialog__body", bodyClassName),
+					children
+				}),
+				footer && /* @__PURE__ */ jsx("div", {
+					className: joinClassNames("nb-dialog__footer", footerClassName),
+					children: footer
+				})
+			]
+		})]
+	}), document.body);
+};
+//#endregion
+//#region packages/ui/ConfirmDialog.tsx
+function ConfirmDialog({ open, title, message, onConfirm, onCancel, confirmLabel, cancelLabel, variant = "warning" }) {
+	const strings = useUiStrings();
+	const resolvedConfirmLabel = confirmLabel ?? strings.confirm;
+	return /* @__PURE__ */ jsx(AppDialog, {
+		open,
+		title,
+		onClose: onCancel,
+		maxWidth: 420,
+		role: "alertdialog",
+		footer: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+			variant: "secondary",
+			onClick: onCancel,
+			autoFocus: true,
+			children: cancelLabel ?? strings.cancel
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: variant === "danger" ? "danger" : "primary",
+			onClick: onConfirm,
+			children: resolvedConfirmLabel
+		})] }),
+		children: /* @__PURE__ */ jsx("p", {
+			className: "nb-confirm-dialog__message",
+			children: message
+		})
+	});
+}
+//#endregion
+//#region packages/ui/AppToolbar.tsx
+const AppToolbar = ({ title, additionalToolbarContent, showRefreshButton = true, onRefresh, icon, refreshLabel = "Refresh", children }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "view-wrapper view-wrapper-dashboard",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "nb-toolbar theme-dependent",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "nb-toolbar__start",
+					children: [icon && /* @__PURE__ */ jsx("i", {
+						className: icon,
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "toolbar-header",
+						children: title
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "nb-toolbar__center",
+					children: additionalToolbarContent
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "nb-toolbar__end",
+					children: showRefreshButton && /* @__PURE__ */ jsx(IconButton, {
+						icon: "ph ph-arrow-clockwise",
+						label: refreshLabel,
+						onClick: onRefresh
+					})
+				})
+			]
+		}), children]
+	});
+};
+//#endregion
+//#region packages/ui/Card.tsx
+const Card = ({ title, description, children }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "nb-card",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "nb-card__content content",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "header",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "title",
+					children: title
+				}), /* @__PURE__ */ jsx("div", {
+					className: "description",
+					children: description
+				})]
+			}), children]
+		})
+	});
+};
+//#endregion
+//#region packages/ui/FormControls.tsx
+const cx$3 = (...values) => values.filter(Boolean).join(" ");
+const FormField = ({ label, error, helpText, children, className, ...props }) => /* @__PURE__ */ jsxs("label", {
+	...props,
+	className: cx$3("nb-form-field", !!error && "nb-form-field--error", className),
+	children: [
+		label && /* @__PURE__ */ jsx("span", {
+			className: "nb-form-field__label",
+			children: label
+		}),
+		children,
+		error ? /* @__PURE__ */ jsx("span", {
+			className: "nb-form-field__error",
+			role: "alert",
+			children: error
+		}) : helpText ? /* @__PURE__ */ jsx("span", {
+			className: "nb-form-field__help",
+			children: helpText
+		}) : null
+	]
+});
+const TextField = forwardRef(function TextField({ className, invalid, ...props }, ref) {
+	return /* @__PURE__ */ jsx("input", {
+		...props,
+		ref,
+		className: cx$3("nb-input", invalid && "nb-input--invalid", className)
+	});
+});
+const SelectField = forwardRef(function SelectField({ className, invalid, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx("select", {
+		...props,
+		ref,
+		className: cx$3("nb-input", "nb-select", invalid && "nb-input--invalid", className),
+		children
+	});
+});
+const TextAreaField = forwardRef(function TextAreaField({ className, invalid, ...props }, ref) {
+	return /* @__PURE__ */ jsx("textarea", {
+		...props,
+		ref,
+		className: cx$3("nb-input", "nb-textarea", invalid && "nb-input--invalid", className)
+	});
+});
+//#endregion
+//#region packages/ui/AppDropdown.tsx
+function cx$2(...values) {
+	return values.filter(Boolean).join(" ");
+}
+function normalizeIcon(icon) {
+	if (!icon) return void 0;
+	if (icon.startsWith("ph ")) return icon;
+	if (icon.startsWith("ph-")) return `ph ${icon}`;
+	return `ph ph-${icon}`;
+}
+function getMenuStyle(containerRef, menuMinWidth = 72) {
+	if (!containerRef.current) return {
+		position: "fixed",
+		visibility: "hidden",
+		margin: 0
+	};
+	const rect = (containerRef.current.querySelector(".nb-dropdown__trigger") ?? containerRef.current).getBoundingClientRect();
+	const menuWidth = Math.max(rect.width, menuMinWidth);
+	const left = Math.max(8, Math.min(rect.left, window.innerWidth - menuWidth - 8));
+	const spaceBelow = window.innerHeight - rect.bottom;
+	const spaceAbove = rect.top;
+	if (spaceBelow < 250 && spaceAbove > spaceBelow) return {
+		position: "fixed",
+		left: `${left}px`,
+		width: `${menuWidth}px`,
+		bottom: `${window.innerHeight - rect.top + 4}px`,
+		top: "auto",
+		margin: 0,
+		zIndex: 9999,
+		visibility: "visible"
+	};
+	return {
+		position: "fixed",
+		left: `${left}px`,
+		width: `${menuWidth}px`,
+		top: `${rect.bottom + 4}px`,
+		bottom: "auto",
+		margin: 0,
+		zIndex: 9999,
+		visibility: "visible"
+	};
+}
+function AppDropdown({ id: idProp, label, icon, value, options, onChange, disabled = false, placeholder = "Seleccionar…", variant = "form", className, showFieldLabel = variant === "form", menuMinWidth, error, helpText }) {
+	const generatedId = useId();
+	const id = idProp ?? generatedId;
+	const [open, setOpen] = useState(false);
+	const containerRef = useRef(null);
+	const menuRef = useRef(null);
+	const [menuStyle, setMenuStyle] = useState({
+		position: "fixed",
+		visibility: "hidden",
+		margin: 0
+	});
+	const selected = options.find((option) => option.value === value);
+	const computeMenuStyle = useCallback(() => getMenuStyle(containerRef, menuMinWidth), [menuMinWidth]);
+	useEffect(() => {
+		if (!open) return;
+		const handler = (e) => {
+			const target = e.target;
+			if (!containerRef.current?.contains(target) && !menuRef.current?.contains(target)) setOpen(false);
+		};
+		document.addEventListener("mousedown", handler);
+		return () => document.removeEventListener("mousedown", handler);
+	}, [open]);
+	useLayoutEffect(() => {
+		if (!open) return;
+		const update = () => {
+			if (!containerRef.current) return;
+			const rect = containerRef.current.getBoundingClientRect();
+			if (rect.top >= window.innerHeight || rect.bottom <= 0) {
+				setOpen(false);
+				return;
+			}
+			setMenuStyle(computeMenuStyle());
+		};
+		update();
+		window.addEventListener("resize", update);
+		window.addEventListener("scroll", update, {
+			capture: true,
+			passive: true
+		});
+		return () => {
+			window.removeEventListener("resize", update);
+			window.removeEventListener("scroll", update, { capture: true });
+		};
+	}, [open, computeMenuStyle]);
+	const openMenu = useCallback(() => {
+		setMenuStyle(computeMenuStyle());
+		setOpen(true);
+	}, [computeMenuStyle]);
+	const control = /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: cx$2("nb-dropdown", `nb-dropdown--${variant}`, open && "nb-dropdown--open", disabled && "nb-dropdown--disabled", className),
+		role: "group",
+		"aria-labelledby": label ? `${id}-label` : void 0,
+		children: [
+			variant === "toolbar" && label && /* @__PURE__ */ jsxs("span", {
+				className: "nb-dropdown__toolbar-label",
+				id: `${id}-label`,
+				children: [icon && /* @__PURE__ */ jsx("i", {
+					className: normalizeIcon(icon),
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ jsx("span", { children: label })]
+			}),
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "nb-dropdown__trigger",
+				"aria-haspopup": "listbox",
+				"aria-expanded": open,
+				"aria-labelledby": label ? `${id}-label ${id}-value` : `${id}-value`,
+				disabled,
+				onClick: () => open ? setOpen(false) : openMenu(),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "nb-dropdown__value",
+					id: `${id}-value`,
+					children: selected?.selectedLabel ?? selected?.label ?? placeholder
+				}), /* @__PURE__ */ jsx("i", {
+					className: "ph ph-caret-down nb-dropdown__caret",
+					"aria-hidden": "true"
+				})]
+			}),
+			open && !disabled && createPortal(/* @__PURE__ */ jsx("ul", {
+				ref: menuRef,
+				className: cx$2("nb-dropdown__menu", `nb-dropdown__menu--${variant}`),
+				role: "listbox",
+				"aria-labelledby": label ? `${id}-label` : void 0,
+				style: menuStyle,
+				children: options.map((option) => {
+					const isActive = option.value === value;
+					return /* @__PURE__ */ jsx("li", {
+						role: "presentation",
+						children: /* @__PURE__ */ jsx("button", {
+							type: "button",
+							role: "option",
+							"aria-selected": isActive,
+							disabled: option.disabled,
+							className: cx$2("nb-dropdown__option", isActive && "nb-dropdown__option--active"),
+							onClick: () => {
+								if (option.disabled) return;
+								onChange(option.value);
+								setOpen(false);
+							},
+							children: /* @__PURE__ */ jsxs("span", {
+								className: "nb-dropdown__option-content",
+								children: [option.iconText && /* @__PURE__ */ jsx("span", {
+									className: "nb-dropdown__option-icon",
+									"aria-hidden": "true",
+									children: option.iconText
+								}), /* @__PURE__ */ jsx("span", { children: option.label })]
+							})
+						})
+					}, option.value);
+				})
+			}), document.body)
+		]
+	});
+	if (!showFieldLabel || variant === "toolbar") return control;
+	return /* @__PURE__ */ jsxs("label", {
+		className: cx$2("nb-form-field", !!error && "nb-form-field--error"),
+		htmlFor: id,
+		children: [
+			label && /* @__PURE__ */ jsx("span", {
+				className: "nb-form-field__label",
+				id: `${id}-label`,
+				children: label
+			}),
+			control,
+			error ? /* @__PURE__ */ jsx("span", {
+				className: "nb-form-field__error",
+				role: "alert",
+				children: error
+			}) : helpText ? /* @__PURE__ */ jsx("span", {
+				className: "nb-form-field__help",
+				children: helpText
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region packages/ui/theme/ThemeProvider.tsx
+const ThemeContext = React.createContext(null);
+function useTheme() {
+	const ctx = useContext(ThemeContext);
+	if (!ctx) throw new Error("useTheme must be used inside ThemeProvider");
+	return ctx;
+}
+const themeModes = [
+	"light",
+	"dark",
+	"auto"
+];
+const themeValues = ["light", "dark"];
+function getNextThemeMode(mode) {
+	return themeModes[(themeModes.indexOf(mode) + 1) % themeModes.length];
+}
+function getSystemTheme() {
+	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function resolveTheme(mode, systemTheme = getSystemTheme()) {
+	if (mode !== "auto") return mode;
+	return systemTheme;
+}
+const THEME_VERSION = typeof __THEME_VERSION__ !== "undefined" ? __THEME_VERSION__ : String(Date.now());
+function setThemeToDOM(href) {
+	const versioned = `${href}?v=${THEME_VERSION}`;
+	return new Promise((resolve) => {
+		const id = "theme-link";
+		let link = document.getElementById(id);
+		if (link) {
+			if (link.getAttribute("data-theme-href") === href) {
+				resolve();
+				return;
+			}
+			link.href = versioned;
+			link.setAttribute("data-theme-href", href);
+		} else {
+			link = document.createElement("link");
+			link.id = id;
+			link.rel = "stylesheet";
+			link.href = versioned;
+			link.setAttribute("data-theme-href", href);
+			document.head.appendChild(link);
+		}
+		link.onload = () => resolve();
+	});
+}
+function applyThemeAttributes(theme, themePrefix) {
+	const root = document.documentElement;
+	root.dataset.theme = theme;
+	themeValues.forEach((value) => root.classList.remove(`${themePrefix}${value}`));
+	root.classList.add(`${themePrefix}${theme}`);
+}
+const ThemeProvider = ({ storageKey = "nb-theme", themePrefix = "nb-theme-", basePath = "/themes/", children }) => {
+	const getPersistedMode = () => {
+		const persisted = window.localStorage.getItem(storageKey);
+		return persisted && themeModes.includes(persisted) ? persisted : "auto";
+	};
+	const [mode, setMode] = useState(getPersistedMode);
+	const [systemTheme, setSystemTheme] = useState(getSystemTheme);
+	const [isLoaded, setIsLoaded] = useState(false);
+	const theme = useMemo(() => resolveTheme(mode, systemTheme), [mode, systemTheme]);
+	useEffect(() => {
+		applyThemeAttributes(theme, themePrefix);
+		setThemeToDOM(`${basePath}${themePrefix}${theme}.css`).then(() => setIsLoaded(true));
+	}, [
+		theme,
+		basePath,
+		themePrefix
+	]);
+	useEffect(() => {
+		if (!isLoaded) return;
+		const meta = document.querySelector("meta[name=\"theme-color\"]");
+		if (meta) {
+			const baseBg = getComputedStyle(document.body).getPropertyValue("--base-bg").trim();
+			meta.setAttribute("content", baseBg || (theme === "dark" ? "#000000" : "#ffffff"));
+		}
+	}, [theme, isLoaded]);
+	useEffect(() => {
+		const mq = window.matchMedia("(prefers-color-scheme: dark)");
+		const apply = () => setSystemTheme(mq.matches ? "dark" : "light");
+		mq.addEventListener("change", apply);
+		return () => mq.removeEventListener("change", apply);
+	}, []);
+	const switchTheme = useCallback(() => {
+		setMode((prev) => {
+			const next = getNextThemeMode(prev);
+			window.localStorage.setItem(storageKey, next);
+			return next;
+		});
+	}, [storageKey]);
+	const value = useMemo(() => ({
+		theme,
+		mode,
+		switchTheme,
+		isLoaded
+	}), [
+		theme,
+		mode,
+		switchTheme,
+		isLoaded
+	]);
+	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+		value,
+		children
+	});
+};
+//#endregion
+//#region packages/ui/theme/ThemeSwitcher.tsx
+const iconByMode = {
+	light: "ph ph-sun",
+	dark: "ph ph-moon",
+	auto: "ph ph-desktop"
+};
+const labelByMode = {
+	light: "Theme: Light",
+	dark: "Theme: Dark",
+	auto: "Theme: System"
+};
+const ThemeSwitcher = ({ labelByMode: overrides } = {}) => {
+	const { mode, switchTheme } = useTheme();
+	const label = {
+		...labelByMode,
+		...overrides
+	}[mode];
+	return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(IconButton, {
+		className: "theme-button",
+		icon: iconByMode[mode],
+		label,
+		onClick: switchTheme
+	}) });
+};
+//#endregion
+//#region packages/ui/theme/DensityProvider.tsx
+const DensityContext = createContext(null);
+function useDensity() {
+	const ctx = useContext(DensityContext);
+	if (!ctx) throw new Error("useDensity must be used inside DensityProvider");
+	return ctx;
+}
+const STORAGE_KEY$1 = "app-density";
+const DensityProvider = ({ children }) => {
+	const [density, setDensity] = useState(() => {
+		return localStorage.getItem(STORAGE_KEY$1) === "compact" ? "compact" : "normal";
+	});
+	useEffect(() => {
+		if (density === "compact") document.documentElement.dataset.density = "compact";
+		else delete document.documentElement.dataset.density;
+		localStorage.setItem(STORAGE_KEY$1, density);
+	}, [density]);
+	const toggleDensity = useCallback(() => {
+		setDensity((prev) => prev === "normal" ? "compact" : "normal");
+	}, []);
+	return /* @__PURE__ */ jsx(DensityContext.Provider, {
+		value: {
+			density,
+			toggleDensity
+		},
+		children
+	});
+};
+//#endregion
+//#region packages/ui/theme/useAccentColor.ts
+const ACCENT_PRESETS = [
+	{
+		label: "Azure",
+		value: "#1a6fd4"
+	},
+	{
+		label: "Teal",
+		value: "#0d9488"
+	},
+	{
+		label: "Indigo",
+		value: "#4f46e5"
+	},
+	{
+		label: "Slate",
+		value: "#475569"
+	},
+	{
+		label: "Violet",
+		value: "#7c3aed"
+	},
+	{
+		label: "Rose",
+		value: "#e11d48"
+	},
+	{
+		label: "Amber",
+		value: "#d97706"
+	}
+];
+const STORAGE_KEY = "app-accent-color";
+const DEFAULT_ACCENT = "#1a6fd4";
+function applyAccent(color) {
+	document.documentElement.style.setProperty("--accent-color", color);
+}
+function useAccentColor() {
+	const [accent, setAccent] = useState(() => {
+		return localStorage.getItem(STORAGE_KEY) ?? DEFAULT_ACCENT;
+	});
+	useEffect(() => {
+		if (localStorage.getItem(STORAGE_KEY)) applyAccent(accent);
+	}, [accent]);
+	return {
+		accent,
+		changeAccent: useCallback((color) => {
+			localStorage.setItem(STORAGE_KEY, color);
+			setAccent(color);
+		}, []),
+		presets: ACCENT_PRESETS
+	};
+}
+//#endregion
+//#region packages/ui/SettingsPanel.tsx
+const SettingsPanel = ({ onClose: _onClose }) => {
+	const { density, toggleDensity } = useDensity();
+	const { accent, changeAccent, presets } = useAccentColor();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "nb-settings-panel",
+		role: "menu",
+		"aria-label": "Display settings",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "nb-settings-panel__heading",
+				children: "Color de acento"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "nb-settings-panel__swatches",
+				role: "group",
+				"aria-label": "Colores de acento",
+				children: presets.map((preset) => /* @__PURE__ */ jsx("button", {
+					className: "nb-settings-panel__swatch",
+					type: "button",
+					"aria-label": preset.label,
+					"aria-pressed": accent === preset.value,
+					title: preset.label,
+					style: {
+						background: preset.value,
+						color: preset.value
+					},
+					onClick: () => changeAccent(preset.value)
+				}, preset.value))
+			}),
+			/* @__PURE__ */ jsx("hr", { className: "nb-settings-panel__divider" }),
+			/* @__PURE__ */ jsx("p", {
+				className: "nb-settings-panel__heading",
+				children: "Densidad"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "nb-settings-panel__density",
+				role: "group",
+				"aria-label": "Densidad de interfaz",
+				children: [/* @__PURE__ */ jsxs("button", {
+					className: "nb-settings-panel__density-btn",
+					type: "button",
+					"aria-pressed": density === "normal",
+					onClick: () => density !== "normal" && toggleDensity(),
+					children: [/* @__PURE__ */ jsx("i", {
+						className: "ph ph-rows",
+						"aria-hidden": "true"
+					}), "Normal"]
+				}), /* @__PURE__ */ jsxs("button", {
+					className: "nb-settings-panel__density-btn",
+					type: "button",
+					"aria-pressed": density === "compact",
+					onClick: () => density !== "compact" && toggleDensity(),
+					children: [/* @__PURE__ */ jsx("i", {
+						className: "ph ph-rows-plus-bottom",
+						"aria-hidden": "true"
+					}), "Compact"]
+				})]
+			})
+		]
+	});
+};
+//#endregion
+//#region packages/ui/Badge.tsx
+const Badge = ({ variant = "primary", size = "md", outlined = false, pill = true, dot = false, children, className }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: [
+			"nb-badge",
+			`nb-badge--${variant}`,
+			size === "sm" && "nb-badge--sm",
+			outlined && "nb-badge--outlined",
+			pill && "nb-badge--pill",
+			dot && "nb-badge--dot",
+			className
+		].filter(Boolean).join(" "),
+		children: dot ? null : children
+	});
+};
+//#endregion
+//#region packages/ui/Skeleton.tsx
+const fmtSize = (v) => v === void 0 ? void 0 : typeof v === "number" ? `${v}px` : v;
+const Skeleton = ({ variant = "rect", width, height, lines = 1, className }) => {
+	const base = [
+		"nb-skeleton",
+		`nb-skeleton--${variant}`,
+		className
+	].filter(Boolean).join(" ");
+	if (variant === "text" && lines > 1) return /* @__PURE__ */ jsx("div", {
+		className: "nb-skeleton-lines",
+		children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx("span", {
+			className: base,
+			style: { width: i === lines - 1 ? "70%" : fmtSize(width) ?? "100%" },
+			"aria-hidden": "true"
+		}, i))
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: base,
+		style: {
+			width: fmtSize(width),
+			height: fmtSize(height)
+		},
+		"aria-hidden": "true"
+	});
+};
+//#endregion
+//#region packages/ui/EmptyState.tsx
+const DEFAULT_ICONS = {
+	default: "folder-open",
+	danger: "warning-circle",
+	warning: "warning",
+	success: "check-circle"
+};
+const EmptyState = ({ icon, variant = "default", title, description, action, size = "md", fill = false, className }) => {
+	const iconName = icon ?? DEFAULT_ICONS[variant];
+	return /* @__PURE__ */ jsxs("div", {
+		className: [
+			"nb-empty-state",
+			`nb-empty-state--${variant}`,
+			`nb-empty-state--${size}`,
+			fill && "nb-empty-state--fill",
+			className
+		].filter(Boolean).join(" "),
+		role: "status",
+		"aria-live": "polite",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "nb-empty-state__icon-wrap",
+				children: /* @__PURE__ */ jsx("i", {
+					className: `ph ph-${iconName}`,
+					"aria-hidden": "true"
+				})
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "nb-empty-state__title",
+				children: title
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: "nb-empty-state__description",
+				children: description
+			}),
+			action && /* @__PURE__ */ jsx("div", {
+				className: "nb-empty-state__action",
+				children: action
+			})
+		]
+	});
+};
+//#endregion
+//#region packages/ui/Chip.tsx
+/**
+* Pill-shaped filter/tag chip. Stateless — caller controls `active`.
+* Use for category filters, tag lists, and multi-select inputs.
+*/
+const Chip = ({ label, active = false, count, icon, size = "md", disabled = false, onClick, className = "" }) => {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		role: "checkbox",
+		"aria-checked": active,
+		"aria-pressed": active,
+		disabled,
+		className: `nb-chip${size !== "md" ? ` nb-chip--${size}` : ""}${active ? " is-active" : ""}${className ? ` ${className}` : ""}`,
+		onClick,
+		children: [
+			icon && /* @__PURE__ */ jsx("i", {
+				className: icon,
+				"aria-hidden": "true"
+			}),
+			label,
+			count !== void 0 && /* @__PURE__ */ jsx("span", {
+				className: "nb-chip__count",
+				children: count
+			})
+		]
+	});
+};
+//#endregion
+//#region packages/ui/Toggle.tsx
+/**
+* Accessible toggle switch. Always controlled — pass `checked` + `onChange`.
+* Renders a visually-hidden `<input type="checkbox">` with a custom track.
+*
+* With `label`: wraps in `.nb-toggle-row` for a label ↔ toggle layout.
+* Without `label`: renders bare `.nb-toggle`.
+*/
+const Toggle = ({ checked, onChange, label, size = "md", disabled = false, "aria-label": ariaLabel, className = "" }) => {
+	const id = useId();
+	const input = /* @__PURE__ */ jsxs("span", {
+		className: `nb-toggle${size === "sm" ? " nb-toggle--sm" : ""}${className ? ` ${className}` : ""}`,
+		children: [/* @__PURE__ */ jsx("input", {
+			id,
+			type: "checkbox",
+			checked,
+			disabled,
+			"aria-label": !label ? ariaLabel : void 0,
+			onChange: (e) => onChange(e.target.checked)
+		}), /* @__PURE__ */ jsx("span", {
+			className: "nb-toggle__track",
+			"aria-hidden": "true"
+		})]
+	});
+	if (!label) return input;
+	return /* @__PURE__ */ jsxs("label", {
+		htmlFor: id,
+		className: "nb-toggle-row",
+		children: [/* @__PURE__ */ jsx("span", { children: label }), input]
+	});
+};
+//#endregion
+//#region packages/ui/ContextMenu.tsx
+/**
+* Three-dot overflow context menu.
+* Replaces the legacy `shared/ui/library/card-menu/CardMenu` component.
+*
+* Features over CardMenu:
+* - `danger` variant items
+* - `separator` support
+* - `icon` per item
+* - Custom trigger slot
+* - Left/right alignment
+* - Click-outside + Escape to close
+*/
+const ContextMenu = ({ items, visible = true, trigger, triggerLabel = "Opciones", align = "right", className = "" }) => {
+	const [open, setOpen] = useState(false);
+	const containerRef = useRef(null);
+	useEffect(() => {
+		if (!open) return;
+		const onMouseDown = (e) => {
+			if (containerRef.current && !containerRef.current.contains(e.target)) setOpen(false);
+		};
+		const onKeyDown = (e) => {
+			if (e.key === "Escape") setOpen(false);
+		};
+		document.addEventListener("mousedown", onMouseDown);
+		document.addEventListener("keydown", onKeyDown);
+		return () => {
+			document.removeEventListener("mousedown", onMouseDown);
+			document.removeEventListener("keydown", onKeyDown);
+		};
+	}, [open]);
+	if (!visible) return null;
+	const dropdownStyle = align === "left" ? {
+		right: "auto",
+		left: 0
+	} : {};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: `nb-context-menu${className ? ` ${className}` : ""}`,
+		children: [trigger ? /* @__PURE__ */ jsx("span", {
+			onClick: () => setOpen((v) => !v),
+			children: trigger
+		}) : /* @__PURE__ */ jsx(IconButton, {
+			icon: "ph ph-dots-three",
+			label: triggerLabel,
+			"aria-haspopup": "menu",
+			"aria-expanded": open,
+			onClick: () => setOpen((v) => !v)
+		}), open && /* @__PURE__ */ jsx("ul", {
+			className: "nb-context-menu__dropdown",
+			role: "menu",
+			style: dropdownStyle,
+			children: items.map((item, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [item.separator && /* @__PURE__ */ jsx("li", {
+				role: "none",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx("div", { className: "nb-context-menu__separator" })
+			}), /* @__PURE__ */ jsx("li", {
+				role: "none",
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					role: "menuitem",
+					disabled: item.disabled,
+					"aria-disabled": item.disabled,
+					className: `nb-context-menu__item${item.danger ? " nb-context-menu__item--danger" : ""}`,
+					onClick: () => {
+						setOpen(false);
+						item.onClick?.();
+					},
+					children: [item.icon && /* @__PURE__ */ jsx("i", {
+						className: item.icon,
+						"aria-hidden": "true"
+					}), item.label]
+				})
+			})] }, idx))
+		})]
+	});
+};
+//#endregion
+//#region packages/ui/StatCard.tsx
+/**
+* General-purpose analytics / dashboard card.
+* Replaces the legacy `shared/ui/card-analytics/CardAnalytics` component.
+* Uses `ContextMenu` from `@nubitio/ui` for the overflow menu.
+*/
+const StatCard = ({ title, headerExtra, menuVisible = true, menuItems = [{ label: "Configure" }, { label: "Remove" }], isLoading = false, className = "", children }) => /* @__PURE__ */ jsxs("div", {
+	className: `nb-stat-card${className ? ` ${className}` : ""}`,
+	children: [/* @__PURE__ */ jsxs("div", {
+		className: "nb-stat-card__header",
+		children: [/* @__PURE__ */ jsxs("div", { children: [title && /* @__PURE__ */ jsx("span", {
+			className: "nb-stat-card__title",
+			children: title
+		}), headerExtra && /* @__PURE__ */ jsx("span", {
+			className: "nb-stat-card__extra",
+			children: headerExtra
+		})] }), menuVisible && /* @__PURE__ */ jsx("span", {
+			className: "nb-stat-card__menu",
+			children: /* @__PURE__ */ jsx(ContextMenu, { items: menuItems })
+		})]
+	}), !isLoading && /* @__PURE__ */ jsx("div", {
+		className: "nb-stat-card__body",
+		children
+	})]
+});
+//#endregion
+//#region packages/ui/CollapsibleSection.tsx
+/**
+* Accessible collapsible section with a labelled header trigger.
+*
+* - Uses `aria-expanded` and `aria-controls` for screen reader support.
+* - The body is conditionally rendered (not just hidden) to avoid mounting
+*   heavy children before they are needed. Pass `keepMounted` if you need
+*   the body always in the DOM.
+*/
+const CollapsibleSection = ({ label, icon, open, onToggle, children, trailing, className, bodyClassName, "data-testid": testId }) => {
+	const bodyId = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		className: [
+			"nb-collapsible",
+			open && "nb-collapsible--open",
+			className
+		].filter(Boolean).join(" "),
+		"data-testid": testId,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "nb-collapsible__header",
+			children: [/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "nb-collapsible__trigger",
+				"aria-expanded": open,
+				"aria-controls": bodyId,
+				onClick: onToggle,
+				children: [
+					icon && /* @__PURE__ */ jsx("i", {
+						className: icon,
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "nb-collapsible__label",
+						children: label
+					}),
+					/* @__PURE__ */ jsx("i", {
+						className: "ph ph-caret-down nb-collapsible__chevron",
+						"aria-hidden": "true"
+					})
+				]
+			}), trailing && /* @__PURE__ */ jsx("div", {
+				className: "nb-collapsible__trailing",
+				children: trailing
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			id: bodyId,
+			className: ["nb-collapsible__body", bodyClassName].filter(Boolean).join(" "),
+			role: "region",
+			"aria-labelledby": void 0,
+			hidden: !open,
+			children
+		})]
+	});
+};
+//#endregion
+//#region packages/ui/DatePicker.tsx
+const cx$1 = (...values) => values.filter(Boolean).join(" ");
+const ISO_DATE_RE$1 = /^\d{4}-\d{2}-\d{2}$/;
+const getLocale$1 = (override) => override || document.documentElement.lang || navigator.language || "en-US";
+const pad$1 = (value) => String(value).padStart(2, "0");
+const toIsoDate$1 = (date) => `${date.getFullYear()}-${pad$1(date.getMonth() + 1)}-${pad$1(date.getDate())}`;
+const parseIsoDate$1 = (value) => {
+	if (!value || !ISO_DATE_RE$1.test(value)) return null;
+	const [year, month, day] = value.split("-").map(Number);
+	const date = new Date(year, month - 1, day);
+	if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) return null;
+	return date;
+};
+const startOfMonth$1 = (date) => new Date(date.getFullYear(), date.getMonth(), 1);
+const addMonths$1 = (date, months) => new Date(date.getFullYear(), date.getMonth() + months, 1);
+const formatDisplayDate$1 = (value, locale) => {
+	const date = parseIsoDate$1(value);
+	if (!date) return "";
+	return new Intl.DateTimeFormat(getLocale$1(locale), {
+		day: "2-digit",
+		month: "2-digit",
+		year: "numeric"
+	}).format(date);
+};
+const formatMonthLabel$1 = (date, locale) => new Intl.DateTimeFormat(getLocale$1(locale), {
+	month: "long",
+	year: "numeric"
+}).format(date);
+/**
+* Locale-aware first day of week.
+* Uses Intl.Locale.weekInfo (Chrome 99+, FF 126+, Safari 17+) with fallback heuristic.
+*/
+const getFirstDayOfWeek = (locale) => {
+	try {
+		const info = new Intl.Locale(getLocale$1(locale)).weekInfo;
+		if (info && typeof info.firstDay === "number") return info.firstDay === 7 ? 0 : info.firstDay;
+	} catch {}
+	const country = (getLocale$1(locale).split("-")[1] ?? "").toUpperCase();
+	return [
+		"US",
+		"CA",
+		"MX",
+		"CN",
+		"JP",
+		"KR",
+		"SA",
+		"EG",
+		"IL",
+		"BR"
+	].includes(country) ? 0 : 1;
+};
+const buildCalendarDays$1 = (month, min, max, locale) => {
+	const first = startOfMonth$1(month);
+	const firstDayOfWeek = getFirstDayOfWeek(locale);
+	const offset = (first.getDay() - firstDayOfWeek + 7) % 7;
+	const minDate = parseIsoDate$1(min);
+	const maxDate = parseIsoDate$1(max);
+	const start = new Date(first);
+	start.setDate(first.getDate() - offset);
+	return Array.from({ length: 42 }, (_, i) => {
+		const date = new Date(start);
+		date.setDate(start.getDate() + i);
+		return {
+			date,
+			iso: toIsoDate$1(date),
+			inCurrentMonth: date.getMonth() === month.getMonth(),
+			disabled: Boolean(minDate && date < minDate || maxDate && date > maxDate)
+		};
+	});
+};
+const isIsoDateDisabled = (iso, min, max) => {
+	const date = parseIsoDate$1(iso);
+	if (!date) return true;
+	const minDate = parseIsoDate$1(min);
+	const maxDate = parseIsoDate$1(max);
+	return Boolean(minDate && date < minDate || maxDate && date > maxDate);
+};
+const weekDayLabels = (locale) => {
+	const firstDayOfWeek = getFirstDayOfWeek(locale);
+	const anchor = new Date(2026, 5, 7);
+	const formatter = new Intl.DateTimeFormat(getLocale$1(locale), { weekday: "narrow" });
+	return Array.from({ length: 7 }, (_, i) => {
+		const date = new Date(anchor);
+		date.setDate(anchor.getDate() + (firstDayOfWeek + i) % 7);
+		return formatter.format(date);
+	});
+};
+/** Short month labels (Jan, Feb, …) — capitalized for display. */
+const getMonthLabels = (locale) => {
+	const formatter = new Intl.DateTimeFormat(getLocale$1(locale), { month: "short" });
+	return Array.from({ length: 12 }, (_, i) => {
+		const label = formatter.format(new Date(2024, i, 1));
+		return label.charAt(0).toUpperCase() + label.slice(1).replace(".", "");
+	});
+};
+/** Year range: 12-year block containing the given year. */
+const getYearRangeStart = (year) => Math.floor(year / 12) * 12;
+/**
+* Applies dd/mm/yyyy mask.
+* Auto-inserts trailing slash when adding the 2nd or 4th digit.
+* Does NOT add trailing slash when the user is deleting.
+*/
+const applyDateMask = (rawValue, prevValue) => {
+	const digits = rawValue.replace(/\D/g, "").slice(0, 8);
+	const prevDigits = prevValue.replace(/\D/g, "");
+	const isAdding = digits.length > prevDigits.length;
+	if (digits.length === 0) return "";
+	let result = digits.slice(0, 2);
+	if (digits.length > 2) result += "/" + digits.slice(2, 4);
+	if (digits.length > 4) result += "/" + digits.slice(4, 8);
+	if (isAdding && (digits.length === 2 || digits.length === 4)) result += "/";
+	return result;
+};
+/**
+* Parses dd/mm/yyyy or ISO yyyy-mm-dd to ISO string.
+* Returns null if not a valid date.
+*/
+const parseDisplayDate = (text, locale) => {
+	const match = text.match(/^(\d{1,2})[/-](\d{1,2})[/-](\d{4})$/);
+	if (match) {
+		const [, a, b, year] = match;
+		const [dd, mm] = (getLocale$1(locale).split("-")[1] ?? "").toUpperCase() === "US" ? [b, a] : [a, b];
+		const iso = `${year}-${mm.padStart(2, "0")}-${dd.padStart(2, "0")}`;
+		return parseIsoDate$1(iso) ? iso : null;
+	}
+	if (ISO_DATE_RE$1.test(text)) return parseIsoDate$1(text) ? text : null;
+	return null;
+};
+const DatePicker = forwardRef(function DatePicker({ id, name, value, placeholder = "dd/mm/yyyy", disabled = false, readOnly = false, required = false, invalid = false, clearable = true, locale, min, max, className, ariaLabel, onChange, onBlur }, ref) {
+	const generatedId = useId();
+	const inputId = id ?? generatedId;
+	const strings = useUiStrings();
+	const selectedDate = parseIsoDate$1(value);
+	const resolvedLocale = getLocale$1(locale);
+	const displayValue = formatDisplayDate$1(value, resolvedLocale);
+	const [open, setOpen] = useState(false);
+	const [viewMode, setViewMode] = useState("days");
+	const [month, setMonth] = useState(() => startOfMonth$1(selectedDate ?? /* @__PURE__ */ new Date()));
+	const [yearRangeStart, setYearRangeStart] = useState(() => getYearRangeStart((/* @__PURE__ */ new Date()).getFullYear()));
+	const [panelStyle, setPanelStyle] = useState({});
+	const [focusedIso, setFocusedIso] = useState(null);
+	const [inputText, setInputText] = useState("");
+	const [isEditing, setIsEditing] = useState(false);
+	const rootRef = useRef(null);
+	const inputRef = useRef(null);
+	const triggerRef = useRef(null);
+	const panelRef = useRef(null);
+	const days = useMemo(() => buildCalendarDays$1(month, min, max, resolvedLocale), [
+		max,
+		min,
+		month,
+		resolvedLocale
+	]);
+	const weekdayLabels = useMemo(() => weekDayLabels(resolvedLocale), [resolvedLocale]);
+	const monthLabels = useMemo(() => getMonthLabels(resolvedLocale), [resolvedLocale]);
+	const selectedIso = selectedDate ? toIsoDate$1(selectedDate) : "";
+	useEffect(() => {
+		if (selectedDate) setMonth(startOfMonth$1(selectedDate));
+	}, [value]);
+	useEffect(() => {
+		if (!open) {
+			setFocusedIso(null);
+			setViewMode("days");
+			return;
+		}
+		const updatePosition = () => {
+			const rect = triggerRef.current?.getBoundingClientRect();
+			if (!rect) return;
+			const panelWidth = panelRef.current?.offsetWidth ?? 296;
+			const left = Math.min(Math.max(8, rect.left), window.innerWidth - panelWidth - 8);
+			const top = Math.min(rect.bottom + 6, window.innerHeight - 380);
+			setPanelStyle({
+				left,
+				top: Math.max(8, top)
+			});
+		};
+		updatePosition();
+		window.addEventListener("resize", updatePosition);
+		window.addEventListener("scroll", updatePosition, true);
+		return () => {
+			window.removeEventListener("resize", updatePosition);
+			window.removeEventListener("scroll", updatePosition, true);
+		};
+	}, [open]);
+	useEffect(() => {
+		if (!open) return;
+		const handlePointerDown = (e) => {
+			const target = e.target;
+			if (rootRef.current?.contains(target) || panelRef.current?.contains(target)) return;
+			setOpen(false);
+		};
+		const handleKeyDown = (e) => {
+			if (e.key === "Escape") {
+				e.preventDefault();
+				setOpen(false);
+				inputRef.current?.focus();
+			}
+		};
+		document.addEventListener("pointerdown", handlePointerDown);
+		document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			document.removeEventListener("pointerdown", handlePointerDown);
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [open]);
+	useEffect(() => {
+		if (!open) return;
+		const initialIso = selectedDate ? toIsoDate$1(selectedDate) : toIsoDate$1(/* @__PURE__ */ new Date());
+		setFocusedIso(initialIso);
+		window.setTimeout(() => {
+			panelRef.current?.querySelector(`[data-iso="${initialIso}"]`)?.focus();
+		}, 0);
+	}, [open]);
+	const commitValue = useCallback((nextValue) => {
+		onChange?.(nextValue);
+		setOpen(false);
+		setIsEditing(false);
+		setInputText("");
+		window.setTimeout(() => inputRef.current?.focus());
+	}, [onChange]);
+	const handleToday = useCallback(() => {
+		const today = toIsoDate$1(/* @__PURE__ */ new Date());
+		if (isIsoDateDisabled(today, min, max)) return;
+		setMonth(startOfMonth$1(parseIsoDate$1(today)));
+		commitValue(today);
+	}, [
+		min,
+		max,
+		commitValue
+	]);
+	const handleClear = useCallback((e) => {
+		e.preventDefault();
+		commitValue("");
+	}, [commitValue]);
+	const handleInputFocus = () => {
+		setIsEditing(true);
+		setInputText(displayValue);
+		window.setTimeout(() => inputRef.current?.select(), 0);
+	};
+	const handleInputChange = (e) => {
+		if (readOnly || disabled) return;
+		setInputText(applyDateMask(e.target.value, inputText));
+	};
+	const handleInputBlur = (e) => {
+		const related = e.relatedTarget;
+		if (rootRef.current?.contains(related) || panelRef.current?.contains(related)) return;
+		setIsEditing(false);
+		const parsed = parseDisplayDate(inputText, resolvedLocale);
+		if (parsed !== null) {
+			if (parsed !== value) onChange?.(parsed);
+		} else if (inputText === "" && value) onChange?.("");
+		setInputText("");
+		onBlur?.(e);
+	};
+	const handleInputKeyDown = (e) => {
+		if (e.key === "Enter") {
+			e.preventDefault();
+			const parsed = parseDisplayDate(inputText, resolvedLocale);
+			if (parsed !== null) commitValue(parsed);
+			else if (inputText === "") commitValue("");
+		} else if (e.key === "ArrowDown" || e.key === "F4") {
+			e.preventDefault();
+			if (!readOnly && !disabled) setOpen(true);
+		} else if (e.key === "Escape" && open) setOpen(false);
+	};
+	const handleCalendarPointerDown = (e) => {
+		e.preventDefault();
+		if (readOnly || disabled) return;
+		setOpen((v) => !v);
+	};
+	const handleDayKeyDown = useCallback((e, iso) => {
+		if (![
+			"ArrowLeft",
+			"ArrowRight",
+			"ArrowUp",
+			"ArrowDown",
+			"Enter",
+			" "
+		].includes(e.key)) return;
+		e.preventDefault();
+		if (e.key === "Enter" || e.key === " ") {
+			const day = days.find((d) => d.iso === iso);
+			if (day && !day.disabled) commitValue(iso);
+			return;
+		}
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[e.key] ?? 0;
+		const current = parseIsoDate$1(iso);
+		if (!current) return;
+		const next = new Date(current);
+		next.setDate(current.getDate() + delta);
+		const nextIso = toIsoDate$1(next);
+		if (next.getMonth() !== month.getMonth() || next.getFullYear() !== month.getFullYear()) setMonth(startOfMonth$1(next));
+		setFocusedIso(nextIso);
+		window.setTimeout(() => {
+			panelRef.current?.querySelector(`[data-iso="${nextIso}"]`)?.focus();
+		}, 0);
+	}, [
+		days,
+		month,
+		commitValue
+	]);
+	const handleMonthSelect = (monthIndex) => {
+		setMonth(new Date(month.getFullYear(), monthIndex, 1));
+		setViewMode("days");
+	};
+	const handleYearSelect = (year) => {
+		setMonth(new Date(year, month.getMonth(), 1));
+		setViewMode("months");
+	};
+	const setInputRef = (node) => {
+		inputRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	};
+	const todayIso = toIsoDate$1(/* @__PURE__ */ new Date());
+	return /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
+		className: cx$1("nb-date-picker", className),
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: value ?? "",
+				required
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: triggerRef,
+				className: cx$1("nb-date-picker__trigger", invalid && "nb-date-picker__trigger--invalid", readOnly && "nb-date-picker__trigger--readonly", open && "nb-date-picker__trigger--open", disabled && "nb-date-picker__trigger--disabled"),
+				children: [/* @__PURE__ */ jsx("input", {
+					ref: setInputRef,
+					id: inputId,
+					type: "text",
+					inputMode: "numeric",
+					className: cx$1("nb-date-picker__input", !isEditing && !displayValue && "nb-date-picker__input--placeholder"),
+					value: isEditing ? inputText : displayValue,
+					placeholder,
+					disabled,
+					readOnly,
+					"aria-label": ariaLabel,
+					"aria-haspopup": "dialog",
+					"aria-expanded": open,
+					"aria-invalid": invalid || void 0,
+					"aria-required": required || void 0,
+					autoComplete: "off",
+					onFocus: handleInputFocus,
+					onBlur: handleInputBlur,
+					onChange: handleInputChange,
+					onKeyDown: handleInputKeyDown
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "nb-date-picker__icons",
+					children: [clearable && displayValue && !disabled && !readOnly && /* @__PURE__ */ jsx("span", {
+						role: "button",
+						tabIndex: -1,
+						className: "nb-date-picker__clear",
+						"aria-label": strings.clearDate,
+						onPointerDown: handleClear,
+						children: /* @__PURE__ */ jsx("i", {
+							className: "ph ph-x",
+							"aria-hidden": "true"
+						})
+					}), /* @__PURE__ */ jsx("span", {
+						role: "button",
+						tabIndex: -1,
+						className: "nb-date-picker__calendar-btn",
+						"aria-label": strings.openCalendar,
+						onPointerDown: handleCalendarPointerDown,
+						children: /* @__PURE__ */ jsx("i", {
+							className: "ph ph-calendar-blank",
+							"aria-hidden": "true"
+						})
+					})]
+				})]
+			}),
+			open && createPortal(/* @__PURE__ */ jsxs("div", {
+				ref: panelRef,
+				className: "nb-date-picker__panel",
+				role: "dialog",
+				"aria-label": strings.selectDate,
+				style: panelStyle,
+				children: [
+					viewMode === "days" && /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "nb-date-picker__header",
+							children: [
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "nb-date-picker__nav",
+									"aria-label": strings.previousMonth,
+									onClick: () => setMonth((m) => addMonths$1(m, -1)),
+									children: /* @__PURE__ */ jsx("i", {
+										className: "ph ph-caret-left",
+										"aria-hidden": "true"
+									})
+								}),
+								/* @__PURE__ */ jsxs("button", {
+									type: "button",
+									className: "nb-date-picker__month nb-date-picker__month--clickable",
+									"aria-label": strings.selectMonthAndYear,
+									onClick: () => setViewMode("months"),
+									children: [formatMonthLabel$1(month, resolvedLocale), /* @__PURE__ */ jsx("i", {
+										className: "ph ph-caret-down nb-date-picker__month-caret",
+										"aria-hidden": "true"
+									})]
+								}),
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "nb-date-picker__nav",
+									"aria-label": strings.nextMonth,
+									onClick: () => setMonth((m) => addMonths$1(m, 1)),
+									children: /* @__PURE__ */ jsx("i", {
+										className: "ph ph-caret-right",
+										"aria-hidden": "true"
+									})
+								})
+							]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "nb-date-picker__weekdays",
+							"aria-hidden": "true",
+							children: weekdayLabels.map((label, i) => /* @__PURE__ */ jsx("span", { children: label }, `${label}-${i}`))
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "nb-date-picker__days",
+							role: "grid",
+							"aria-label": formatMonthLabel$1(month, resolvedLocale),
+							children: days.map((day) => /* @__PURE__ */ jsx("button", {
+								"data-iso": day.iso,
+								type: "button",
+								className: cx$1("nb-date-picker__day", !day.inCurrentMonth && "nb-date-picker__day--muted", day.iso === selectedIso && "nb-date-picker__day--selected", day.iso === todayIso && "nb-date-picker__day--today"),
+								disabled: day.disabled,
+								role: "gridcell",
+								"aria-selected": day.iso === selectedIso,
+								tabIndex: day.iso === (focusedIso ?? selectedIso ?? todayIso) ? 0 : -1,
+								onClick: () => commitValue(day.iso),
+								onKeyDown: (e) => handleDayKeyDown(e, day.iso),
+								children: day.date.getDate()
+							}, day.iso))
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "nb-date-picker__footer",
+							children: [/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "nb-date-picker__text-button",
+								onClick: () => commitValue(""),
+								children: strings.clear
+							}), /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "nb-date-picker__text-button",
+								onClick: handleToday,
+								children: strings.today
+							})]
+						})
+					] }),
+					viewMode === "months" && /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "nb-date-picker__header",
+							children: [
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "nb-date-picker__nav",
+									"aria-label": strings.previousYear,
+									onClick: () => setMonth((m) => new Date(m.getFullYear() - 1, m.getMonth(), 1)),
+									children: /* @__PURE__ */ jsx("i", {
+										className: "ph ph-caret-left",
+										"aria-hidden": "true"
+									})
+								}),
+								/* @__PURE__ */ jsxs("button", {
+									type: "button",
+									className: "nb-date-picker__month nb-date-picker__month--clickable",
+									"aria-label": strings.selectYear,
+									onClick: () => {
+										setYearRangeStart(getYearRangeStart(month.getFullYear()));
+										setViewMode("years");
+									},
+									children: [month.getFullYear(), /* @__PURE__ */ jsx("i", {
+										className: "ph ph-caret-down nb-date-picker__month-caret",
+										"aria-hidden": "true"
+									})]
+								}),
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "nb-date-picker__nav",
+									"aria-label": strings.nextYear,
+									onClick: () => setMonth((m) => new Date(m.getFullYear() + 1, m.getMonth(), 1)),
+									children: /* @__PURE__ */ jsx("i", {
+										className: "ph ph-caret-right",
+										"aria-hidden": "true"
+									})
+								})
+							]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "nb-date-picker__months-grid",
+							role: "grid",
+							"aria-label": `${month.getFullYear()}`,
+							children: monthLabels.map((label, i) => {
+								const isSelected = selectedDate ? selectedDate.getMonth() === i && selectedDate.getFullYear() === month.getFullYear() : false;
+								const isCurrent = (/* @__PURE__ */ new Date()).getMonth() === i && (/* @__PURE__ */ new Date()).getFullYear() === month.getFullYear();
+								return /* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: cx$1("nb-date-picker__month-cell", isSelected && "nb-date-picker__month-cell--selected", isCurrent && "nb-date-picker__month-cell--current"),
+									role: "gridcell",
+									"aria-selected": isSelected,
+									onClick: () => handleMonthSelect(i),
+									children: label
+								}, i);
+							})
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "nb-date-picker__footer",
+							children: /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								className: "nb-date-picker__text-button",
+								onClick: () => setViewMode("days"),
+								children: [
+									/* @__PURE__ */ jsx("i", {
+										className: "ph ph-arrow-left",
+										"aria-hidden": "true"
+									}),
+									" ",
+									strings.back
+								]
+							})
+						})
+					] }),
+					viewMode === "years" && /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "nb-date-picker__header",
+							children: [
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "nb-date-picker__nav",
+									"aria-label": strings.previousYears,
+									onClick: () => setYearRangeStart((y) => y - 12),
+									children: /* @__PURE__ */ jsx("i", {
+										className: "ph ph-caret-left",
+										"aria-hidden": "true"
+									})
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "nb-date-picker__month",
+									children: [
+										yearRangeStart,
+										"–",
+										yearRangeStart + 11
+									]
+								}),
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "nb-date-picker__nav",
+									"aria-label": strings.nextYears,
+									onClick: () => setYearRangeStart((y) => y + 12),
+									children: /* @__PURE__ */ jsx("i", {
+										className: "ph ph-caret-right",
+										"aria-hidden": "true"
+									})
+								})
+							]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "nb-date-picker__years-grid",
+							role: "grid",
+							"aria-label": `${yearRangeStart}–${yearRangeStart + 11}`,
+							children: Array.from({ length: 12 }, (_, i) => yearRangeStart + i).map((year) => {
+								const isSelected = selectedDate ? selectedDate.getFullYear() === year : false;
+								const isCurrent = (/* @__PURE__ */ new Date()).getFullYear() === year;
+								return /* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: cx$1("nb-date-picker__year-cell", isSelected && "nb-date-picker__year-cell--selected", isCurrent && "nb-date-picker__year-cell--current"),
+									role: "gridcell",
+									"aria-selected": isSelected,
+									onClick: () => handleYearSelect(year),
+									children: year
+								}, year);
+							})
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "nb-date-picker__footer",
+							children: /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								className: "nb-date-picker__text-button",
+								onClick: () => setViewMode("months"),
+								children: [
+									/* @__PURE__ */ jsx("i", {
+										className: "ph ph-arrow-left",
+										"aria-hidden": "true"
+									}),
+									" ",
+									strings.back
+								]
+							})
+						})
+					] })
+				]
+			}), document.body)
+		]
+	});
+});
+//#endregion
+//#region packages/ui/DateRangePicker.tsx
+/**
+* DateRangePicker — enterprise date range selector.
+*
+* A single trigger with two text inputs (start + end) sharing one calendar
+* panel. Supports hover-preview, range highlighting, keyboard entry, min/max
+* constraints, and full density/theme token compliance.
+*
+* Usage:
+*   <DateRangePicker
+*     startValue="2026-06-01"
+*     endValue="2026-06-30"
+*     onChange={(start, end) => ...}
+*   />
+*/
+const ISO_DATE_RE = /^\d{4}-\d{2}-\d{2}$/;
+const pad = (v) => String(v).padStart(2, "0");
+const toIsoDate = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+const parseIsoDate = (value) => {
+	if (!value || !ISO_DATE_RE.test(value)) return null;
+	const [year, month, day] = value.split("-").map(Number);
+	const d = new Date(year, month - 1, day);
+	if (d.getFullYear() !== year || d.getMonth() !== month - 1 || d.getDate() !== day) return null;
+	return d;
+};
+const cx = (...vals) => vals.filter(Boolean).join(" ");
+const getLocale = (override) => override || document.documentElement.lang || navigator.language || "en-US";
+const startOfMonth = (date) => new Date(date.getFullYear(), date.getMonth(), 1);
+const addMonths = (date, months) => new Date(date.getFullYear(), date.getMonth() + months, 1);
+const formatDisplayDate = (value, locale) => {
+	const date = parseIsoDate(value);
+	if (!date) return "";
+	return new Intl.DateTimeFormat(getLocale(locale), {
+		day: "2-digit",
+		month: "2-digit",
+		year: "numeric"
+	}).format(date);
+};
+const formatMonthLabel = (date, locale) => new Intl.DateTimeFormat(getLocale(locale), {
+	month: "long",
+	year: "numeric"
+}).format(date);
+const buildCalendarDays = (month, min, max, locale) => {
+	const first = startOfMonth(month);
+	const firstDayOfWeek = getFirstDayOfWeek(locale);
+	const offset = (first.getDay() - firstDayOfWeek + 7) % 7;
+	const minDate = parseIsoDate(min);
+	const maxDate = parseIsoDate(max);
+	const start = new Date(first);
+	start.setDate(first.getDate() - offset);
+	return Array.from({ length: 42 }, (_, i) => {
+		const date = new Date(start);
+		date.setDate(start.getDate() + i);
+		return {
+			date,
+			iso: toIsoDate(date),
+			inCurrentMonth: date.getMonth() === month.getMonth(),
+			disabled: Boolean(minDate && date < minDate || maxDate && date > maxDate)
+		};
+	});
+};
+const getDayRoleInRange = (iso, startIso, endIso) => {
+	if (!startIso) return "none";
+	if (!endIso || startIso === endIso) return iso === startIso ? "single" : "none";
+	if (iso === startIso) return "start";
+	if (iso === endIso) return "end";
+	if (iso > startIso && iso < endIso) return "in-range";
+	return "none";
+};
+function DateRangePicker({ startValue, endValue, placeholder = "dd/mm/yyyy", disabled = false, readOnly = false, required = false, invalid = false, locale, min, max, className, ariaLabel, onChange, onBlur }) {
+	const startId = useId();
+	const endId = useId();
+	const strings = useUiStrings();
+	const resolvedLocale = getLocale(locale);
+	const startDisplay = formatDisplayDate(startValue, resolvedLocale);
+	const endDisplay = formatDisplayDate(endValue, resolvedLocale);
+	const startIso = parseIsoDate(startValue) ? startValue : null;
+	const endIso = parseIsoDate(endValue) ? endValue : null;
+	const [open, setOpen] = useState(false);
+	const [phase, setPhase] = useState("idle");
+	const [pendingStart, setPendingStart] = useState(null);
+	const [hoverIso, setHoverIso] = useState(null);
+	const [month, setMonth] = useState(() => startOfMonth(parseIsoDate(startValue) ?? /* @__PURE__ */ new Date()));
+	const [panelStyle, setPanelStyle] = useState({});
+	const [startText, setStartText] = useState("");
+	const [endText, setEndText] = useState("");
+	const [editingField, setEditingField] = useState(null);
+	const rootRef = useRef(null);
+	const triggerRef = useRef(null);
+	const panelRef = useRef(null);
+	const startInputRef = useRef(null);
+	const endInputRef = useRef(null);
+	const days = useMemo(() => buildCalendarDays(month, min, max, resolvedLocale), [
+		month,
+		min,
+		max,
+		resolvedLocale
+	]);
+	const weekdayLbls = useMemo(() => weekDayLabels(resolvedLocale), [resolvedLocale]);
+	const todayIso = toIsoDate(/* @__PURE__ */ new Date());
+	useEffect(() => {
+		const anchor = parseIsoDate(startValue) ?? parseIsoDate(endValue);
+		if (anchor) setMonth(startOfMonth(anchor));
+	}, [startValue]);
+	useEffect(() => {
+		if (!open) return;
+		const update = () => {
+			const rect = triggerRef.current?.getBoundingClientRect();
+			if (!rect) return;
+			const panelWidth = panelRef.current?.offsetWidth ?? 296;
+			const left = Math.min(Math.max(8, rect.left), window.innerWidth - panelWidth - 8);
+			const top = Math.min(rect.bottom + 6, window.innerHeight - 380);
+			setPanelStyle({
+				left,
+				top: Math.max(8, top)
+			});
+		};
+		update();
+		window.addEventListener("resize", update);
+		window.addEventListener("scroll", update, true);
+		return () => {
+			window.removeEventListener("resize", update);
+			window.removeEventListener("scroll", update, true);
+		};
+	}, [open]);
+	const closePanel = useCallback(() => {
+		setOpen(false);
+		setPhase("idle");
+		setPendingStart(null);
+		setHoverIso(null);
+	}, []);
+	useEffect(() => {
+		if (!open) return;
+		const handlePointerDown = (e) => {
+			const target = e.target;
+			if (rootRef.current?.contains(target) || panelRef.current?.contains(target)) return;
+			closePanel();
+		};
+		const handleKeyDown = (e) => {
+			if (e.key === "Escape") {
+				e.preventDefault();
+				closePanel();
+				startInputRef.current?.focus();
+			}
+		};
+		document.addEventListener("pointerdown", handlePointerDown);
+		document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			document.removeEventListener("pointerdown", handlePointerDown);
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [open, closePanel]);
+	const commitRange = useCallback((start, end) => {
+		const [a, b] = start <= end ? [start, end] : [end, start];
+		onChange?.(a, b);
+		closePanel();
+		window.setTimeout(() => startInputRef.current?.focus());
+	}, [onChange, closePanel]);
+	const handleDayClick = useCallback((iso) => {
+		if (phase === "idle") {
+			setPendingStart(iso);
+			setPhase("selecting-end");
+		} else commitRange(pendingStart ?? iso, iso);
+	}, [
+		phase,
+		pendingStart,
+		commitRange
+	]);
+	const getEffectiveRange = () => {
+		if (phase === "selecting-end" && pendingStart) {
+			const effectiveEnd = hoverIso ?? null;
+			return {
+				effectiveStart: pendingStart <= (effectiveEnd ?? pendingStart) ? pendingStart : effectiveEnd,
+				effectiveEnd: pendingStart <= (effectiveEnd ?? pendingStart) ? effectiveEnd : pendingStart
+			};
+		}
+		return {
+			effectiveStart: startIso,
+			effectiveEnd: endIso
+		};
+	};
+	const { effectiveStart, effectiveEnd } = getEffectiveRange();
+	const handleStartFocus = () => {
+		setEditingField("start");
+		setStartText(startDisplay);
+		window.setTimeout(() => startInputRef.current?.select(), 0);
+	};
+	const handleEndFocus = () => {
+		setEditingField("end");
+		setEndText(endDisplay);
+		window.setTimeout(() => endInputRef.current?.select(), 0);
+	};
+	const handleStartChange = (e) => {
+		if (readOnly || disabled) return;
+		setStartText(applyDateMask(e.target.value, startText));
+	};
+	const handleEndChange = (e) => {
+		if (readOnly || disabled) return;
+		setEndText(applyDateMask(e.target.value, endText));
+	};
+	const commitTextInput = (field, text) => {
+		const parsed = parseDisplayDate(text, resolvedLocale);
+		if (parsed !== null) {
+			const newStart = field === "start" ? parsed : startIso ?? "";
+			const newEnd = field === "end" ? parsed : endIso ?? "";
+			if (newStart && newEnd) {
+				const [a, b] = newStart <= newEnd ? [newStart, newEnd] : [newEnd, newStart];
+				onChange?.(a, b);
+			} else if (field === "start") onChange?.(parsed, endIso ?? "");
+			else onChange?.(startIso ?? "", parsed);
+		} else if (text === "") if (field === "start") onChange?.("", endIso ?? "");
+		else onChange?.(startIso ?? "", "");
+	};
+	const handleStartBlur = (e) => {
+		const related = e.relatedTarget;
+		if (rootRef.current?.contains(related) || panelRef.current?.contains(related)) return;
+		commitTextInput("start", startText);
+		setEditingField(null);
+		setStartText("");
+		onBlur?.(e);
+	};
+	const handleEndBlur = (e) => {
+		const related = e.relatedTarget;
+		if (rootRef.current?.contains(related) || panelRef.current?.contains(related)) return;
+		commitTextInput("end", endText);
+		setEditingField(null);
+		setEndText("");
+		onBlur?.(e);
+	};
+	const handleStartKeyDown = (e) => {
+		if (e.key === "Enter") {
+			e.preventDefault();
+			const parsed = parseDisplayDate(startText);
+			if (parsed) onChange?.(parsed, endIso ?? "");
+			endInputRef.current?.focus();
+		} else if (e.key === "ArrowDown" || e.key === "F4") {
+			e.preventDefault();
+			if (!readOnly && !disabled) setOpen(true);
+		}
+	};
+	const handleEndKeyDown = (e) => {
+		if (e.key === "Enter") {
+			e.preventDefault();
+			const parsed = parseDisplayDate(endText);
+			if (parsed) onChange?.(startIso ?? "", parsed);
+		} else if (e.key === "ArrowDown" || e.key === "F4") {
+			e.preventDefault();
+			if (!readOnly && !disabled) setOpen(true);
+		}
+	};
+	const handleCalendarPointerDown = (e) => {
+		e.preventDefault();
+		if (readOnly || disabled) return;
+		setOpen((v) => !v);
+	};
+	const handleClear = (e) => {
+		e.preventDefault();
+		onChange?.("", "");
+		closePanel();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
+		className: cx("nb-date-range-picker", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				ref: triggerRef,
+				className: cx("nb-date-range-picker__trigger", invalid && "nb-date-range-picker__trigger--invalid", readOnly && "nb-date-range-picker__trigger--readonly", open && "nb-date-range-picker__trigger--open", disabled && "nb-date-range-picker__trigger--disabled"),
+				"aria-label": ariaLabel,
+				children: [
+					/* @__PURE__ */ jsx("input", {
+						ref: startInputRef,
+						id: startId,
+						type: "text",
+						inputMode: "numeric",
+						className: cx("nb-date-range-picker__input", !editingField && !startDisplay && "nb-date-range-picker__input--placeholder"),
+						value: editingField === "start" ? startText : startDisplay,
+						placeholder,
+						disabled,
+						readOnly,
+						autoComplete: "off",
+						"aria-label": `Fecha inicio${ariaLabel ? ` ${ariaLabel}` : ""}`,
+						"aria-required": required || void 0,
+						onFocus: handleStartFocus,
+						onBlur: handleStartBlur,
+						onChange: handleStartChange,
+						onKeyDown: handleStartKeyDown
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "nb-date-range-picker__sep",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx("i", { className: "ph ph-arrow-right" })
+					}),
+					/* @__PURE__ */ jsx("input", {
+						ref: endInputRef,
+						id: endId,
+						type: "text",
+						inputMode: "numeric",
+						className: cx("nb-date-range-picker__input", !editingField && !endDisplay && "nb-date-range-picker__input--placeholder"),
+						value: editingField === "end" ? endText : endDisplay,
+						placeholder,
+						disabled,
+						readOnly,
+						autoComplete: "off",
+						"aria-label": `Fecha fin${ariaLabel ? ` ${ariaLabel}` : ""}`,
+						onFocus: handleEndFocus,
+						onBlur: handleEndBlur,
+						onChange: handleEndChange,
+						onKeyDown: handleEndKeyDown
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "nb-date-range-picker__icons",
+						children: [(startDisplay || endDisplay) && !disabled && !readOnly && /* @__PURE__ */ jsx("span", {
+							role: "button",
+							tabIndex: -1,
+							className: "nb-date-range-picker__clear",
+							"aria-label": strings.clearDateRange,
+							onPointerDown: handleClear,
+							children: /* @__PURE__ */ jsx("i", {
+								className: "ph ph-x",
+								"aria-hidden": "true"
+							})
+						}), /* @__PURE__ */ jsx("span", {
+							role: "button",
+							tabIndex: -1,
+							className: "nb-date-range-picker__calendar-btn",
+							"aria-label": strings.openCalendar,
+							onPointerDown: handleCalendarPointerDown,
+							children: /* @__PURE__ */ jsx("i", {
+								className: "ph ph-calendar-blank",
+								"aria-hidden": "true"
+							})
+						})]
+					})
+				]
+			}),
+			phase === "selecting-end" && /* @__PURE__ */ jsx("div", {
+				className: "nb-date-range-picker__hint",
+				role: "status",
+				"aria-live": "polite",
+				children: "Selecciona la fecha de fin"
+			}),
+			open && createPortal(/* @__PURE__ */ jsxs("div", {
+				ref: panelRef,
+				className: "nb-date-range-picker__panel",
+				role: "dialog",
+				"aria-label": strings.selectDateRange,
+				style: panelStyle,
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "nb-date-range-picker__header",
+						children: [
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "nb-date-range-picker__nav",
+								"aria-label": strings.previousMonth,
+								onClick: () => setMonth((m) => addMonths(m, -1)),
+								children: /* @__PURE__ */ jsx("i", {
+									className: "ph ph-caret-left",
+									"aria-hidden": "true"
+								})
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "nb-date-range-picker__month",
+								"aria-live": "polite",
+								children: formatMonthLabel(month, resolvedLocale)
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "nb-date-range-picker__nav",
+								"aria-label": strings.nextMonth,
+								onClick: () => setMonth((m) => addMonths(m, 1)),
+								children: /* @__PURE__ */ jsx("i", {
+									className: "ph ph-caret-right",
+									"aria-hidden": "true"
+								})
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "nb-date-range-picker__weekdays",
+						"aria-hidden": "true",
+						children: weekdayLbls.map((label, i) => /* @__PURE__ */ jsx("span", { children: label }, `${label}-${i}`))
+					}),
+					phase === "selecting-end" && /* @__PURE__ */ jsxs("div", {
+						className: "nb-date-range-picker__phase-banner",
+						children: [/* @__PURE__ */ jsx("i", {
+							className: "ph ph-info",
+							"aria-hidden": "true"
+						}), "Ahora selecciona la fecha de fin"]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "nb-date-range-picker__days",
+						role: "grid",
+						"aria-label": formatMonthLabel(month, resolvedLocale),
+						children: days.map((day) => {
+							const role = getDayRoleInRange(day.iso, effectiveStart, effectiveEnd);
+							return /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: cx("nb-date-range-picker__day", !day.inCurrentMonth && "nb-date-range-picker__day--muted", day.iso === todayIso && "nb-date-range-picker__day--today", role === "start" && "nb-date-range-picker__day--range-start", role === "end" && "nb-date-range-picker__day--range-end", role === "in-range" && "nb-date-range-picker__day--in-range", role === "single" && "nb-date-range-picker__day--range-single", phase === "selecting-end" && "nb-date-range-picker__day--selecting"),
+								disabled: day.disabled,
+								role: "gridcell",
+								"aria-selected": role !== "none",
+								onMouseEnter: () => phase === "selecting-end" && setHoverIso(day.iso),
+								onMouseLeave: () => phase === "selecting-end" && setHoverIso(null),
+								onClick: () => !day.disabled && handleDayClick(day.iso),
+								children: /* @__PURE__ */ jsx("span", {
+									className: "nb-date-range-picker__day-inner",
+									children: day.date.getDate()
+								})
+							}, day.iso);
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "nb-date-range-picker__footer",
+						children: [/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "nb-date-range-picker__text-button",
+							onClick: () => {
+								onChange?.("", "");
+								closePanel();
+							},
+							children: strings.clear
+						}), phase === "selecting-end" ? /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "nb-date-range-picker__text-button",
+							onClick: () => {
+								setPendingStart(null);
+								setPhase("idle");
+								setHoverIso(null);
+							},
+							children: strings.cancel
+						}) : /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "nb-date-range-picker__text-button",
+							onClick: () => {
+								const today = toIsoDate(/* @__PURE__ */ new Date());
+								setMonth(startOfMonth(/* @__PURE__ */ new Date()));
+								if (!startIso) onChange?.(today, endIso ?? "");
+								else if (!endIso) onChange?.(startIso, today);
+								else onChange?.(today, today);
+								closePanel();
+							},
+							children: strings.today
+						})]
+					})
+				]
+			}), document.body)
+		]
+	});
+}
+//#endregion
+//#region packages/ui/useFloatingPanel.ts
+function useFloatingPanel(options = {}) {
+	const [open, setOpenState] = useState(false);
+	const containerRef = useRef(null);
+	const onCloseRef = useRef(options.onClose);
+	onCloseRef.current = options.onClose;
+	const setOpen = useCallback((next) => {
+		setOpenState(next);
+		if (!next) onCloseRef.current?.();
+	}, []);
+	const toggle = useCallback(() => setOpen(!open), [open, setOpen]);
+	useEffect(() => {
+		if (!open) return;
+		const handlePointerDown = (e) => {
+			const container = containerRef.current;
+			if (container && !container.contains(e.target)) setOpen(false);
+		};
+		const handleKeyDown = (e) => {
+			if (e.key === "Escape") setOpen(false);
+		};
+		document.addEventListener("pointerdown", handlePointerDown);
+		document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			document.removeEventListener("pointerdown", handlePointerDown);
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [open, setOpen]);
+	return {
+		open,
+		setOpen,
+		toggle,
+		containerRef
+	};
+}
+//#endregion
+//#region packages/ui/Popover.tsx
+const Popover = ({ trigger, panel, align = "end", ariaLabel, className }) => {
+	const { open, setOpen, toggle, containerRef } = useFloatingPanel();
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: [
+			"nb-popover",
+			`nb-popover--${align}`,
+			open && "nb-popover--open",
+			className
+		].filter(Boolean).join(" "),
+		children: [trigger({
+			open,
+			toggle
+		}), open && /* @__PURE__ */ jsx("div", {
+			className: "nb-popover__panel",
+			role: "dialog",
+			"aria-label": ariaLabel,
+			children: panel({ close: () => setOpen(false) })
+		})]
+	});
+};
+//#endregion
+//#region packages/ui/Drawer.tsx
+const formatWidth = (value) => {
+	if (value === void 0) return void 0;
+	return typeof value === "number" ? `${value}px` : value;
+};
+const Drawer = ({ isOpen, onClose, title, width, side = "right", scrim = "subtle", children, footer, closeLabel, scrimLabel, className, "aria-label": ariaLabel }) => {
+	const strings = useUiStrings();
+	const resolvedCloseLabel = closeLabel ?? strings.close;
+	const resolvedScrimLabel = scrimLabel ?? strings.closePanel;
+	const titleId = useId();
+	const panelRef = useRef(null);
+	const lastFocusRef = useRef(null);
+	useEffect(() => {
+		if (!isOpen) return;
+		lastFocusRef.current = document.activeElement;
+		const timer = window.setTimeout(() => {
+			(panelRef.current?.querySelector("button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex=\"-1\"])"))?.focus();
+		});
+		return () => {
+			clearTimeout(timer);
+			lastFocusRef.current?.focus?.();
+		};
+	}, [isOpen]);
+	useEffect(() => {
+		if (!isOpen) return;
+		const handler = (e) => {
+			if (e.key === "Escape") {
+				e.preventDefault();
+				onClose();
+			}
+		};
+		document.addEventListener("keydown", handler);
+		return () => document.removeEventListener("keydown", handler);
+	}, [isOpen, onClose]);
+	return createPortal(/* @__PURE__ */ jsxs("div", {
+		className: [
+			"nb-drawer-root",
+			isOpen && "nb-drawer-root--open",
+			`nb-drawer-root--${side}`
+		].filter(Boolean).join(" "),
+		"aria-hidden": !isOpen,
+		style: { pointerEvents: isOpen ? void 0 : "none" },
+		children: [/* @__PURE__ */ jsx("button", {
+			className: `nb-drawer__scrim nb-drawer__scrim--${scrim}`,
+			type: "button",
+			"aria-label": resolvedScrimLabel,
+			tabIndex: -1,
+			onClick: onClose
+		}), /* @__PURE__ */ jsxs("aside", {
+			ref: panelRef,
+			className: ["nb-drawer", className].filter(Boolean).join(" "),
+			role: "dialog",
+			"aria-modal": "false",
+			"aria-labelledby": title ? titleId : void 0,
+			"aria-label": !title ? ariaLabel : void 0,
+			style: { width: formatWidth(width) },
+			children: [
+				title !== void 0 && /* @__PURE__ */ jsxs("header", {
+					className: "nb-drawer__header",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "nb-drawer__title",
+						id: titleId,
+						children: title
+					}), /* @__PURE__ */ jsx(IconButton, {
+						className: "nb-drawer__close",
+						icon: "ph ph-x",
+						label: resolvedCloseLabel,
+						onClick: onClose
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "nb-drawer__body",
+					children
+				}),
+				footer && /* @__PURE__ */ jsx("footer", {
+					className: "nb-drawer__footer",
+					children: footer
+				})
+			]
+		})]
+	}), document.body);
+};
+//#endregion
+export { ACCENT_PRESETS, AppDialog, AppDropdown, AppToolbar, Avatar, Badge, Button, Card, Chip, CollapsibleSection, ConfirmDialog, ContextMenu, DatePicker, DateRangePicker, DensityContext, DensityProvider, Drawer, EN_UI_STRINGS, ES_UI_STRINGS, EmptyState, FormField, IconButton, Popover, SelectField, SettingsPanel, Skeleton, StatCard, TextAreaField, TextField, ThemeContext, ThemeProvider, ThemeSwitcher, Toggle, UiStringsProvider, getAvatarHue, getAvatarInitials, useAccentColor, useDensity, useFloatingPanel, useTheme, useUiStrings };