@wallarm-org/design-system 4.4.0 → 4.5.0

package/dist/components/ImageCropper/ImageCropperProvider.js

@@ -0,0 +1,46 @@
+import { c } from "react/compiler-runtime";
+import { createContext, useContext, useLayoutEffect } from "react";
+const ImageCropperProvider = /*#__PURE__*/ createContext(null);
+const useImageCropperInternal = ()=>{
+    const context = useContext(ImageCropperProvider);
+    if (!context) throw new Error("ImageCropper parts must be rendered inside ImageCropper.");
+    return context;
+};
+const useImageCropperPartId = (part, id)=>{
+    const $ = c(5);
+    const { setPartIds } = useImageCropperInternal();
+    let t0;
+    let t1;
+    if ($[0] !== id || $[1] !== part || $[2] !== setPartIds) {
+        t0 = ()=>{
+            setPartIds((current)=>{
+                if (current[part] === id) return current;
+                return {
+                    ...current,
+                    [part]: id
+                };
+            });
+            return ()=>{
+                setPartIds((current_0)=>current_0[part] === id ? {
+                        ...current_0,
+                        [part]: void 0
+                    } : current_0);
+            };
+        };
+        t1 = [
+            part,
+            id,
+            setPartIds
+        ];
+        $[0] = id;
+        $[1] = part;
+        $[2] = setPartIds;
+        $[3] = t0;
+        $[4] = t1;
+    } else {
+        t0 = $[3];
+        t1 = $[4];
+    }
+    useLayoutEffect(t0, t1);
+};
+export { ImageCropperProvider, useImageCropperInternal, useImageCropperPartId };

package/dist/components/ImageCropper/ImageCropperSelection.d.ts

@@ -0,0 +1,7 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface ImageCropperSelectionProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+}
+/** The keyboard/pointer target representing the fixed crop frame. */
+export declare const ImageCropperSelection: FC<ImageCropperSelectionProps>;

package/dist/components/ImageCropper/ImageCropperSelection.js

@@ -0,0 +1,91 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { ImageCropper } from "@ark-ui/react/image-cropper";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { useImageCropperInternal, useImageCropperPartId } from "./ImageCropperProvider.js";
+const ImageCropperSelection = (t0)=>{
+    const $ = c(24);
+    let className;
+    let id;
+    let onPointerDownCapture;
+    let props;
+    let ref;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, id, className, onPointerDownCapture, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = className;
+        $[2] = id;
+        $[3] = onPointerDownCapture;
+        $[4] = props;
+        $[5] = ref;
+        $[6] = testIdProp;
+    } else {
+        className = $[1];
+        id = $[2];
+        onPointerDownCapture = $[3];
+        props = $[4];
+        ref = $[5];
+        testIdProp = $[6];
+    }
+    const { api, selection } = useImageCropperInternal();
+    const testId = useTestId("selection", testIdProp);
+    useImageCropperPartId("selection", id);
+    const t1 = api.ready ? 0 : -1;
+    const t2 = !api.ready || void 0;
+    const t3 = props["aria-label"] ?? "Position image";
+    const t4 = selection.value;
+    const t5 = selection.max;
+    const t6 = props["aria-valuetext"] ?? selection.text;
+    let t7;
+    if ($[7] !== api.ready || $[8] !== onPointerDownCapture) {
+        t7 = (event)=>{
+            onPointerDownCapture?.(event);
+            if (api.ready && !event.defaultPrevented && 0 === event.button && false !== event.isPrimary) event.currentTarget.focus({
+                preventScroll: true
+            });
+        };
+        $[7] = api.ready;
+        $[8] = onPointerDownCapture;
+        $[9] = t7;
+    } else t7 = $[9];
+    let t8;
+    if ($[10] !== className) {
+        t8 = cn("outline-none focus-visible:ring-3 focus-visible:ring-inset focus-visible:ring-focus-primary", className);
+        $[10] = className;
+        $[11] = t8;
+    } else t8 = $[11];
+    let t9;
+    if ($[12] !== props || $[13] !== ref || $[14] !== selection.max || $[15] !== selection.value || $[16] !== t1 || $[17] !== t2 || $[18] !== t3 || $[19] !== t6 || $[20] !== t7 || $[21] !== t8 || $[22] !== testId) {
+        t9 = /*#__PURE__*/ jsx(ImageCropper.Selection, {
+            ...props,
+            ref: ref,
+            tabIndex: t1,
+            "aria-disabled": t2,
+            "aria-label": t3,
+            "aria-valuenow": t4,
+            "aria-valuemax": t5,
+            "aria-valuetext": t6,
+            onPointerDownCapture: t7,
+            "data-slot": "image-cropper-selection",
+            "data-testid": testId,
+            className: t8
+        });
+        $[12] = props;
+        $[13] = ref;
+        $[14] = selection.max;
+        $[15] = selection.value;
+        $[16] = t1;
+        $[17] = t2;
+        $[18] = t3;
+        $[19] = t6;
+        $[20] = t7;
+        $[21] = t8;
+        $[22] = testId;
+        $[23] = t9;
+    } else t9 = $[23];
+    return t9;
+};
+ImageCropperSelection.displayName = "ImageCropperSelection";
+export { ImageCropperSelection };

package/dist/components/ImageCropper/ImageCropperViewport.d.ts

@@ -0,0 +1,9 @@
+import { type FC, type HTMLAttributes, type Ref } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
+export interface ImageCropperViewportProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    /** Styles the visible crop frame. Set its width; height follows outputSize's aspect ratio. */
+    className?: string;
+    /** Ref and native event/analytics attributes target the actual interactive viewport. */
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const ImageCropperViewport: FC<ImageCropperViewportProps>;

package/dist/components/ImageCropper/ImageCropperViewport.js

@@ -0,0 +1,135 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useLayoutEffect, useState } from "react";
+import { ImageCropper } from "@ark-ui/react/image-cropper";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { useImageCropperInternal, useImageCropperPartId } from "./ImageCropperProvider.js";
+const ImageCropperViewport = (t0)=>{
+    const $ = c(31);
+    let children;
+    let className;
+    let id;
+    let props;
+    let ref;
+    let style;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ ref, id, className, children, style, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = children;
+        $[2] = className;
+        $[3] = id;
+        $[4] = props;
+        $[5] = ref;
+        $[6] = style;
+        $[7] = testIdProp;
+    } else {
+        children = $[1];
+        className = $[2];
+        id = $[3];
+        props = $[4];
+        ref = $[5];
+        style = $[6];
+        testIdProp = $[7];
+    }
+    const { outputSize, viewportSize, setFrameSize } = useImageCropperInternal();
+    const [frame, setFrame] = useState(null);
+    const testId = useTestId("viewport", testIdProp);
+    const frameTestId = useTestId("frame");
+    useImageCropperPartId("viewport", id);
+    let t1;
+    let t2;
+    if ($[8] !== frame || $[9] !== setFrameSize) {
+        t1 = ()=>{
+            if (!frame) return;
+            const measure = ()=>{
+                const { width, height } = frame.getBoundingClientRect();
+                setFrameSize((current)=>current.width === width && current.height === height ? current : {
+                        width,
+                        height
+                    });
+            };
+            measure();
+            const observer = new ResizeObserver(measure);
+            observer.observe(frame);
+            return ()=>observer.disconnect();
+        };
+        t2 = [
+            frame,
+            setFrameSize
+        ];
+        $[8] = frame;
+        $[9] = setFrameSize;
+        $[10] = t1;
+        $[11] = t2;
+    } else {
+        t1 = $[10];
+        t2 = $[11];
+    }
+    useLayoutEffect(t1, t2);
+    let t3;
+    if ($[12] !== className) {
+        t3 = cn("relative w-[240px] max-w-full overflow-hidden rounded-12 bg-bg-surface-2", className);
+        $[12] = className;
+        $[13] = t3;
+    } else t3 = $[13];
+    const t4 = outputSize.width / outputSize.height;
+    let t5;
+    if ($[14] !== t4) {
+        t5 = {
+            aspectRatio: t4
+        };
+        $[14] = t4;
+        $[15] = t5;
+    } else t5 = $[15];
+    let t6;
+    if ($[16] !== style || $[17] !== viewportSize.height || $[18] !== viewportSize.width) {
+        t6 = {
+            ...style,
+            width: viewportSize.width,
+            height: viewportSize.height
+        };
+        $[16] = style;
+        $[17] = viewportSize.height;
+        $[18] = viewportSize.width;
+        $[19] = t6;
+    } else t6 = $[19];
+    let t7;
+    if ($[20] !== children || $[21] !== props || $[22] !== ref || $[23] !== t6 || $[24] !== testId) {
+        t7 = /*#__PURE__*/ jsx(ImageCropper.Viewport, {
+            ...props,
+            ref: ref,
+            "data-slot": "image-cropper-viewport",
+            "data-testid": testId,
+            className: "absolute! top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 cursor-grab data-panning:cursor-grabbing",
+            style: t6,
+            children: children
+        });
+        $[20] = children;
+        $[21] = props;
+        $[22] = ref;
+        $[23] = t6;
+        $[24] = testId;
+        $[25] = t7;
+    } else t7 = $[25];
+    let t8;
+    if ($[26] !== frameTestId || $[27] !== t3 || $[28] !== t5 || $[29] !== t7) {
+        t8 = /*#__PURE__*/ jsx("div", {
+            ref: setFrame,
+            "data-slot": "image-cropper-frame",
+            "data-testid": frameTestId,
+            className: t3,
+            style: t5,
+            children: t7
+        });
+        $[26] = frameTestId;
+        $[27] = t3;
+        $[28] = t5;
+        $[29] = t7;
+        $[30] = t8;
+    } else t8 = $[30];
+    return t8;
+};
+ImageCropperViewport.displayName = "ImageCropperViewport";
+export { ImageCropperViewport };

package/dist/components/ImageCropper/index.d.ts

@@ -0,0 +1,9 @@
+export { ImageCropper, type ImageCropperProps } from './ImageCropper.js';
+export { ImageCropperContext, type ImageCropperContextProps } from './ImageCropperContext.js';
+export { ImageCropperGrid, type ImageCropperGridProps } from './ImageCropperGrid.js';
+export { ImageCropperImage, type ImageCropperImageProps } from './ImageCropperImage.js';
+export type { ImageCropperApi } from './ImageCropperProvider.js';
+export { ImageCropperSelection, type ImageCropperSelectionProps } from './ImageCropperSelection.js';
+export { ImageCropperViewport, type ImageCropperViewportProps } from './ImageCropperViewport.js';
+export type { ImageCropperExportOptions } from './lib/exportCrop.js';
+export type { ImageCropperSize } from './lib/geometry.js';

package/dist/components/ImageCropper/index.js

@@ -0,0 +1,6 @@
+export { ImageCropper } from "./ImageCropper.js";
+export { ImageCropperContext } from "./ImageCropperContext.js";
+export { ImageCropperGrid } from "./ImageCropperGrid.js";
+export { ImageCropperImage } from "./ImageCropperImage.js";
+export { ImageCropperSelection } from "./ImageCropperSelection.js";
+export { ImageCropperViewport } from "./ImageCropperViewport.js";

package/dist/components/ImageCropper/lib/exportCrop.d.ts

@@ -0,0 +1,9 @@
+import { type ImageCropperRect, type ImageCropperSize } from './geometry.js';
+export interface ImageCropperExportOptions {
+    /** Defaults to lossless PNG. Browser support determines WebP availability. */
+    type?: 'image/png' | 'image/jpeg' | 'image/webp';
+    /** Encoding quality for JPEG or WebP, between 0 and 1. */
+    quality?: number;
+}
+/** Draw directly from the original bitmap, avoiding intermediate lossy encodings. */
+export declare const exportCrop: (image: HTMLImageElement, crop: ImageCropperRect, outputSize: ImageCropperSize, { type, quality }?: ImageCropperExportOptions) => Promise<Blob | null>;

package/dist/components/ImageCropper/lib/exportCrop.js

@@ -0,0 +1,20 @@
+import { validateOutputSize } from "./geometry.js";
+const exportCrop = async (image, crop, outputSize, { type = 'image/png', quality = 0.92 } = {})=>{
+    validateOutputSize(outputSize);
+    if (!image.complete || !image.naturalWidth || !image.naturalHeight || crop.width <= 0 || crop.height <= 0) return null;
+    try {
+        const canvas = image.ownerDocument.createElement('canvas');
+        canvas.width = outputSize.width;
+        canvas.height = outputSize.height;
+        if (canvas.width !== outputSize.width || canvas.height !== outputSize.height) return null;
+        const context = canvas.getContext('2d');
+        if (!context) return null;
+        context.imageSmoothingEnabled = true;
+        context.imageSmoothingQuality = 'high';
+        context.drawImage(image, crop.x, crop.y, crop.width, crop.height, 0, 0, outputSize.width, outputSize.height);
+        return await new Promise((resolve)=>canvas.toBlob(resolve, type, quality));
+    } catch  {
+        return null;
+    }
+};
+export { exportCrop };

package/dist/components/ImageCropper/lib/geometry.d.ts

@@ -0,0 +1,23 @@
+/** Pixel dimensions. Export sizes must be positive integers. */
+export interface ImageCropperSize {
+    width: number;
+    height: number;
+}
+export interface ImageCropperRect extends ImageCropperSize {
+    x: number;
+    y: number;
+}
+export declare const validateOutputSize: ({ width, height }: ImageCropperSize) => void;
+/** Ark's pan bounds assume the image fills its viewport; keep that viewport at the source aspect. */
+export declare const getCropperGeometry: (source: ImageCropperSize, frame: ImageCropperSize) => {
+    viewport: {
+        width: number;
+        height: number;
+    };
+    crop: {
+        width: number;
+        height: number;
+        x: number;
+        y: number;
+    };
+};

package/dist/components/ImageCropper/lib/geometry.js

@@ -0,0 +1,19 @@
+const validateOutputSize = ({ width, height })=>{
+    if (!Number.isSafeInteger(width) || !Number.isSafeInteger(height) || width <= 0 || height <= 0) throw new RangeError('ImageCropper outputSize must contain positive integer dimensions.');
+};
+const getCropperGeometry = (source, frame)=>{
+    const scale = Math.max(frame.width / source.width, frame.height / source.height);
+    const viewport = {
+        width: source.width * scale,
+        height: source.height * scale
+    };
+    return {
+        viewport,
+        crop: {
+            x: (viewport.width - frame.width) / 2,
+            y: (viewport.height - frame.height) / 2,
+            ...frame
+        }
+    };
+};
+export { getCropperGeometry, validateOutputSize };

package/dist/components/ImageCropper/useCropperMachine.d.ts

@@ -0,0 +1,9 @@
+import type { UseImageCropperProps } from '@ark-ui/react/image-cropper';
+import * as imageCropper from '@zag-js/image-cropper';
+/**
+ * Zag 1.43.3's zoom prop only initializes/watches internal state. Keep rejected controlled
+ * edits transactional: its zoom callback runs before the proposed pan offset is committed,
+ * so capture that offset and restore both fields before paint when the owner rejects zoom.
+ * Accepted edits retain native wheel/pinch anchoring; no gesture logic is duplicated here.
+ */
+export declare const useCropperMachine: (props: UseImageCropperProps) => imageCropper.Api<import("@zag-js/react").PropTypes>;

package/dist/components/ImageCropper/useCropperMachine.js

@@ -0,0 +1,60 @@
+import { c } from "react/compiler-runtime";
+import { useId, useLayoutEffect, useRef } from "react";
+import { useEnvironmentContext } from "@ark-ui/react/environment";
+import { useLocaleContext } from "@ark-ui/react/locale";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import * as __rspack_external__zag_js_image_cropper_79feded1 from "@zag-js/image-cropper";
+const useCropperMachine = (props)=>{
+    const $ = c(9);
+    const id = useId();
+    const { dir } = useLocaleContext();
+    const { getRootNode } = useEnvironmentContext();
+    const pendingOffset = useRef(null);
+    const restoring = useRef(false);
+    const service = useMachine(__rspack_external__zag_js_image_cropper_79feded1.machine, {
+        id,
+        dir,
+        getRootNode,
+        ...props,
+        onZoomChange: (details)=>{
+            if (restoring.current || details.zoom === props.zoom) return;
+            if (void 0 !== props.zoom && null === pendingOffset.current) pendingOffset.current = {
+                ...service.context.get("offset")
+            };
+            props.onZoomChange?.(details);
+        }
+    });
+    const api = __rspack_external__zag_js_image_cropper_79feded1.connect(service, normalizeProps);
+    let t0;
+    if ($[0] !== api.zoom || $[1] !== pendingOffset || $[2] !== props.zoom || $[3] !== service) {
+        t0 = ()=>{
+            if (void 0 !== props.zoom && api.zoom !== props.zoom && pendingOffset.current) {
+                restoring.current = true;
+                service.context.set("zoom", props.zoom);
+                service.context.set("offset", pendingOffset.current);
+                restoring.current = false;
+            }
+            pendingOffset.current = null;
+        };
+        $[0] = api.zoom;
+        $[1] = pendingOffset;
+        $[2] = props.zoom;
+        $[3] = service;
+        $[4] = t0;
+    } else t0 = $[4];
+    let t1;
+    if ($[5] !== api.zoom || $[6] !== props.zoom || $[7] !== service) {
+        t1 = [
+            api.zoom,
+            props.zoom,
+            service
+        ];
+        $[5] = api.zoom;
+        $[6] = props.zoom;
+        $[7] = service;
+        $[8] = t1;
+    } else t1 = $[8];
+    useLayoutEffect(t0, t1);
+    return api;
+};
+export { useCropperMachine };

package/dist/index.d.ts

@@ -52,6 +52,7 @@ export { FormatDateTime, type FormatDateTimeProps } from './components/FormatDat
 export { FormatNumber, type FormatNumberProps } from './components/FormatNumber/index.js';
 export { Heading, type HeadingProps } from './components/Heading/index.js';
 export { HTTP_METHOD_COLOR, HTTP_METHODS, HttpMethod, type HttpMethodName, type HttpMethodProps, } from './components/HttpMethod/index.js';
+export { ImageCropper, type ImageCropperApi, ImageCropperContext, type ImageCropperContextProps, type ImageCropperExportOptions, ImageCropperGrid, type ImageCropperGridProps, ImageCropperImage, type ImageCropperImageProps, type ImageCropperProps, ImageCropperSelection, type ImageCropperSelectionProps, type ImageCropperSize, ImageCropperViewport, type ImageCropperViewportProps, } from './components/ImageCropper/index.js';
 export { Indicator, type IndicatorProps } from './components/Indicator/index.js';
 export { InlineEdit, type InlineEditActivationMode, type InlineEditContextValue, InlineEditControl, type InlineEditControlProps, InlineEditDate, type InlineEditDateProps, InlineEditDateTime, type InlineEditDateTimeProps, InlineEditError, type InlineEditErrorProps, InlineEditInput, type InlineEditInputProps, InlineEditNumber, type InlineEditNumberProps, InlineEditPreview, InlineEditPreviewIcon, type InlineEditPreviewIconProps, type InlineEditPreviewProps, InlineEditPreviewValue, type InlineEditPreviewValueProps, type InlineEditProps, InlineEditSelect, type InlineEditSelectProps, type InlineEditStatus, type InlineEditSubmitMode, InlineEditTextarea, type InlineEditTextareaProps, InlineEditTime, type InlineEditTimeProps, toCalendarDateValue, toReactAriaDateValue, useInlineEdit, useInlineEditSubmitMode, withMinuteGranularity, } from './components/InlineEdit/index.js';
 export { Input, type InputProps } from './components/Input/index.js';

package/dist/index.js

@@ -41,6 +41,7 @@ export { FormatDateTime } from "./components/FormatDateTime/index.js";
 export { FormatNumber } from "./components/FormatNumber/index.js";
 export { Heading } from "./components/Heading/index.js";
 export { HTTP_METHODS, HTTP_METHOD_COLOR, HttpMethod } from "./components/HttpMethod/index.js";
+export { ImageCropper, ImageCropperContext, ImageCropperGrid, ImageCropperImage, ImageCropperSelection, ImageCropperViewport } from "./components/ImageCropper/index.js";
 export { Indicator } from "./components/Indicator/index.js";
 export { InlineEdit, InlineEditControl, InlineEditDate, InlineEditDateTime, InlineEditError, InlineEditInput, InlineEditNumber, InlineEditPreview, InlineEditPreviewIcon, InlineEditPreviewValue, InlineEditSelect, InlineEditTextarea, InlineEditTime, toCalendarDateValue, toReactAriaDateValue, useInlineEdit, useInlineEditSubmitMode, withMinuteGranularity } from "./components/InlineEdit/index.js";
 export { Input } from "./components/Input/index.js";