danielgm-ui 0.1.0

package/dist/internal/scroll-hints.js

@@ -0,0 +1,108 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { cx } from '../utils.js';
+/** Decoración interna: el primer hijo conserva el scroll, su semántica y su foco.
+ * Observamos tamaño y contenido porque buscar, traducir o cargar opciones puede
+ * cambiar el desbordamiento sin que el usuario desplace la lista. */
+export function ScrollHints({ children, className }) {
+    const region = useRef(null);
+    const [above, setAbove] = useState(false);
+    const [below, setBelow] = useState(false);
+    useEffect(() => {
+        const root = region.current;
+        if (!root)
+            return;
+        let viewport = null;
+        const observed = new Set();
+        const update = () => {
+            if (!viewport)
+                return;
+            const maximum = viewport.scrollHeight - viewport.clientHeight;
+            setAbove(maximum > 1 && viewport.scrollTop > 1);
+            setBelow(maximum > 1 && viewport.scrollTop < maximum - 1);
+        };
+        const measure = () => {
+            if (!viewport)
+                return;
+            // La máscara deja opaca la barra real, incluso si está a la izquierda (RTL).
+            // Con barras superpuestas o sin desbordamiento no reservamos ninguna franja.
+            const style = getComputedStyle(viewport);
+            const left = Number.parseFloat(style.borderLeftWidth) || 0;
+            const right = Number.parseFloat(style.borderRightWidth) || 0;
+            const width = Math.max(0, viewport.offsetWidth - viewport.clientWidth - left - right);
+            const onLeft = viewport.clientLeft > left;
+            const scrollbarLeft = `${onLeft ? width : 0}px`;
+            const scrollbarRight = `${onLeft ? 0 : width}px`;
+            if (root.style.getPropertyValue('--dgm-scrollbar-left') !== scrollbarLeft) {
+                root.style.setProperty('--dgm-scrollbar-left', scrollbarLeft);
+            }
+            if (root.style.getPropertyValue('--dgm-scrollbar-right') !== scrollbarRight) {
+                root.style.setProperty('--dgm-scrollbar-right', scrollbarRight);
+            }
+            update();
+        };
+        const resize = new ResizeObserver(measure);
+        const observeSizes = () => {
+            const nodes = new Set(viewport ? [viewport, ...viewport.children] : []);
+            for (const node of observed) {
+                if (!nodes.has(node)) {
+                    resize.unobserve(node);
+                    observed.delete(node);
+                }
+            }
+            for (const node of nodes) {
+                if (!observed.has(node)) {
+                    resize.observe(node);
+                    observed.add(node);
+                }
+            }
+        };
+        const bindViewport = () => {
+            // Radix puede insertar un <style> antes del viewport. La identidad del nodo,
+            // no la de children/JSX, determina la duración de estas suscripciones.
+            const candidate = root.querySelector(':scope > :not(style):not(script)');
+            const next = candidate instanceof HTMLElement ? candidate : null;
+            if (next === viewport)
+                return false;
+            viewport?.removeEventListener('scroll', update);
+            viewport = next;
+            viewport?.addEventListener('scroll', update, { passive: true });
+            observeSizes();
+            if (!viewport) {
+                setAbove(false);
+                setBelow(false);
+                root.style.removeProperty('--dgm-scrollbar-left');
+                root.style.removeProperty('--dgm-scrollbar-right');
+            }
+            return true;
+        };
+        bindViewport();
+        measure();
+        const content = new MutationObserver((records) => {
+            // Las variables de la máscara pertenecen a root: no se realimentan como
+            // mutaciones del contenido. Un cambio de texto/estilo solo necesita medir.
+            if (!records.some((record) => record.target !== root || record.type === 'childList'))
+                return;
+            const rebound = bindViewport();
+            if (!rebound && records.some((record) => record.type === 'childList'))
+                observeSizes();
+            measure();
+        });
+        content.observe(root, {
+            childList: true,
+            subtree: true,
+            characterData: true,
+            attributes: true,
+            attributeFilter: ['hidden', 'style'],
+        });
+        return () => {
+            resize.disconnect();
+            content.disconnect();
+            viewport?.removeEventListener('scroll', update);
+            viewport = null;
+            observed.clear();
+        };
+    }, []);
+    return (_jsx("div", { ref: region, className: cx('dgm-scroll-region', className), "data-more-above": above || undefined, "data-more-below": below || undefined, children: children }));
+}

package/dist/internal/state.d.ts

@@ -0,0 +1,2 @@
+/** Estado local o controlado. No cambiar de modo durante la vida del componente. */
+export declare function useControllable<T>(value: T | undefined, initial: T, onChange?: (next: T) => void): readonly [T, (next: T) => void];

package/dist/internal/state.js

@@ -0,0 +1,13 @@
+'use client';
+import { useState } from 'react';
+/** Estado local o controlado. No cambiar de modo durante la vida del componente. */
+export function useControllable(value, initial, onChange) {
+    const [local, setLocal] = useState(initial);
+    const current = value === undefined ? local : value;
+    function change(next) {
+        if (value === undefined)
+            setLocal(next);
+        onChange?.(next);
+    }
+    return [current, change];
+}

package/dist/internal/trigger-label.d.ts

@@ -0,0 +1,5 @@
+/** Un label reenvía su clic al botón después del pointerdown. Cerrar el panel
+ * durante ese pointerdown haría que el clic nativo lo abriese de nuevo. */
+export declare function preventTriggerLabelDismiss(event: CustomEvent<{
+    originalEvent: PointerEvent | FocusEvent;
+}>, trigger: HTMLButtonElement | null): boolean;

package/dist/internal/trigger-label.js

@@ -0,0 +1,26 @@
+/** Un label reenvía su clic al botón después del pointerdown. Cerrar el panel
+ * durante ese pointerdown haría que el clic nativo lo abriese de nuevo. */
+export function preventTriggerLabelDismiss(event, trigger) {
+    if (!trigger || trigger.disabled)
+        return false;
+    const target = event.target;
+    if (!(target instanceof Element) || trigger.contains(target))
+        return false;
+    const label = target.closest('label');
+    if (!label || label.control !== trigger)
+        return false;
+    // Un enlace o control dentro del label tiene su propia acción: no activa
+    // el botón asociado y debe conservar el cierre exterior y su destino de foco.
+    const interactive = target.closest('a[href], button, input, select, textarea, summary, [contenteditable="true"]');
+    if (interactive && label.contains(interactive))
+        return false;
+    const original = event.detail.originalEvent;
+    if (original.type === 'pointerdown') {
+        const pointer = original;
+        if (pointer.button !== 0)
+            return false;
+    }
+    // Cancela solo el descarte de Radix, no el clic nativo ni su traslado de foco.
+    event.preventDefault();
+    return true;
+}

package/dist/loader.d.ts

@@ -0,0 +1,27 @@
+/** Indicador de actividad con animaciones CSS; compatible con renderizado en servidor. */
+import type { CSSProperties, HTMLAttributes, ReactElement } from 'react';
+export interface LoaderProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'color'> {
+    /** Estilo visual de la actividad. @defaultValue 'spinner' */
+    variant?: 'spinner' | 'dots' | 'bars' | 'pulse';
+    /** Tamaño de la figura, independiente de su etiqueta. @defaultValue 'md' */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Color CSS; admite currentColor y variables del tema. @defaultValue 'var(--dgm-primary)' */
+    color?: CSSProperties['color'];
+    /** Texto de carga. Si se omite, se usa la traducción de locale. */
+    label?: string;
+    /** Muestra la etiqueta también visualmente. @defaultValue false */
+    showLabel?: boolean;
+    /** Desactiva el anuncio si el contenedor ya comunica la carga. @defaultValue false */
+    decorative?: boolean;
+    /** Activa el movimiento, respetando siempre prefers-reduced-motion. @defaultValue true */
+    animate?: boolean;
+    /** Idioma de la etiqueta predeterminada. @defaultValue 'en' */
+    locale?: 'es' | 'en';
+}
+/**
+ * La figura es decorativa; solo el texto participa en el anuncio de estado.
+ * No indica un porcentaje ni controla peticiones. La aplicación decide cuándo
+ * mostrarlo y cuándo sustituirlo por el contenido. Usa decorative si ya existe
+ * otro anuncio de carga, especialmente al combinar varios indicadores.
+ */
+export declare function Loader({ variant, size, color, label, showLabel, decorative, animate, locale, className, style, ...props }: LoaderProps): ReactElement;

package/dist/loader.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from './utils.js';
+/**
+ * La figura es decorativa; solo el texto participa en el anuncio de estado.
+ * No indica un porcentaje ni controla peticiones. La aplicación decide cuándo
+ * mostrarlo y cuándo sustituirlo por el contenido. Usa decorative si ya existe
+ * otro anuncio de carga, especialmente al combinar varios indicadores.
+ */
+export function Loader({ variant = 'spinner', size = 'md', color = 'var(--dgm-primary)', label, showLabel = false, decorative = false, animate = true, locale = 'en', className, style, ...props }) {
+    const text = label ?? (locale === 'es' ? 'Cargando…' : 'Loading…');
+    return (_jsxs("span", { ...props, role: decorative ? undefined : 'status', "aria-live": decorative ? undefined : 'polite', "aria-atomic": decorative ? undefined : true, "aria-hidden": decorative || undefined, className: cx('dgm-loader', `dgm-loader--${variant}`, `dgm-loader--${size}`, !animate && 'dgm-loader--static', className), style: { color, ...style }, children: [_jsx("span", { className: "dgm-loader-figure", "aria-hidden": "true", children: variant !== 'spinner' &&
+                    [0, 1, 2].map((index) => (_jsx("span", { className: "dgm-loader-piece", style: { '--dgm-loader-index': index } }, index))) }), _jsx("span", { className: showLabel ? 'dgm-loader-label' : 'dgm-loader-label-hidden', children: text })] }));
+}

package/dist/modal.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode, type ReactElement } from 'react';
+export interface ModalProps {
+    /** La aplicación controla la apertura. */
+    open: boolean;
+    /** Se llama al pulsar Escape, la X o el fondo (si está permitido). */
+    onOpenChange: (open: boolean) => void;
+    /** Título visible y nombre accesible obligatorio. */
+    title: ReactNode;
+    /** Resumen opcional enlazado con aria-describedby. */
+    description?: ReactNode;
+    /** Cuerpo desplazable: formularios, texto u otros componentes. */
+    children: ReactNode;
+    /** Acciones que permanecen fuera del área desplazable. */
+    footer?: ReactNode;
+    /** Etiqueta accesible localizada del botón X. @defaultValue 'Close dialog' */
+    closeLabel?: string;
+    /** Permite cerrar al pulsar fuera. Escape y X siguen disponibles. @defaultValue true */
+    closeOnOverlayClick?: boolean;
+    /** Clase añadida al panel, sin alterar el overlay. */
+    className?: string;
+}
+/** Portal con cabecera fija y cuerpo desplazable para contenidos largos y pantallas pequeñas. */
+export declare function Modal({ open, onOpenChange, title, description, children, footer, closeLabel, closeOnOverlayClick, className, }: ModalProps): ReactElement;

package/dist/modal.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Modal controlado. Radix conserva el foco dentro, bloquea el fondo y gestiona Escape. */
+import { CloseIcon } from './internal/icons.js';
+import { useId, useRef } from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+import { restoreFocus } from './internal/focus.js';
+import { OverlayLayerProvider, useOverlayLayer } from './internal/overlay-layer.js';
+import { cx, hasContent } from './utils.js';
+/** Portal con cabecera fija y cuerpo desplazable para contenidos largos y pantallas pequeñas. */
+export function Modal({ open, onOpenChange, title, description, children, footer, closeLabel = 'Close dialog', closeOnOverlayClick = true, className, }) {
+    const { depth, style: layerStyle } = useOverlayLayer();
+    const returnFocus = useRef(null);
+    const descriptionId = useId();
+    return (_jsx(OverlayLayerProvider, { depth: depth, children: _jsx(Dialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(Dialog.Portal, { children: [_jsx(Dialog.Overlay, { className: "dgm-modal-overlay", style: layerStyle }), _jsxs(Dialog.Content, { style: layerStyle, className: cx('dgm-modal', className), "aria-describedby": hasContent(description) ? descriptionId : undefined, onOpenAutoFocus: () => {
+                            // Se captura antes de que Radix enfoque el contenido, incluso sin Dialog.Trigger.
+                            returnFocus.current =
+                                document.activeElement instanceof HTMLElement ? document.activeElement : null;
+                        }, onCloseAutoFocus: (event) => {
+                            if (returnFocus.current?.isConnected) {
+                                event.preventDefault();
+                                // Restaurar el foco no debe desplazar la página hacia el disparador,
+                                // especialmente si está dentro de una cabecera sticky.
+                                restoreFocus(returnFocus.current);
+                            }
+                        }, onPointerDownOutside: (event) => {
+                            if (!closeOnOverlayClick)
+                                event.preventDefault();
+                        }, children: [_jsxs("header", { className: "dgm-modal-header", children: [_jsx(Dialog.Title, { className: "dgm-modal-title", children: title }), hasContent(description) && (_jsx(Dialog.Description, { id: descriptionId, className: "dgm-description", children: description })), _jsx(Dialog.Close, { className: "dgm-icon-close", "aria-label": closeLabel, children: _jsx(CloseIcon, {}) })] }), _jsx("div", { className: "dgm-modal-body", children: children }), hasContent(footer) && _jsx("footer", { className: "dgm-modal-footer", children: footer })] })] }) }) }));
+}

package/dist/multi-select.d.ts

@@ -0,0 +1,23 @@
+/** Selector múltiple con búsqueda. El panel es un diálogo con checkboxes, no un listbox de selección única. */
+import { type ReactElement, type ReactNode } from 'react';
+import type { ComboboxOption } from './combobox.js';
+export interface MultiSelectProps {
+    label: ReactNode;
+    options: readonly ComboboxOption[];
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    description?: ReactNode;
+    error?: ReactNode;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyMessage?: string;
+    locale?: 'es' | 'en';
+    id?: string;
+    className?: string;
+}
+/** Los valores son IDs del catálogo. FormData.getAll(name) devuelve todos los seleccionados habilitados. */
+export declare function MultiSelect({ label, options, value, defaultValue, onValueChange, name, required, disabled, description, error, placeholder, searchPlaceholder, emptyMessage, locale, id, className, }: MultiSelectProps): ReactElement;

package/dist/multi-select.js

@@ -0,0 +1,63 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/** Selector múltiple con búsqueda. El panel es un diálogo con checkboxes, no un listbox de selección única. */
+import { useEffect, useId, useMemo, useRef, useState, } from 'react';
+import { Popover } from './popover.js';
+import { Button } from './button.js';
+import { Input } from './fields.js';
+import { Checkbox } from './toggles.js';
+import { useControllable } from './internal/state.js';
+import { ChevronIcon, CloseIcon } from './internal/icons.js';
+import { cx, hasContent } from './utils.js';
+import { ScrollHints } from './internal/scroll-hints.js';
+import { useFieldOpen } from './internal/field-open.js';
+/** Los valores son IDs del catálogo. FormData.getAll(name) devuelve todos los seleccionados habilitados. */
+export function MultiSelect({ label, options, value, defaultValue = [], onValueChange, name, required, disabled, description, error, placeholder, searchPlaceholder, emptyMessage, locale = 'en', id, className, }) {
+    const [selected, change] = useControllable(value, defaultValue, onValueChange);
+    const [query, setQuery] = useState('');
+    const [open, setOpen] = useFieldOpen(disabled);
+    // Todos los cierres, incluida la desactivación externa, descartan la búsqueda.
+    useEffect(() => {
+        if (!open)
+            setQuery('');
+    }, [open]);
+    const [invalid, setInvalid] = useState(false);
+    const trigger = useRef(null);
+    const generated = useId();
+    const fieldId = id ?? `dgm-multi-${generated}`;
+    const es = locale === 'es';
+    const selectedValues = useMemo(() => new Set(selected), [selected]);
+    const current = useMemo(() => options.filter((option) => selectedValues.has(option.value)), [options, selectedValues]);
+    const normalizedQuery = query.trim().toLocaleLowerCase(locale);
+    const filtered = useMemo(() => normalizedQuery
+        ? options.filter((option) => [option.label, ...(option.keywords ?? [])]
+            .join(' ')
+            .toLocaleLowerCase(locale)
+            .includes(normalizedQuery))
+        : options, [options, locale, normalizedQuery]);
+    const message = error ||
+        (invalid
+            ? es
+                ? 'Selecciona al menos una opción.'
+                : 'Select at least one option.'
+            : undefined);
+    const describedBy = cx(hasContent(description) && `${fieldId}-description`, hasContent(message) && `${fieldId}-error`) || undefined;
+    function update(next) {
+        if (disabled)
+            return;
+        change(next);
+        setInvalid(false);
+    }
+    return (_jsxs("div", { className: cx('dgm-field', 'dgm-multi-select', className), children: [_jsxs("label", { className: "dgm-label", htmlFor: fieldId, children: [label, required && _jsx("span", { "aria-hidden": "true", children: " *" })] }), _jsx("select", { multiple: true, className: "dgm-form-value", "aria-hidden": "true", tabIndex: -1, name: name, required: required, disabled: disabled, value: current.filter((option) => !option.disabled).map((option) => option.value), onChange: (event) => update(Array.from(event.target.selectedOptions, (option) => option.value)), onInvalid: (event) => {
+                    event.preventDefault();
+                    setInvalid(true);
+                    trigger.current?.focus({ preventScroll: true });
+                }, children: options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))) }), _jsx(Popover, { title: label, open: open, onOpenChange: setOpen, disabled: disabled, closeLabel: es ? 'Cerrar selector' : 'Close selector', className: "dgm-multi-panel", content: _jsxs(_Fragment, { children: [_jsx(Input, { label: es ? 'Buscar opciones' : 'Search options', placeholder: searchPlaceholder, type: "search", value: query, onChange: (event) => setQuery(event.target.value) }), _jsx(ScrollHints, { className: "dgm-multi-scroll-region", children: _jsx("div", { className: "dgm-multi-options", children: filtered.length ? (filtered.map((option) => (_jsx(Checkbox, { disabled: disabled || option.disabled, checked: selectedValues.has(option.value), label: _jsxs("span", { className: "dgm-option-label", children: [option.icon && _jsx("span", { "aria-hidden": "true", children: option.icon }), option.label] }), onChange: (event) => update(event.target.checked
+                                        ? [...selected, option.value]
+                                        : selected.filter((item) => item !== option.value)) }, option.value)))) : (_jsx("p", { role: "status", className: "dgm-description", children: emptyMessage ?? (es ? 'Sin resultados.' : 'No results.') })) }) }), _jsx(Button, { variant: "secondary", fullWidth: true, onClick: () => setOpen(false), children: es ? 'Listo' : 'Done' })] }), children: _jsxs("button", { ref: trigger, type: "button", id: fieldId, disabled: disabled, "aria-describedby": describedBy, "aria-invalid": hasContent(message) || undefined, className: "dgm-input dgm-multi-trigger", children: [_jsx("span", { children: current.length
+                                ? `${current.length} ${es ? 'seleccionadas' : 'selected'}`
+                                : (placeholder ?? (es ? 'Seleccionar opciones' : 'Select options')) }), _jsx(ChevronIcon, {})] }) }), current.length > 0 && (_jsx("ul", { className: "dgm-multi-tags", "aria-label": es ? 'Opciones seleccionadas' : 'Selected options', children: current.map((option) => (_jsxs("li", { children: [option.label, _jsx("button", { type: "button", disabled: disabled || option.disabled, "aria-label": `${es ? 'Quitar' : 'Remove'} ${option.label}`, onClick: () => {
+                                update(selected.filter((item) => item !== option.value));
+                                trigger.current?.focus({ preventScroll: true });
+                            }, children: _jsx(CloseIcon, {}) })] }, option.value))) })), hasContent(description) && (_jsx("span", { id: `${fieldId}-description`, className: "dgm-description", children: description })), hasContent(message) && (_jsx("span", { id: `${fieldId}-error`, className: "dgm-error", children: message }))] }));
+}

package/dist/navigation-menu.d.ts

@@ -0,0 +1,26 @@
+/** Navegación de destinos, no menú de acciones. Cada submenú conserva enlaces HTML auténticos. */
+import { type ReactElement, type ReactNode } from 'react';
+export interface NavigationLink {
+    id: string;
+    label: string;
+    href: string;
+    description?: string;
+    icon?: ReactNode;
+}
+export type NavigationMenuItem = NavigationLink | {
+    id: string;
+    label: string;
+    items: readonly NavigationLink[];
+};
+export interface NavigationMenuProps {
+    label: string;
+    items: readonly NavigationMenuItem[];
+    /** href activo exacto; el consumidor conoce la ruta actual. */
+    currentHref?: string;
+    /** Adaptador para routers: devuelve un único enlace que acepte props y ref. */
+    renderLink?: (item: NavigationLink) => ReactElement;
+    delayDuration?: number;
+    className?: string;
+}
+/** En móvil los elementos se distribuyen en filas y los paneles permanecen dentro del ancho disponible. */
+export declare function NavigationMenu({ label, items, currentHref, renderLink, delayDuration, className, }: NavigationMenuProps): ReactElement;

package/dist/navigation-menu.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/** Navegación de destinos, no menú de acciones. Cada submenú conserva enlaces HTML auténticos. */
+import { useCallback, useRef } from 'react';
+import * as Primitive from '@radix-ui/react-navigation-menu';
+import { ChevronIcon } from './internal/icons.js';
+import { cx } from './utils.js';
+import { observeNavigationOrigin } from './internal/navigation-origin.js';
+/** Cada panel conserva su ancla, también al cambiar entre varios submenús. */
+function NavigationPanel({ label, children }) {
+    const trigger = useRef(null);
+    const cleanup = useRef(undefined);
+    const contentRef = useCallback((panel) => {
+        cleanup.current?.();
+        cleanup.current =
+            panel && trigger.current ? observeNavigationOrigin(panel, trigger.current) : undefined;
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsxs(Primitive.Trigger, { ref: trigger, className: "dgm-navigation-trigger", children: [label, _jsx(ChevronIcon, {})] }), _jsx(Primitive.Content, { ref: contentRef, className: "dgm-navigation-content", children: children })] }));
+}
+/** En móvil los elementos se distribuyen en filas y los paneles permanecen dentro del ancho disponible. */
+export function NavigationMenu({ label, items, currentHref, renderLink, delayDuration = 150, className, }) {
+    function link(item) {
+        const active = currentHref === item.href;
+        return (_jsx(Primitive.Link, { asChild: true, active: active, "aria-current": active ? 'page' : undefined, className: "dgm-navigation-link", children: renderLink ? (renderLink(item)) : (_jsxs("a", { href: item.href, children: [item.icon && _jsx("span", { "aria-hidden": "true", children: item.icon }), _jsxs("span", { children: [item.label, item.description && _jsx("small", { children: item.description })] })] })) }, item.id));
+    }
+    return (_jsx(Primitive.Root, { "aria-label": label, delayDuration: delayDuration, className: cx('dgm-navigation', className), children: _jsx(Primitive.List, { className: "dgm-navigation-list", children: items.map((item) => (_jsx(Primitive.Item, { className: "dgm-navigation-item", children: 'items' in item ? (_jsx(NavigationPanel, { label: item.label, children: _jsx("ul", { children: item.items.map((child) => (_jsx("li", { children: link(child) }, child.id))) }) })) : (link(item)) }, item.id))) }) }));
+}

package/dist/number-input.d.ts

@@ -0,0 +1,14 @@
+import { type ChangeEvent } from 'react';
+import { type InputProps } from './fields.js';
+export interface NumberInputProps extends Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onChange' | 'step'> {
+    /** undefined activa el modo no controlado; '' representa un campo vacío controlado. */
+    value?: number | '';
+    defaultValue?: number;
+    onValueChange?: (value: number | '') => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /** Incremento positivo. @defaultValue 1 */
+    step?: number;
+    locale?: 'es' | 'en';
+}
+/** Conserva min/max, required, reset nativo, ref y validación del navegador. */
+export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/number-input.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Campo numérico nativo. El navegador aplica stepUp/stepDown sin errores de suma decimal. */
+import { MinusIcon, PlusIcon } from './internal/icons.js';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
+import { Input } from './fields.js';
+import { Button } from './button.js';
+/** Conserva min/max, required, reset nativo, ref y validación del navegador. */
+export const NumberInput = forwardRef(function NumberInput({ onValueChange, onChange, step = 1, disabled, readOnly, locale = 'en', ...props }, ref) {
+    const input = useRef(null);
+    useImperativeHandle(ref, () => input.current);
+    if (!Number.isFinite(step) || step <= 0)
+        throw new RangeError('NumberInput step must be positive.');
+    function increment(direction) {
+        const node = input.current;
+        if (!node || disabled || readOnly)
+            return;
+        const previous = node.value;
+        if (direction < 0)
+            node.stepDown();
+        else
+            node.stepUp();
+        const next = node.value;
+        if (next !== previous) {
+            // Restaurar el valor anterior hace que React detecte el cambio nativo y entregue onChange real.
+            node.value = previous;
+            const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set;
+            setter.call(node, next);
+            node.dispatchEvent(new Event('input', { bubbles: true }));
+        }
+        node.focus({ preventScroll: true });
+    }
+    return (_jsxs("div", { className: "dgm-number-field", children: [_jsx(Input, { ...props, type: "number", step: step, disabled: disabled, readOnly: readOnly, ref: input, onChange: (event) => {
+                    onChange?.(event);
+                    onValueChange?.(Number.isFinite(event.target.valueAsNumber) ? event.target.valueAsNumber : '');
+                } }), _jsxs("div", { className: "dgm-number-actions", children: [_jsx(Button, { variant: "outline", iconOnly: true, disabled: disabled || readOnly, "aria-label": locale === 'es' ? 'Disminuir' : 'Decrease', onClick: () => increment(-1), children: _jsx(MinusIcon, {}) }), _jsx(Button, { variant: "outline", iconOnly: true, disabled: disabled || readOnly, "aria-label": locale === 'es' ? 'Aumentar' : 'Increase', onClick: () => increment(1), children: _jsx(PlusIcon, {}) })] })] }));
+});

package/dist/pagination.d.ts

@@ -0,0 +1,24 @@
+import { type ReactElement } from 'react';
+export interface PaginationProps {
+    /** Página actual, comenzando en 1. */
+    page: number;
+    /** Número total de páginas. 0 representa una colección vacía. */
+    pageCount: number;
+    /** Solicita la página elegida; no obtiene datos de red. */
+    onPageChange: (page: number) => void;
+    /** Vecinos alrededor de la página actual. @defaultValue 1 */
+    siblings?: number;
+    /** Desactiva todos los controles, por ejemplo durante una petición. */
+    disabled?: boolean;
+    /** Etiquetas integradas. @defaultValue 'en' */
+    locale?: 'es' | 'en';
+    /** Nombre de la región de navegación. */
+    label?: string;
+    /** Tamaño de los botones. @defaultValue 'sm' */
+    size?: 'sm' | 'md' | 'lg';
+    /** Muestra tantas páginas como quepan en el contenedor; sustituye siblings. @defaultValue false */
+    fullWidth?: boolean;
+    className?: string;
+}
+/** Número acotado de botones incluso con miles de páginas; los saltos no son interactivos. */
+export declare function Pagination({ page, pageCount, onPageChange, siblings, disabled, locale, label, size, fullWidth, className, }: PaginationProps): ReactElement;

package/dist/pagination.js

@@ -0,0 +1,60 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Navegación numerada; el consumidor decide qué contenido corresponde a cada página. */
+import { ChevronLeftIcon, ChevronRightIcon } from './internal/icons.js';
+import { useEffect, useRef, useState } from 'react';
+import { fitPaginationPages } from './internal/pagination.js';
+import { Button } from './button.js';
+import { cx } from './utils.js';
+/** Número acotado de botones incluso con miles de páginas; los saltos no son interactivos. */
+export function Pagination({ page, pageCount, onPageChange, siblings = 1, disabled, locale = 'en', label, size = 'sm', fullWidth = false, className, }) {
+    const navigation = useRef(null);
+    const previousButton = useRef(null);
+    const lastPageButton = useRef(null);
+    const [slots, setSlots] = useState(null);
+    const count = Number.isFinite(pageCount) ? Math.max(0, Math.floor(pageCount)) : 0;
+    const current = Math.max(1, Math.min(count || 1, Number.isFinite(page) ? Math.floor(page) : 1));
+    const radius = Number.isFinite(siblings) ? Math.max(0, Math.min(3, Math.floor(siblings))) : 1;
+    const pages = new Set([1, count]);
+    for (let value = Math.max(1, current - radius); value <= Math.min(count, current + radius); value++)
+        pages.add(value);
+    useEffect(() => {
+        if (!fullWidth) {
+            setSlots(null);
+            return;
+        }
+        const nav = navigation.current;
+        const arrow = previousButton.current;
+        const number = lastPageButton.current;
+        if (!nav || !arrow || !number)
+            return;
+        const measure = () => {
+            const style = getComputedStyle(nav);
+            const gap = parseFloat(style.columnGap) || 0;
+            const available = nav.clientWidth -
+                (parseFloat(style.paddingLeft) || 0) -
+                (parseFloat(style.paddingRight) || 0);
+            const numberWidth = number.getBoundingClientRect().width;
+            const arrowWidth = arrow.getBoundingClientRect().width;
+            if (available <= 0 || numberWidth <= 0)
+                return;
+            // Dos flechas, una separación inicial y una celda + separación por posición.
+            setSlots(Math.max(1, Math.floor((available - 2 * arrowWidth - gap) / (numberWidth + gap))));
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        // También observamos los controles: un cambio de fuente o tamaño altera su ancho.
+        observer.observe(nav);
+        observer.observe(arrow);
+        observer.observe(number);
+        return () => observer.disconnect();
+    }, [fullWidth, size, count, current, slots]);
+    const ordered = fullWidth && slots !== null
+        ? fitPaginationPages(current, count, slots)
+        : [...pages].filter((value) => value > 0 && value <= count).sort((a, b) => a - b);
+    const es = locale === 'es';
+    return (_jsxs("nav", { ref: navigation, style: { '--dgm-page-digits': String(count).length }, "aria-label": label ?? (es ? 'Paginación' : 'Pagination'), className: cx('dgm-pagination', `dgm-pagination--${size}`, fullWidth && 'dgm-pagination--full', className), children: [_jsx(Button, { ref: previousButton, iconOnly: true, size: size, variant: "outline", disabled: disabled || current <= 1 || count === 0, onClick: () => onPageChange(current - 1), "aria-label": es ? 'Página anterior' : 'Previous page', children: _jsx(ChevronLeftIcon, {}) }), ordered.map((value, index) => (_jsxs("span", { className: "dgm-pagination-part", children: [index > 0 && value - ordered[index - 1] > 1 && (_jsx("span", { className: "dgm-pagination-gap", "aria-hidden": "true", children: "\u2026" })), _jsx(Button, { ref: value === ordered[ordered.length - 1] ? lastPageButton : undefined, size: size, variant: value === current ? 'primary' : 'ghost', "aria-label": `${es ? 'Página' : 'Page'} ${value}`, "aria-current": value === current ? 'page' : undefined, disabled: disabled, onClick: () => {
+                            if (value !== current)
+                                onPageChange(value);
+                        }, children: value })] }, value))), _jsx(Button, { iconOnly: true, size: size, variant: "outline", disabled: disabled || current >= count || count === 0, onClick: () => onPageChange(current + 1), "aria-label": es ? 'Página siguiente' : 'Next page', children: _jsx(ChevronRightIcon, {}) })] }));
+}

package/dist/popover.d.ts

@@ -0,0 +1,30 @@
+/** Panel contextual interactivo. Radix coordina foco, colisiones y cierre por Escape. */
+import { type ReactElement, type ReactNode } from 'react';
+export interface PopoverProps {
+    /** Un único botón que acepte props y ref. */
+    children: ReactElement;
+    /** Título visible y nombre accesible del panel. */
+    title: ReactNode;
+    /** Contenido interactivo o informativo. */
+    content: ReactNode;
+    /** Apertura controlada. */
+    open?: boolean;
+    /** Apertura inicial no controlada. @defaultValue false */
+    defaultOpen?: boolean;
+    /** Notifica los cambios de apertura. */
+    onOpenChange?: (open: boolean) => void;
+    /** Lado preferido, con detección de colisiones. @defaultValue 'bottom' */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** Alineación del panel. @defaultValue 'start' */
+    align?: 'start' | 'center' | 'end';
+    /** Separación en píxeles. @defaultValue 8 */
+    sideOffset?: number;
+    /** Desactiva el disparador. */
+    disabled?: boolean;
+    /** Nombre accesible localizado de la X. @defaultValue 'Close popover' */
+    closeLabel?: string;
+    /** Clase del panel renderizado en el portal. */
+    className?: string;
+}
+/** El panel no bloquea la página; un clic fuera conserva su destino de foco. */
+export declare function Popover({ children, title, content, open, defaultOpen, onOpenChange, side, align, sideOffset, disabled, closeLabel, className, }: PopoverProps): ReactElement;

package/dist/popover.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Panel contextual interactivo. Radix coordina foco, colisiones y cierre por Escape. */
+import { useId, useRef } from 'react';
+import * as Primitive from '@radix-ui/react-popover';
+import { restoreFocus } from './internal/focus.js';
+import { preventTriggerLabelDismiss } from './internal/trigger-label.js';
+import { CloseIcon } from './internal/icons.js';
+import { OverlayLayerProvider, useOverlayLayer } from './internal/overlay-layer.js';
+import { cx } from './utils.js';
+/** El panel no bloquea la página; un clic fuera conserva su destino de foco. */
+export function Popover({ children, title, content, open, defaultOpen, onOpenChange, side = 'bottom', align = 'start', sideOffset = 8, disabled, closeLabel = 'Close popover', className, }) {
+    const { depth, style: layerStyle } = useOverlayLayer();
+    const titleId = useId();
+    const trigger = useRef(null);
+    const outside = useRef(false);
+    return (_jsx(OverlayLayerProvider, { depth: depth, children: _jsxs(Primitive.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [_jsx(Primitive.Trigger, { asChild: true, ref: trigger, disabled: disabled, children: children }), _jsx(Primitive.Portal, { children: _jsxs(Primitive.Content, { style: layerStyle, side: side, align: align, sideOffset: sideOffset, collisionPadding: 12, "aria-labelledby": titleId, className: cx('dgm-popover', className), onInteractOutside: (event) => {
+                            if (preventTriggerLabelDismiss(event, trigger.current))
+                                return;
+                            outside.current = true;
+                        }, onCloseAutoFocus: (event) => {
+                            event.preventDefault();
+                            if (!outside.current)
+                                restoreFocus(trigger.current);
+                            outside.current = false;
+                        }, children: [_jsx("div", { className: "dgm-popover-heading", id: titleId, children: title }), _jsx(Primitive.Close, { className: "dgm-icon-close", "aria-label": closeLabel, children: _jsx(CloseIcon, {}) }), _jsx("div", { className: "dgm-popover-body", children: content })] }) })] }) }));
+}

package/dist/progress.d.ts

@@ -0,0 +1,18 @@
+/** Progreso nativo: omitir value representa una duración desconocida. Sin hidratación. */
+import type { ReactElement } from 'react';
+export interface ProgressProps {
+    /** Nombre accesible obligatorio. */
+    label: string;
+    /** Avance actual; se limita a 0..max. undefined es indeterminado. */
+    value?: number;
+    /** Límite superior positivo. @defaultValue 100 */
+    max?: number;
+    /** Muestra también el porcentaje en texto. @defaultValue false */
+    showValue?: boolean;
+    /** Explicación accesible más útil que el número, por ejemplo «2 de 5 archivos». */
+    valueText?: string;
+    /** @defaultValue 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function Progress({ label, value, max, showValue, valueText, size, className, }: ProgressProps): ReactElement;