hazo_ui 4.1.1 → 4.2.0

package/CHANGE_LOG.md

@@ -5,6 +5,23 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## v4.2.0 (2026-06-14)
+
+### New
+- `HazoUiImageCropper` — round profile-photo cropper built on `react-easy-crop`.
+  Pan and zoom a source image inside a 320 px stage; uses `forwardRef` to expose a
+  `getCroppedBlob()` imperative handle so parent components (e.g. a dialog confirm
+  button) can request the WebP blob on demand. Zoom control uses the existing
+  `Slider` primitive. All user-facing strings are props with English defaults.
+- `HazoUiImageCropperDialog` — dialog wrapper (built on `HazoUiDialog`) that manages
+  the File → object URL lifecycle, triggers `getCroppedBlob()` on Confirm, shows a
+  loading spinner while the blob is produced, and closes automatically after
+  `onConfirm` resolves. Label props (`title`, `confirmLabel`, `cancelLabel`,
+  `zoomLabel`) accept translated strings so no next-intl dependency is needed.
+
+### Dependencies
+- **`react-easy-crop` (^6.0.2) added to `dependencies`.**
+
 ## v4.1.1 (2026-06-14)
 
 ### New

package/README.md

@@ -204,6 +204,8 @@ The following components support both global config and prop-level color overrid
 
 - **[HazoUiConfirmDialog](#hazouiconfirmdialog)** - A compact, opinionated confirmation dialog with accent top border, variant system (destructive, warning, info, success), async loading support, and configurable buttons. Perfect for delete confirmations, unsaved changes warnings, and simple acknowledgments.
 
+- **[HazoUiImageCropper / HazoUiImageCropperDialog](#hazouiimagecropper--hazouiimagecropperdialog)** (v4.2.0) - Round profile-photo cropper with pan/zoom built on `react-easy-crop`. Outputs a 512×512 WebP Blob. The standalone `HazoUiImageCropper` exposes a `getCroppedBlob()` imperative handle; `HazoUiImageCropperDialog` wraps it in a dialog with a managed object-URL lifecycle and loading state.
+
 - **[HazoUiTable](#hazouitable--column-config-driven-data-table-v2140)** - A column-config-driven data table built on a shadcn `Table` primitive family. Sortable headers, debounced search, multi-column filter / sort dialogs, pagination, row click (mouse + keyboard), loading / empty / no-results states, and a card-per-row mobile fallback. Optional server-side `onLoad`.
 
 - **[Drawer](#drawer)** - A `vaul`-backed bottom sheet primitive for mobile UIs. Pair with `useMediaQuery` to swap between `Dialog` and `Drawer` based on viewport width.
@@ -2124,6 +2126,101 @@ Use the `loading` prop to override this behavior with external control.
 
 ---
 
+## HazoUiImageCropper / HazoUiImageCropperDialog
+
+Round profile-photo cropper (v4.2.0). Pan and zoom a source image inside a circular
+stage; outputs a square WebP `Blob` at a configurable resolution (default 512×512).
+
+### Basic usage — standalone cropper with imperative handle
+
+```tsx
+import { useRef } from 'react';
+import { HazoUiImageCropper, type HazoUiImageCropperHandle } from 'hazo_ui';
+
+function MyPage() {
+  const cropperRef = useRef<HazoUiImageCropperHandle>(null);
+
+  const handleSave = async () => {
+    const blob = await cropperRef.current!.getCroppedBlob();
+    // Upload blob, create preview, etc.
+  };
+
+  return (
+    <>
+      <HazoUiImageCropper ref={cropperRef} imageSrc={objectUrl} />
+      <button onClick={handleSave}>Save</button>
+    </>
+  );
+}
+```
+
+### Basic usage — dialog wrapper
+
+```tsx
+import { useState } from 'react';
+import { HazoUiImageCropperDialog } from 'hazo_ui';
+
+function ProfileEditor() {
+  const [file, setFile] = useState<File | null>(null);
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <input type="file" accept="image/*"
+        onChange={e => { setFile(e.target.files![0]); setOpen(true); }} />
+
+      <HazoUiImageCropperDialog
+        open={open}
+        onOpenChange={setOpen}
+        file={file}
+        onConfirm={async (blob) => {
+          await uploadAvatar(blob);
+        }}
+        title="Crop photo"
+        confirmLabel="Save"
+        cancelLabel="Cancel"
+        zoomLabel="Zoom"
+      />
+    </>
+  );
+}
+```
+
+### HazoUiImageCropper Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `imageSrc` | `string` | — | **Required.** Source image URL or object URL |
+| `onCropped` | `(blob: Blob) => void \| Promise<void>` | — | Optional convenience callback when blob is produced |
+| `outputSize` | `number` | `512` | Output canvas dimensions in pixels (square) |
+| `quality` | `number` | `0.9` | WebP quality (0–1) |
+| `zoomLabel` | `string` | `"Zoom"` | Zoom slider label (pass a translated string) |
+| `className` | `string` | — | Additional className for the root element |
+
+The component accepts a `ref` of type `HazoUiImageCropperHandle` exposing:
+
+| Method | Returns | Description |
+|--------|---------|-------------|
+| `getCroppedBlob()` | `Promise<Blob>` | Produces a WebP blob from the current crop area |
+
+### HazoUiImageCropperDialog Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open` | `boolean` | — | **Required.** Controls dialog visibility |
+| `onOpenChange` | `(open: boolean) => void` | — | **Required.** Called when dialog open state changes |
+| `file` | `File \| null` | — | **Required.** The image file to crop |
+| `onConfirm` | `(blob: Blob) => void \| Promise<void>` | — | **Required.** Called with the cropped blob on Save |
+| `onCancel` | `() => void` | — | Called when the user cancels |
+| `title` | `string` | `"Crop photo"` | Dialog title |
+| `confirmLabel` | `string` | `"Save"` | Confirm button text |
+| `cancelLabel` | `string` | `"Cancel"` | Cancel button text |
+| `zoomLabel` | `string` | `"Zoom"` | Zoom slider label |
+| `outputSize` | `number` | `512` | Output size in pixels |
+| `quality` | `number` | `0.9` | WebP quality (0–1) |
+
+---
+
 ## HazoUiDialog
 
 A flexible, standardized dialog component with customizable animations, sizes, and theming. Built on Radix UI Dialog primitives with a consistent header/body/footer layout.

package/dist/index.cjs

@@ -42,7 +42,7 @@ var Link = require('@tiptap/extension-link');
 var TextAlign = require('@tiptap/extension-text-align');
 var Highlight = require('@tiptap/extension-highlight');
 var Color = require('@tiptap/extension-color');
-var Image = require('@tiptap/extension-image');
+var Image2 = require('@tiptap/extension-image');
 var Placeholder = require('@tiptap/extension-placeholder');
 var HorizontalRule = require('@tiptap/extension-horizontal-rule');
 var extensionTable = require('@tiptap/extension-table');
@@ -61,6 +61,8 @@ require('@uiw/react-markdown-preview/markdown.css');
 var Suggestion = require('@tiptap/suggestion');
 var state = require('@tiptap/pm/state');
 var reactDom = require('react-dom');
+var Cropper = require('react-easy-crop');
+var SliderPrimitive = require('@radix-ui/react-slider');
 var vaul = require('vaul');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
@@ -73,7 +75,6 @@ var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var TogglePrimitive = require('@radix-ui/react-toggle');
 var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
 var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
-var SliderPrimitive = require('@radix-ui/react-slider');
 var sonner = require('sonner');
 var client$1 = require('hazo_state/client');
 
@@ -123,7 +124,7 @@ var Link__default = /*#__PURE__*/_interopDefault(Link);
 var TextAlign__default = /*#__PURE__*/_interopDefault(TextAlign);
 var Highlight__default = /*#__PURE__*/_interopDefault(Highlight);
 var Color__default = /*#__PURE__*/_interopDefault(Color);
-var Image__default = /*#__PURE__*/_interopDefault(Image);
+var Image2__default = /*#__PURE__*/_interopDefault(Image2);
 var Placeholder__default = /*#__PURE__*/_interopDefault(Placeholder);
 var HorizontalRule__default = /*#__PURE__*/_interopDefault(HorizontalRule);
 var TableRow__default = /*#__PURE__*/_interopDefault(TableRow);
@@ -133,6 +134,8 @@ var TaskList__default = /*#__PURE__*/_interopDefault(TaskList);
 var TaskItem__default = /*#__PURE__*/_interopDefault(TaskItem);
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 var Suggestion__default = /*#__PURE__*/_interopDefault(Suggestion);
+var Cropper__default = /*#__PURE__*/_interopDefault(Cropper);
+var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
@@ -144,7 +147,6 @@ var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPr
 var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive);
 var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
 var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
-var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -4366,7 +4368,7 @@ var HazoUiRte = ({
         multicolor: true
       }),
       Color__default.default,
-      Image__default.default.configure({
+      Image2__default.default.configure({
         inline: true,
         allowBase64: true,
         HTMLAttributes: {
@@ -6914,6 +6916,210 @@ function HazoUiConfirmDialog({
     )
   ] }) });
 }
+var Slider = React26__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  SliderPrimitive__namespace.Root,
+  {
+    ref,
+    className: cn("relative flex w-full touch-none select-none items-center", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Range, { className: "absolute h-full bg-primary" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Thumb, { className: "block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" })
+    ]
+  }
+));
+Slider.displayName = SliderPrimitive__namespace.Root.displayName;
+async function getCroppedImg(imageSrc, areaPixels, outputSize, quality) {
+  const img = await new Promise((resolve, reject) => {
+    const image = new Image();
+    image.crossOrigin = "anonymous";
+    image.onload = () => resolve(image);
+    image.onerror = (e) => reject(e);
+    image.src = imageSrc;
+  });
+  const canvas = document.createElement("canvas");
+  canvas.width = outputSize;
+  canvas.height = outputSize;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("HazoUiImageCropper: canvas 2d context unavailable");
+  }
+  ctx.drawImage(
+    img,
+    areaPixels.x,
+    areaPixels.y,
+    areaPixels.width,
+    areaPixels.height,
+    0,
+    0,
+    outputSize,
+    outputSize
+  );
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (blob) {
+          resolve(blob);
+        } else {
+          reject(new Error("HazoUiImageCropper: canvas.toBlob returned null"));
+        }
+      },
+      "image/webp",
+      quality
+    );
+  });
+}
+var HazoUiImageCropper = React26__namespace.forwardRef(function HazoUiImageCropper2({
+  imageSrc,
+  onCropped,
+  outputSize = 512,
+  quality = 0.9,
+  zoomLabel = "Zoom",
+  className
+}, ref) {
+  const [crop, set_crop] = React26__namespace.useState({
+    x: 0,
+    y: 0
+  });
+  const [zoom, set_zoom] = React26__namespace.useState(1);
+  const cropped_area_pixels_ref = React26__namespace.useRef(null);
+  const handle_crop_complete = React26__namespace.useCallback(
+    (_croppedArea, croppedAreaPixels) => {
+      cropped_area_pixels_ref.current = croppedAreaPixels;
+    },
+    []
+  );
+  React26__namespace.useImperativeHandle(
+    ref,
+    () => ({
+      getCroppedBlob: async () => {
+        if (!cropped_area_pixels_ref.current) {
+          throw new Error(
+            "HazoUiImageCropper: crop area not yet initialised \u2014 wait for the cropper to mount before calling getCroppedBlob."
+          );
+        }
+        const blob = await getCroppedImg(
+          imageSrc,
+          cropped_area_pixels_ref.current,
+          outputSize,
+          quality
+        );
+        await onCropped?.(blob);
+        return blob;
+      }
+    }),
+    [imageSrc, onCropped, outputSize, quality]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cls_image_cropper_root flex flex-col gap-4", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "cls_cropper_stage relative w-full overflow-hidden rounded-lg bg-muted",
+        style: { height: "320px" },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Cropper__default.default,
+          {
+            image: imageSrc,
+            crop,
+            zoom,
+            aspect: 1,
+            cropShape: "round",
+            showGrid: false,
+            onCropChange: set_crop,
+            onZoomChange: set_zoom,
+            onCropComplete: handle_crop_complete
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_zoom_control flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          className: "cls_zoom_label text-sm font-medium text-foreground",
+          id: "hazo-cropper-zoom-label",
+          children: zoomLabel
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Slider,
+        {
+          "aria-labelledby": "hazo-cropper-zoom-label",
+          min: 1,
+          max: 3,
+          step: 0.1,
+          value: [zoom],
+          onValueChange: (values) => set_zoom(values[0])
+        }
+      )
+    ] })
+  ] });
+});
+HazoUiImageCropper.displayName = "HazoUiImageCropper";
+function HazoUiImageCropperDialog({
+  open,
+  onOpenChange,
+  file,
+  onConfirm,
+  onCancel,
+  title = "Crop photo",
+  confirmLabel = "Save",
+  cancelLabel = "Cancel",
+  zoomLabel = "Zoom",
+  outputSize = 512,
+  quality = 0.9
+}) {
+  const cropper_ref = React26__namespace.useRef(null);
+  const [image_src, set_image_src] = React26__namespace.useState(null);
+  const [is_confirming, set_is_confirming] = React26__namespace.useState(false);
+  React26__namespace.useEffect(() => {
+    if (!file) {
+      set_image_src(null);
+      return;
+    }
+    const url = URL.createObjectURL(file);
+    set_image_src(url);
+    return () => {
+      URL.revokeObjectURL(url);
+    };
+  }, [file]);
+  const handle_confirm = async () => {
+    if (!cropper_ref.current) return;
+    set_is_confirming(true);
+    try {
+      const blob = await cropper_ref.current.getCroppedBlob();
+      await onConfirm(blob);
+      onOpenChange(false);
+    } finally {
+      set_is_confirming(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    HazoUiDialog,
+    {
+      open,
+      onOpenChange,
+      title,
+      actionButtonText: confirmLabel,
+      cancelButtonText: cancelLabel,
+      onConfirm: handle_confirm,
+      onCancel,
+      actionButtonLoading: is_confirming,
+      sizeWidth: "min(90vw, 520px)",
+      contentClassName: "cls_image_cropper_dialog_body",
+      children: image_src && /* @__PURE__ */ jsxRuntime.jsx(
+        HazoUiImageCropper,
+        {
+          ref: cropper_ref,
+          imageSrc: image_src,
+          outputSize,
+          quality,
+          zoomLabel
+        }
+      )
+    }
+  );
+}
 var Drawer = ({
   shouldScaleBackground = true,
   ...props
@@ -7460,19 +7666,6 @@ function ButtonGroupText({ className, asChild = false, ...props }) {
 function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Separator3, { orientation, className: cn("bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto", className), ...props });
 }
-var Slider = React26__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-  SliderPrimitive__namespace.Root,
-  {
-    ref,
-    className: cn("relative flex w-full touch-none select-none items-center", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Range, { className: "absolute h-full bg-primary" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Thumb, { className: "block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" })
-    ]
-  }
-));
-Slider.displayName = SliderPrimitive__namespace.Root.displayName;
 var InputAffix = React26__namespace.forwardRef(
   ({ className, containerClassName, prefix, suffix, type = "text", ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -10670,6 +10863,8 @@ exports.HazoUiDialogTrigger = DialogTrigger;
 exports.HazoUiEtaProgress = HazoUiEtaProgress;
 exports.HazoUiFlexInput = HazoUiFlexInput;
 exports.HazoUiFlexRadio = HazoUiFlexRadio;
+exports.HazoUiImageCropper = HazoUiImageCropper;
+exports.HazoUiImageCropperDialog = HazoUiImageCropperDialog;
 exports.HazoUiKanban = HazoUiKanban;
 exports.HazoUiKanbanFilter = HazoUiKanbanFilter;
 exports.HazoUiMultiFilterDialog = HazoUiMultiFilterDialog;