danielgm-ui 0.2.0 → 0.4.0

package/TABLER-LICENSE.txt

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2020-2026 Paweł Kuna
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2020-2026 Paweł Kuna
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/combobox.js

@@ -11,7 +11,7 @@ import { CheckIcon, ChevronIcon } from './internal/icons.js';
 import { cx, hasContent } from './utils.js';
 import { ScrollHints } from './internal/scroll-hints.js';
 import { useFieldOpen } from './internal/field-open.js';
-import { OverlayLayerProvider, useOverlayLayer } from './internal/overlay-layer.js';
+import { OverlayLayerProvider, OverlayScrollBoundary, useOverlayLayer, } from './internal/overlay-layer.js';
 /** Selección única de un catálogo; no permite enviar texto libre como valor. */
 export const Combobox = forwardRef(function Combobox({ label, options, value, defaultValue = '', onValueChange, placeholder, searchPlaceholder, emptyMessage, description, error, name, required, disabled, clearable = false, locale = 'en', id, className, wrapperClassName, }, ref) {
     const [selected, change] = useControllable(value, defaultValue, onValueChange);
@@ -39,16 +39,16 @@ export const Combobox = forwardRef(function Combobox({ label, options, value, de
                     event.preventDefault();
                     setInvalid(true);
                     trigger.current?.focus({ preventScroll: true });
-                }, children: [_jsx("option", { value: "" }), options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }), _jsx(OverlayLayerProvider, { depth: depth, children: _jsxs(Popover.Root, { open: open, onOpenChange: setOpen, children: [_jsxs(Popover.Trigger, { ref: trigger, id: controlId, disabled: disabled, "aria-labelledby": `${controlId}-label ${controlId}-value`, "aria-describedby": describedBy, "aria-invalid": hasContent(message) || undefined, className: cx('dgm-input', 'dgm-combobox-trigger', className), children: [_jsxs("span", { className: "dgm-custom-value", id: `${controlId}-value`, children: [current?.icon && (_jsx("span", { className: "dgm-option-icon", "aria-hidden": "true", children: current.icon })), current?.label ?? placeholder ?? (es ? 'Seleccionar…' : 'Select…')] }), _jsx("span", { className: "dgm-custom-chevron", children: _jsx(ChevronIcon, {}) })] }), _jsx(Popover.Portal, { children: _jsx(Popover.Content, { className: "dgm-combobox-panel", style: layerStyle, sideOffset: 6, collisionPadding: 12, "aria-labelledby": `${controlId}-label`, onInteractOutside: (event) => {
-                                    if (preventTriggerLabelDismiss(event, trigger.current))
-                                        return;
-                                    interactedOutside.current = true;
-                                }, onCloseAutoFocus: (event) => {
-                                    event.preventDefault();
-                                    if (!interactedOutside.current)
-                                        restoreFocus(trigger.current);
-                                    interactedOutside.current = false;
-                                }, children: _jsxs(Command, { defaultValue: selected, className: "dgm-command", label: es ? 'Opciones' : 'Options', loop: true, children: [_jsx(Command.Input, { className: "dgm-command-input", "aria-label": searchPlaceholder ?? (es ? 'Buscar opciones' : 'Search options'), placeholder: searchPlaceholder ?? (es ? 'Buscar…' : 'Search…') }), _jsx(ScrollHints, { children: _jsxs(Command.List, { className: "dgm-command-list", children: [_jsx(Command.Empty, { className: "dgm-command-empty", children: emptyMessage ?? (es ? 'Sin resultados.' : 'No results.') }), options.map((option) => (_jsxs(Command.Item, { value: option.value, keywords: [option.label, ...(option.keywords ?? [])], disabled: disabled || option.disabled, onSelect: () => choose(option.value), className: "dgm-command-item", children: [option.icon && (_jsx("span", { className: "dgm-option-icon", "aria-hidden": "true", children: option.icon })), _jsx("span", { children: option.label }), option.value === selected && (_jsx("span", { className: "dgm-command-check", "aria-hidden": "true", children: _jsx(CheckIcon, {}) }))] }, option.value)))] }) })] }) }) })] }) }), clearable && selected && (_jsx("button", { type: "button", className: "dgm-text-action", disabled: disabled, onClick: () => {
+                }, children: [_jsx("option", { value: "" }), options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }), _jsx(OverlayLayerProvider, { depth: depth, children: _jsxs(Popover.Root, { open: open, onOpenChange: setOpen, children: [_jsxs(Popover.Trigger, { ref: trigger, id: controlId, disabled: disabled, "aria-labelledby": `${controlId}-label ${controlId}-value`, "aria-describedby": describedBy, "aria-invalid": hasContent(message) || undefined, className: cx('dgm-input', 'dgm-combobox-trigger', className), children: [_jsxs("span", { className: "dgm-custom-value", id: `${controlId}-value`, children: [current?.icon && (_jsx("span", { className: "dgm-option-icon", "aria-hidden": "true", children: current.icon })), current?.label ?? placeholder ?? (es ? 'Seleccionar…' : 'Select…')] }), _jsx("span", { className: "dgm-custom-chevron", children: _jsx(ChevronIcon, {}) })] }), _jsx(Popover.Portal, { children: _jsx(OverlayScrollBoundary, { children: _jsx(Popover.Content, { className: "dgm-combobox-panel", style: layerStyle, sideOffset: 6, collisionPadding: 12, "aria-labelledby": `${controlId}-label`, onInteractOutside: (event) => {
+                                        if (preventTriggerLabelDismiss(event, trigger.current))
+                                            return;
+                                        interactedOutside.current = true;
+                                    }, onCloseAutoFocus: (event) => {
+                                        event.preventDefault();
+                                        if (!interactedOutside.current)
+                                            restoreFocus(trigger.current);
+                                        interactedOutside.current = false;
+                                    }, children: _jsxs(Command, { defaultValue: selected, className: "dgm-command", label: es ? 'Opciones' : 'Options', loop: true, children: [_jsx(Command.Input, { className: "dgm-command-input", "aria-label": searchPlaceholder ?? (es ? 'Buscar opciones' : 'Search options'), placeholder: searchPlaceholder ?? (es ? 'Buscar…' : 'Search…') }), _jsx(ScrollHints, { children: _jsxs(Command.List, { className: "dgm-command-list", children: [_jsx(Command.Empty, { className: "dgm-command-empty", children: emptyMessage ?? (es ? 'Sin resultados.' : 'No results.') }), options.map((option) => (_jsxs(Command.Item, { value: option.value, keywords: [option.label, ...(option.keywords ?? [])], disabled: disabled || option.disabled, onSelect: () => choose(option.value), className: "dgm-command-item", children: [option.icon && (_jsx("span", { className: "dgm-option-icon", "aria-hidden": "true", children: option.icon })), _jsx("span", { children: option.label }), option.value === selected && (_jsx("span", { className: "dgm-command-check", "aria-hidden": "true", children: _jsx(CheckIcon, {}) }))] }, option.value)))] }) })] }) }) }) })] }) }), clearable && selected && (_jsx("button", { type: "button", className: "dgm-text-action", disabled: disabled, onClick: () => {
                     choose('');
                     trigger.current?.focus({ preventScroll: true });
                 }, children: es ? 'Borrar selección' : 'Clear selection' })), hasContent(description) && (_jsx("span", { className: "dgm-description", id: `${controlId}-description`, children: description })), hasContent(message) && (_jsx("span", { className: "dgm-error", id: `${controlId}-error`, children: message }))] }));

package/dist/date-picker.js

@@ -11,7 +11,7 @@ import { useControllable } from './internal/state.js';
 import { restoreFocus } from './internal/focus.js';
 import { preventTriggerLabelDismiss } from './internal/trigger-label.js';
 import { useFieldOpen } from './internal/field-open.js';
-import { OverlayLayerProvider, useOverlayLayer } from './internal/overlay-layer.js';
+import { OverlayLayerProvider, OverlayScrollBoundary, useOverlayLayer, } from './internal/overlay-layer.js';
 import { cx, hasContent } from './utils.js';
 /** Conserva la orientación de DayPicker y unifica sus controles con el resto de iconos. */
 function CalendarChevron({ orientation = 'down', size = 18, className, style, }) {
@@ -112,22 +112,22 @@ function CalendarField({ props, from, to, range, onSelect, }) {
                     event.preventDefault();
                     setInvalid(true);
                     trigger.current?.focus({ preventScroll: true });
-                } })), _jsx(OverlayLayerProvider, { depth: depth, children: _jsxs(Popover.Root, { open: open, onOpenChange: setOpen, children: [_jsxs(Popover.Trigger, { ref: trigger, id: controlId, disabled: disabled, className: cx('dgm-input', 'dgm-date-trigger', className), "aria-labelledby": `${controlId}-label ${controlId}-value`, "aria-describedby": describedBy, "aria-invalid": hasContent(message) || undefined, children: [_jsx("span", { id: `${controlId}-value`, children: display }), _jsx(CalendarIcon, {})] }), _jsx(Popover.Portal, { children: _jsx(Popover.Content, { className: "dgm-calendar-panel", style: layerStyle, sideOffset: 6, collisionPadding: 12, "aria-labelledby": `${controlId}-label`, onInteractOutside: (event) => {
-                                    if (preventTriggerLabelDismiss(event, trigger.current))
-                                        return;
-                                    interactedOutside.current = true;
-                                }, onCloseAutoFocus: (event) => {
-                                    event.preventDefault();
-                                    if (!interactedOutside.current)
-                                        restoreFocus(trigger.current);
-                                    interactedOutside.current = false;
-                                }, children: range ? (_jsx(DayPicker, { ...shared, mode: "range", excludeDisabled: true, selected: first ? { from: first, to: last } : undefined, onSelect: (selection, day) => {
-                                        // El primer clic inicia un intervalo; el segundo lo completa, incluso en el mismo día.
-                                        if (!first || last)
-                                            choose(toDay(day));
-                                        else
-                                            choose(selection?.from ? toDay(selection.from) : undefined, selection?.to ? toDay(selection.to) : undefined);
-                                    } })) : (_jsx(DayPicker, { ...shared, mode: "single", selected: first, onSelect: (selection) => choose(selection ? toDay(selection) : undefined) })) }) })] }) }), clearable && first && (_jsx("button", { type: "button", className: "dgm-text-action", disabled: disabled, onClick: () => {
+                } })), _jsx(OverlayLayerProvider, { depth: depth, children: _jsxs(Popover.Root, { open: open, onOpenChange: setOpen, children: [_jsxs(Popover.Trigger, { ref: trigger, id: controlId, disabled: disabled, className: cx('dgm-input', 'dgm-date-trigger', className), "aria-labelledby": `${controlId}-label ${controlId}-value`, "aria-describedby": describedBy, "aria-invalid": hasContent(message) || undefined, children: [_jsx("span", { id: `${controlId}-value`, children: display }), _jsx(CalendarIcon, {})] }), _jsx(Popover.Portal, { children: _jsx(OverlayScrollBoundary, { children: _jsx(Popover.Content, { className: "dgm-calendar-panel", style: layerStyle, sideOffset: 6, collisionPadding: 12, "aria-labelledby": `${controlId}-label`, onInteractOutside: (event) => {
+                                        if (preventTriggerLabelDismiss(event, trigger.current))
+                                            return;
+                                        interactedOutside.current = true;
+                                    }, onCloseAutoFocus: (event) => {
+                                        event.preventDefault();
+                                        if (!interactedOutside.current)
+                                            restoreFocus(trigger.current);
+                                        interactedOutside.current = false;
+                                    }, children: range ? (_jsx(DayPicker, { ...shared, mode: "range", excludeDisabled: true, selected: first ? { from: first, to: last } : undefined, onSelect: (selection, day) => {
+                                            // El primer clic inicia un intervalo; el segundo lo completa, incluso en el mismo día.
+                                            if (!first || last)
+                                                choose(toDay(day));
+                                            else
+                                                choose(selection?.from ? toDay(selection.from) : undefined, selection?.to ? toDay(selection.to) : undefined);
+                                        } })) : (_jsx(DayPicker, { ...shared, mode: "single", selected: first, onSelect: (selection) => choose(selection ? toDay(selection) : undefined) })) }) }) })] }) }), clearable && first && (_jsx("button", { type: "button", className: "dgm-text-action", disabled: disabled, onClick: () => {
                     choose();
                     trigger.current?.focus({ preventScroll: true });
                 }, children: isSpanish ? 'Borrar fecha' : 'Clear date' })), hasContent(description) && (_jsx("span", { className: "dgm-description", id: `${controlId}-description`, children: description })), hasContent(message) && (_jsx("span", { className: "dgm-error", id: `${controlId}-error`, children: message }))] }));

package/dist/drawer.js

@@ -10,9 +10,10 @@ import { cx, hasContent } from './utils.js';
 /** Atrapa el foco, bloquea el fondo y mantiene la cabecera y las acciones visibles. */
 export function Drawer({ open, onOpenChange, title, description, children, footer, side = 'right', closeLabel = 'Close drawer', closeOnOverlayClick = true, className, }) {
     const { depth, style: layerStyle } = useOverlayLayer();
+    const scrollContainer = useRef(null);
     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-drawer', `dgm-drawer--${side}`, className), "aria-describedby": hasContent(description) ? descriptionId : undefined, onOpenAutoFocus: () => {
+    return (_jsx(OverlayLayerProvider, { depth: depth, scrollContainer: scrollContainer, 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, { ref: scrollContainer, style: layerStyle, className: cx('dgm-drawer', `dgm-drawer--${side}`, className), "aria-describedby": hasContent(description) ? descriptionId : undefined, onOpenAutoFocus: () => {
                             returnFocus.current =
                                 document.activeElement instanceof HTMLElement ? document.activeElement : null;
                         }, onCloseAutoFocus: (event) => {

package/dist/image-cropper.d.ts

@@ -0,0 +1,24 @@
+/** Recorte local: el navegador decodifica la imagen y exporta el área visible a un Blob. */
+import { type HTMLAttributes, type ReactElement } from 'react';
+/** Opciones del recortador. Las URLs externas requieren CORS para poder exportarse. */
+export interface ImageCropperProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onError'> {
+    /** Archivo local, Blob o URL de la imagen; null muestra el estado vacío. */
+    src: string | Blob | null;
+    /** Recibe el archivo recortado, sin realizar ninguna subida. */
+    onCrop: (blob: Blob) => void | Promise<void>;
+    /** Relación anchura/altura del recorte. @defaultValue 1 */
+    aspectRatio?: number;
+    /** Anchura de salida en píxeles. @defaultValue 512 */
+    outputWidth?: number;
+    /** Formato de salida del canvas. @defaultValue 'image/png' */
+    outputType?: 'image/png' | 'image/jpeg' | 'image/webp';
+    /** Calidad JPEG/WebP entre 0 y 1. @defaultValue 0.92 */
+    quality?: number;
+    /** Límite superior del zoom respecto al encuadre inicial. @defaultValue 4 */
+    maxZoom?: number;
+    /** Idioma de los controles integrados. @defaultValue 'en' */
+    locale?: 'es' | 'en';
+    disabled?: boolean;
+}
+/** Visor con arrastre, zoom, desplazamiento por teclado y exportación al confirmar. */
+export declare function ImageCropper({ src, onCrop, aspectRatio, outputWidth, outputType, quality, maxZoom, locale, disabled, className, style, ...props }: ImageCropperProps): ReactElement;

package/dist/image-cropper.js

@@ -0,0 +1,180 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Recorte local: el navegador decodifica la imagen y exporta el área visible a un Blob. */
+import { useEffect, useId, useRef, useState, } from 'react';
+import { Button } from './button.js';
+import { Slider } from './slider.js';
+import { clampCropOffset, getCropGeometry } from './internal/image-crop.js';
+import { cx } from './utils.js';
+/** Visor con arrastre, zoom, desplazamiento por teclado y exportación al confirmar. */
+export function ImageCropper({ src, onCrop, aspectRatio = 1, outputWidth = 512, outputType = 'image/png', quality = 0.92, maxZoom = 4, locale = 'en', disabled = false, className, style, ...props }) {
+    const [imageUrl, setImageUrl] = useState();
+    const [imageSize, setImageSize] = useState();
+    const [viewport, setViewport] = useState({ width: 0, height: 0 });
+    const [zoom, setZoom] = useState(1);
+    const [offset, setOffset] = useState({ x: 0, y: 0 });
+    const [dragging, setDragging] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const [message, setMessage] = useState();
+    const stage = useRef(null);
+    const image = useRef(null);
+    const drag = useRef(undefined);
+    const id = useId();
+    const es = locale === 'es';
+    const ratio = Number.isFinite(aspectRatio) && aspectRatio > 0 ? aspectRatio : 1;
+    const zoomLimit = Number.isFinite(maxZoom) ? Math.max(1, maxZoom) : 4;
+    const width = Number.isFinite(outputWidth) ? Math.max(1, Math.round(outputWidth)) : 512;
+    const geometry = imageSize && viewport.width > 0 && viewport.height > 0
+        ? getCropGeometry(imageSize.width, imageSize.height, viewport.width, viewport.height, zoom, offset)
+        : undefined;
+    useEffect(() => {
+        if (!geometry)
+            return;
+        setOffset((current) => {
+            const next = clampCropOffset(current, geometry);
+            return next.x === current.x && next.y === current.y ? current : next;
+        });
+        // La posición se ajusta solo cuando cambian las medidas o el zoom.
+    }, [imageSize?.width, imageSize?.height, viewport.width, viewport.height, zoom]);
+    useEffect(() => {
+        drag.current = undefined;
+        setDragging(false);
+        setImageSize(undefined);
+        setOffset({ x: 0, y: 0 });
+        setZoom(1);
+        setMessage(undefined);
+        if (!src) {
+            setImageUrl(undefined);
+            return;
+        }
+        const url = typeof src === 'string' ? src : URL.createObjectURL(src);
+        setImageUrl(url);
+        return () => {
+            if (typeof src !== 'string')
+                URL.revokeObjectURL(url);
+        };
+    }, [src]);
+    useEffect(() => {
+        if (!disabled)
+            return;
+        drag.current = undefined;
+        setDragging(false);
+    }, [disabled]);
+    useEffect(() => {
+        if (!stage.current)
+            return;
+        const observer = new ResizeObserver(([entry]) => {
+            setViewport({ width: entry.contentRect.width, height: entry.contentRect.height });
+        });
+        observer.observe(stage.current);
+        return () => observer.disconnect();
+    }, []);
+    function move(next) {
+        if (!geometry)
+            return;
+        setOffset(clampCropOffset(next, geometry));
+    }
+    async function crop() {
+        if (!geometry || !image.current || saving || disabled)
+            return;
+        setSaving(true);
+        setMessage(undefined);
+        try {
+            const canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = Math.max(1, Math.round(width / ratio));
+            const context = canvas.getContext('2d');
+            if (!context)
+                throw new Error('Canvas unavailable');
+            context.drawImage(image.current, geometry.x, geometry.y, geometry.width, geometry.height, 0, 0, canvas.width, canvas.height);
+            const blob = await new Promise((resolve, reject) => {
+                canvas.toBlob((result) => (result ? resolve(result) : reject(new Error('Image export failed'))), outputType, Math.max(0, Math.min(1, quality)));
+            });
+            await onCrop(blob);
+        }
+        catch {
+            setMessage(es
+                ? 'No se pudo recortar la imagen. Comprueba que la URL permita CORS.'
+                : 'Could not crop the image. Check that the URL allows CORS.');
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    const labels = es
+        ? {
+            region: 'Área de recorte',
+            hint: 'Arrastra la imagen o usa las flechas para encuadrarla.',
+            zoom: 'Zoom',
+            crop: 'Recortar imagen',
+            empty: 'Selecciona una imagen para recortar.',
+            invalid: 'No se pudo abrir la imagen.',
+        }
+        : {
+            region: 'Crop area',
+            hint: 'Drag the image or use the arrow keys to position it.',
+            zoom: 'Zoom',
+            crop: 'Crop image',
+            empty: 'Choose an image to crop.',
+            invalid: 'Could not open the image.',
+        };
+    return (_jsxs("div", { ...props, className: cx('dgm-image-cropper', className), style: style, "data-disabled": disabled || undefined, children: [_jsxs("div", { ref: stage, className: "dgm-image-cropper-stage", style: { '--dgm-crop-ratio': ratio }, role: "group", "aria-label": labels.region, "aria-describedby": `${id}-hint`, tabIndex: imageSize && !disabled ? 0 : -1, "data-dragging": dragging || undefined, onPointerDown: (event) => {
+                    if (!geometry || disabled || event.button !== 0)
+                        return;
+                    event.currentTarget.focus();
+                    event.currentTarget.setPointerCapture(event.pointerId);
+                    drag.current = {
+                        pointerId: event.pointerId,
+                        x: event.clientX,
+                        y: event.clientY,
+                        offsetX: offset.x,
+                        offsetY: offset.y,
+                    };
+                    setDragging(true);
+                }, onPointerMove: (event) => {
+                    if (disabled || !drag.current || drag.current.pointerId !== event.pointerId)
+                        return;
+                    move({
+                        x: drag.current.offsetX + event.clientX - drag.current.x,
+                        y: drag.current.offsetY + event.clientY - drag.current.y,
+                    });
+                }, onPointerUp: (event) => {
+                    if (drag.current?.pointerId !== event.pointerId)
+                        return;
+                    drag.current = undefined;
+                    setDragging(false);
+                    event.currentTarget.releasePointerCapture(event.pointerId);
+                }, onPointerCancel: () => {
+                    drag.current = undefined;
+                    setDragging(false);
+                }, onKeyDown: (event) => {
+                    if (!geometry || disabled)
+                        return;
+                    const step = event.shiftKey ? 1 : 10;
+                    const delta = {
+                        ArrowLeft: { x: -step, y: 0 },
+                        ArrowRight: { x: step, y: 0 },
+                        ArrowUp: { x: 0, y: -step },
+                        ArrowDown: { x: 0, y: step },
+                    }[event.key];
+                    if (!delta)
+                        return;
+                    event.preventDefault();
+                    move({ x: offset.x + delta.x, y: offset.y + delta.y });
+                }, children: [imageUrl ? (_jsx("img", { ref: image, alt: "", crossOrigin: typeof src === 'string' && !src.startsWith('data:') && !src.startsWith('blob:')
+                            ? 'anonymous'
+                            : undefined, src: imageUrl, draggable: false, onLoad: (event) => {
+                            const current = event.currentTarget;
+                            setImageSize({ width: current.naturalWidth, height: current.naturalHeight });
+                            setMessage(undefined);
+                        }, onError: () => {
+                            setImageSize(undefined);
+                            setMessage(labels.invalid);
+                        }, style: geometry
+                            ? {
+                                width: imageSize?.width,
+                                height: imageSize?.height,
+                                transform: `translate(-50%, -50%) translate(${Math.max(-geometry.maxOffsetX, Math.min(geometry.maxOffsetX, offset.x))}px, ${Math.max(-geometry.maxOffsetY, Math.min(geometry.maxOffsetY, offset.y))}px) scale(${geometry.scale})`,
+                            }
+                            : { visibility: 'hidden' } })) : (_jsx("span", { className: "dgm-image-cropper-empty", children: labels.empty })), imageSize && _jsx("span", { className: "dgm-image-cropper-guides", "aria-hidden": "true" })] }), _jsx("p", { id: `${id}-hint`, className: "dgm-description", children: labels.hint }), _jsxs("div", { className: "dgm-image-cropper-controls", children: [_jsx(Slider, { label: labels.zoom, min: 1, max: Math.max(1.01, zoomLimit), step: 0.01, value: zoom, onValueChange: setZoom, formatValue: (value) => `${Math.round(value * 100)}%`, disabled: disabled || !imageSize || zoomLimit === 1 }), _jsx(Button, { onClick: crop, disabled: disabled || !geometry, loading: saving, children: labels.crop })] }), message && (_jsx("p", { className: "dgm-error", role: "alert", children: message }))] }));
+}

package/dist/index.d.ts

@@ -30,6 +30,7 @@ export { CheckboxGroup, SwitchGroup, type CheckboxGroupProps, type SwitchGroupPr
 export { DatePicker, DateRangePicker, type DatePickerProps, type DateRangePickerProps, type DateRangeValue, type DatePickerBaseProps, } from './date-picker.js';
 export { DataTable, type DataTableProps, type DataColumn, type DataTableSort, } from './data-table.js';
 export { FileUpload, type FileUploadProps, type FileRejection } from './file-upload.js';
+export { ImageCropper, type ImageCropperProps } from './image-cropper.js';
 export { CommandPalette, type CommandPaletteProps, type CommandAction } from './command-palette.js';
 export { Stepper, type StepperProps, type StepItem } from './stepper.js';
 export { DropdownMenu, type DropdownMenuProps, type DropdownMenuItem } from './dropdown-menu.js';

package/dist/index.js

@@ -30,6 +30,7 @@ export { CheckboxGroup, SwitchGroup, } from './choice-group.js';
 export { DatePicker, DateRangePicker, } from './date-picker.js';
 export { DataTable, } from './data-table.js';
 export { FileUpload } from './file-upload.js';
+export { ImageCropper } from './image-cropper.js';
 export { CommandPalette } from './command-palette.js';
 export { Stepper } from './stepper.js';
 export { DropdownMenu } from './dropdown-menu.js';

package/dist/internal/image-crop.d.ts

@@ -0,0 +1,25 @@
+/** Geometría compartida entre el visor y la exportación al canvas. */
+export interface CropGeometry {
+    scale: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    maxOffsetX: number;
+    maxOffsetY: number;
+}
+export declare function clampCropOffset(offset: {
+    x: number;
+    y: number;
+}, bounds: {
+    maxOffsetX: number;
+    maxOffsetY: number;
+}): {
+    x: number;
+    y: number;
+};
+/** El mismo rectángulo gobierna la posición visible y los píxeles exportados. */
+export declare function getCropGeometry(imageWidth: number, imageHeight: number, viewportWidth: number, viewportHeight: number, zoom: number, offset: {
+    x: number;
+    y: number;
+}): CropGeometry;

package/dist/internal/image-crop.js

@@ -0,0 +1,22 @@
+export function clampCropOffset(offset, bounds) {
+    return {
+        x: Math.max(-bounds.maxOffsetX, Math.min(bounds.maxOffsetX, offset.x)),
+        y: Math.max(-bounds.maxOffsetY, Math.min(bounds.maxOffsetY, offset.y)),
+    };
+}
+/** El mismo rectángulo gobierna la posición visible y los píxeles exportados. */
+export function getCropGeometry(imageWidth, imageHeight, viewportWidth, viewportHeight, zoom, offset) {
+    const scale = Math.max(viewportWidth / imageWidth, viewportHeight / imageHeight) * zoom;
+    const maxOffsetX = Math.max(0, (imageWidth * scale - viewportWidth) / 2);
+    const maxOffsetY = Math.max(0, (imageHeight * scale - viewportHeight) / 2);
+    const limited = clampCropOffset(offset, { maxOffsetX, maxOffsetY });
+    return {
+        scale,
+        x: (imageWidth * scale - viewportWidth) / (2 * scale) - limited.x / scale,
+        y: (imageHeight * scale - viewportHeight) / (2 * scale) - limited.y / scale,
+        width: viewportWidth / scale,
+        height: viewportHeight / scale,
+        maxOffsetX,
+        maxOffsetY,
+    };
+}

package/dist/internal/overlay-layer.d.ts

@@ -1,12 +1,23 @@
 /** La profundidad React atraviesa los portales sin cambiar su destino ni su geometría. */
-import { type CSSProperties, type ReactNode } from 'react';
+import { type CSSProperties, type ReactNode, type ReactElement, type RefObject } from 'react';
+/**
+ * El bloqueo superior de Radix excluye los portales hermanos de Dialog.Content.
+ * Este límite registra el panel y conserva el diálogo como región permitida;
+ * no activa el modo modal de Popover, que bloquearía etiquetas y otros controles.
+ * forwardProps evita añadir contenedores que alteren la geometría de Popper.
+ * La ref llega al DOM para que Presence conserve las animaciones de salida.
+ */
+export declare const OverlayScrollBoundary: import("react").ForwardRefExoticComponent<{
+    children: ReactElement;
+} & import("react").RefAttributes<HTMLDivElement>>;
 /** Cada panel pertenece a la siguiente capa del panel que contiene su disparador. */
 export declare function useOverlayLayer(): {
     depth: number;
     style: CSSProperties;
 };
 /** Sin contenedor DOM: los portales siguen escapando del overflow y transform del padre. */
-export declare function OverlayLayerProvider({ depth, children }: {
+export declare function OverlayLayerProvider({ depth, children, scrollContainer, }: {
     depth: number;
     children: ReactNode;
+    scrollContainer?: RefObject<HTMLDivElement | null>;
 }): import("react").JSX.Element;

package/dist/internal/overlay-layer.js

@@ -1,7 +1,20 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 /** La profundidad React atraviesa los portales sin cambiar su destino ni su geometría. */
-import { createContext, useContext } from 'react';
+import { createContext, forwardRef, useContext, } from 'react';
+import { RemoveScroll } from 'react-remove-scroll';
+const OverlayScrollContainer = createContext(undefined);
+/**
+ * El bloqueo superior de Radix excluye los portales hermanos de Dialog.Content.
+ * Este límite registra el panel y conserva el diálogo como región permitida;
+ * no activa el modo modal de Popover, que bloquearía etiquetas y otros controles.
+ * forwardProps evita añadir contenedores que alteren la geometría de Popper.
+ * La ref llega al DOM para que Presence conserve las animaciones de salida.
+ */
+export const OverlayScrollBoundary = forwardRef(function OverlayScrollBoundary({ children }, ref) {
+    const container = useContext(OverlayScrollContainer);
+    return (_jsx(RemoveScroll, { ref: ref, enabled: !!container, shards: container ? [container] : [], forwardProps: true, allowPinchZoom: true, removeScrollBar: false, children: children }));
+});
 const OverlayDepth = createContext(-1);
 /** Cada panel pertenece a la siguiente capa del panel que contiene su disparador. */
 export function useOverlayLayer() {
@@ -9,6 +22,7 @@ export function useOverlayLayer() {
     return { depth, style: { '--dgm-layer-depth': depth } };
 }
 /** Sin contenedor DOM: los portales siguen escapando del overflow y transform del padre. */
-export function OverlayLayerProvider({ depth, children }) {
-    return _jsx(OverlayDepth.Provider, { value: depth, children: children });
+export function OverlayLayerProvider({ depth, children, scrollContainer, }) {
+    const inheritedContainer = useContext(OverlayScrollContainer);
+    return (_jsx(OverlayDepth.Provider, { value: depth, children: _jsx(OverlayScrollContainer.Provider, { value: scrollContainer ?? inheritedContainer, children: children }) }));
 }

package/dist/modal.js

@@ -10,9 +10,10 @@ 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 scrollContainer = useRef(null);
     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: () => {
+    return (_jsx(OverlayLayerProvider, { depth: depth, scrollContainer: scrollContainer, 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, { ref: scrollContainer, 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;

package/dist/multi-select.d.ts

@@ -4,8 +4,11 @@ import type { ComboboxOption } from './combobox.js';
 export interface MultiSelectProps {
     label: ReactNode;
     options: readonly ComboboxOption[];
+    /** IDs seleccionados. Controla esta prop para leer y presentar la selección fuera del selector. */
     value?: string[];
+    /** Selección inicial no controlada; los cambios se comunican mediante onValueChange. */
     defaultValue?: string[];
+    /** Notifica los IDs tras cada cambio, sin imponer cómo se representan externamente. */
     onValueChange?: (value: string[]) => void;
     name?: string;
     required?: boolean;

package/dist/multi-select.js

@@ -7,7 +7,7 @@ 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 { ChevronIcon } from './internal/icons.js';
 import { cx, hasContent } from './utils.js';
 import { ScrollHints } from './internal/scroll-hints.js';
 import { useFieldOpen } from './internal/field-open.js';
@@ -56,8 +56,5 @@ export function MultiSelect({ label, options, value, defaultValue = [], onValueC
                                         ? [...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 }))] }));
+                                : (placeholder ?? (es ? 'Seleccionar opciones' : 'Select options')) }), _jsx(ChevronIcon, {})] }) }), 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/popover.js

@@ -6,7 +6,7 @@ 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 { OverlayLayerProvider, OverlayScrollBoundary, 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, }) {
@@ -14,14 +14,14 @@ export function Popover({ children, title, content, open, defaultOpen, onOpenCha
     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 })] }) })] }) }));
+    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: _jsx(OverlayScrollBoundary, { 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 })] }) }) })] }) }));
 }