danielgm-ui 0.2.0 → 0.3.0

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/styles.css

@@ -2854,6 +2854,100 @@ button.dgm-step:hover:not(:disabled),
 .dgm-file-upload > p {
   margin: 0;
 }
+.dgm-image-cropper {
+  display: grid;
+  gap: 0.75rem;
+  min-width: 0;
+  color: var(--dgm-text);
+  font-family: var(--dgm-font, inherit);
+}
+.dgm-image-cropper-stage {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  aspect-ratio: var(--dgm-crop-ratio);
+  border-radius: var(--dgm-radius);
+  background: var(--dgm-subtle);
+  box-shadow: inset 0 0 0 1px var(--dgm-control-border);
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+}
+.dgm-image-cropper-stage[data-dragging] {
+  cursor: grabbing;
+}
+.dgm-image-cropper-stage:focus-visible {
+  outline: 2px solid var(--dgm-primary);
+  outline-offset: 2px;
+}
+.dgm-image-cropper-stage img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  max-width: none;
+  pointer-events: none;
+  transform-origin: center;
+}
+.dgm-image-cropper-guides {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    linear-gradient(
+      to right,
+      transparent 33.33%,
+      rgb(255 255 255 / 38%) 33.33%,
+      rgb(255 255 255 / 38%) calc(33.33% + 1px),
+      transparent calc(33.33% + 1px),
+      transparent 66.66%,
+      rgb(255 255 255 / 38%) 66.66%,
+      rgb(255 255 255 / 38%) calc(66.66% + 1px),
+      transparent calc(66.66% + 1px)
+    ),
+    linear-gradient(
+      to bottom,
+      transparent 33.33%,
+      rgb(255 255 255 / 38%) 33.33%,
+      rgb(255 255 255 / 38%) calc(33.33% + 1px),
+      transparent calc(33.33% + 1px),
+      transparent 66.66%,
+      rgb(255 255 255 / 38%) 66.66%,
+      rgb(255 255 255 / 38%) calc(66.66% + 1px),
+      transparent calc(66.66% + 1px)
+    );
+  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 40%);
+}
+.dgm-image-cropper-empty {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 1rem;
+  color: var(--dgm-muted);
+  text-align: center;
+}
+.dgm-image-cropper > .dgm-description,
+.dgm-image-cropper > .dgm-error {
+  margin: 0;
+}
+.dgm-image-cropper-controls {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.75rem;
+  align-items: end;
+}
+.dgm-image-cropper[data-disabled] .dgm-image-cropper-stage {
+  cursor: default;
+}
+@media (max-width: 35rem) {
+  .dgm-image-cropper-controls {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .dgm-image-cropper-controls .dgm-button {
+    width: 100%;
+  }
+}
 .dgm-stepper {
   color: var(--dgm-text);
   font-family: var(--dgm-font, inherit);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "danielgm-ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Accessible React components for Next.js and the web.",
   "type": "module",
   "main": "./dist/index.js",