hazo_ui 4.1.1 → 4.3.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: {
@@ -5902,7 +5904,9 @@ var HardBreak = core.Node.create({
             const marks = storedMarks || selection.$to.parentOffset && selection.$from.marks();
             return chain().insertContent({ type: this.name }).command(({ tr, dispatch }) => {
               if (dispatch && marks && keepMarks) {
-                const filteredMarks = marks.filter((mark) => splittableMarks.includes(mark.type.name));
+                const filteredMarks = marks.filter(
+                  (mark) => splittableMarks.includes(mark.type.name)
+                );
                 tr.ensureMarks(filteredMarks);
               }
               return true;
@@ -6914,6 +6918,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 +7668,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(
@@ -7782,6 +7977,149 @@ function ProgressiveImage({
     }
   );
 }
+function NotificationCountBadge({
+  count,
+  max = 9,
+  className
+}) {
+  if (count <= 0) return null;
+  const isOverflow = count > max;
+  const label = isOverflow ? `${max}+` : String(count);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-label": `${count} unread`,
+      className: cn(
+        "cls_notification_count_badge",
+        "inline-flex items-center justify-center",
+        "bg-destructive text-destructive-foreground",
+        "text-[10px] font-semibold leading-none select-none",
+        // pill for "9+", circle for single/double digits
+        isOverflow ? "rounded-full px-1.5 py-0.5 min-w-[1.25rem] h-5" : "rounded-full w-5 h-5",
+        className
+      ),
+      children: label
+    }
+  );
+}
+function NotificationItem({
+  isRead,
+  timestamp,
+  children,
+  actions,
+  onClick,
+  onContextMenu,
+  onMarkRead,
+  markReadLabel
+}) {
+  const handleMarkRead = (e) => {
+    e.stopPropagation();
+    onMarkRead?.();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "listitem",
+      onClick,
+      onContextMenu,
+      className: cn(
+        "cls_notification_item",
+        "relative flex gap-3 px-4 py-3 text-sm transition-colors",
+        onClick && "cursor-pointer hover:bg-accent/60",
+        !isRead && "bg-primary/5"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_notification_item_dot_col flex-shrink-0 pt-1.5", children: !isRead ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-label": "Unread",
+            className: "cls_notification_item_dot block w-2 h-2 rounded-full bg-primary"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block w-2 h-2", "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_notification_item_body flex-1 min-w-0 space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_notification_item_message leading-snug text-foreground", children }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_notification_item_meta flex items-center gap-3 flex-wrap", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cls_notification_item_timestamp text-xs text-muted-foreground", children: timestamp }),
+            !isRead && onMarkRead ? /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleMarkRead,
+                className: "cls_notification_item_mark_read text-primary text-xs hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded",
+                children: markReadLabel
+              }
+            ) : null
+          ] }),
+          actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_notification_item_actions flex items-center gap-2 pt-1", children: actions }) : null
+        ] })
+      ]
+    }
+  );
+}
+function LoadingSkeletons() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "aria-busy": "true",
+      "aria-label": "Loading notifications",
+      className: "cls_notification_panel_loading space-y-0",
+      children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "cls_notification_panel_skeleton flex gap-3 px-4 py-3 animate-pulse",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 pt-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 rounded-full bg-muted" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-2 pt-0.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 bg-muted rounded w-3/4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 bg-muted rounded w-1/2" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2.5 bg-muted rounded w-1/4 mt-1" })
+            ] })
+          ]
+        },
+        i
+      ))
+    }
+  );
+}
+function NotificationPanel({
+  children,
+  onMarkAllRead,
+  markAllReadLabel,
+  emptyState,
+  loading = false,
+  className
+}) {
+  const hasChildren = React26__namespace.Children.count(children) > 0 && children !== null && children !== void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "cls_notification_panel",
+        "flex flex-col bg-background border border-border rounded-lg overflow-hidden shadow-md",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            role: "list",
+            className: "cls_notification_panel_list flex-1 overflow-y-auto max-h-[480px] divide-y divide-border",
+            children: loading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingSkeletons, {}) : hasChildren ? children : emptyState ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_notification_panel_empty px-4 py-8 flex items-center justify-center", children: emptyState }) : null
+          }
+        ),
+        onMarkAllRead ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_notification_panel_footer border-t border-border px-4 py-2 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onMarkAllRead,
+            className: "cls_notification_panel_mark_all text-primary text-xs hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded",
+            children: markAllReadLabel
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
 function HazoUiToaster({
   position = "bottom-right",
   closeButton = true,
@@ -10670,6 +11008,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;
@@ -10690,6 +11030,9 @@ exports.InverseSparkline = InverseSparkline;
 exports.Label = Label3;
 exports.LoadingTimeout = LoadingTimeout;
 exports.MarkdownEditor = MarkdownEditor;
+exports.NotificationCountBadge = NotificationCountBadge;
+exports.NotificationItem = NotificationItem;
+exports.NotificationPanel = NotificationPanel;
 exports.Popover = Popover;
 exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;