hazo_ui 4.2.0 → 4.3.1

package/CHANGE_LOG.md

@@ -5,6 +5,22 @@ 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.3.0 (2026-06-19)
+
+### New
+- `NotificationCountBadge` — compact unread-count pill/badge. Renders a circular badge
+  for counts 1–`max` (default 9) and a pill-shaped `"N+"` label for overflow. Returns
+  null when `count <= 0`; no DOM footprint when there is nothing to show.
+- `NotificationItem` — single notification row with an unread-dot indicator, message
+  content slot, pre-formatted timestamp, optional domain `actions` slot, and an optional
+  "mark read" button (rendered only when `!isRead && onMarkRead` is provided). Row
+  highlights on hover when an `onClick` handler is attached.
+- `NotificationPanel` — scrollable notification list shell (max-height 480 px) that
+  wraps `NotificationItem` rows. Handles three display states: loading skeleton (3
+  animated rows), empty state slot, and populated list. Renders an optional "Mark all
+  as read" footer button via `onMarkAllRead`. All user-facing labels are props with no
+  English defaults so consumers can pass i18n strings directly.
+
 ## v4.2.0 (2026-06-14)
 
 ### New

package/README.md

@@ -206,6 +206,8 @@ The following components support both global config and prop-level color overrid
 
 - **[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.
 
+- **[Notification Components](#notification-components-v430)** (v4.3.0) - Three composable primitives for building notification UIs: `NotificationCountBadge` (unread-count pill), `NotificationItem` (single row with dot indicator, timestamp, actions, and mark-read), and `NotificationPanel` (scrollable shell with loading skeleton, empty state, and "Mark all as read" footer). All label strings are props — no English defaults — so i18n works without wrappers.
+
 - **[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.
@@ -3703,6 +3705,93 @@ If `onCardSave` is not provided, the pencil is hidden entirely
 
 ---
 
+## Notification Components (v4.3.0)
+
+Three composable primitives for building in-app notification UIs. Import from `hazo_ui`:
+
+```ts
+import {
+  NotificationCountBadge,
+  NotificationItem,
+  NotificationPanel,
+} from "hazo_ui";
+```
+
+### NotificationCountBadge
+
+Compact circular/pill badge showing an unread count. Returns `null` when `count <= 0` so
+you can unconditionally render it without extra guards.
+
+```tsx
+<NotificationCountBadge count={3} />        {/* circular "3" */}
+<NotificationCountBadge count={42} max={9} /> {/* pill "9+" */}
+```
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `count` | `number` | — | Raw unread count |
+| `max` | `number` | `9` | Shows `"N+"` when `count > max` |
+| `className` | `string` | — | Additional Tailwind classes |
+
+### NotificationItem
+
+Single notification row. Renders an unread-dot indicator, message children, a timestamp,
+optional action buttons, and an optional "mark read" link.
+
+```tsx
+<NotificationItem
+  isRead={false}
+  timestamp="2 hours ago"
+  onMarkRead={() => markRead(id)}
+  markReadLabel="Mark read"
+  onClick={() => openThread(id)}
+>
+  <strong>Alice</strong> commented on your document.
+</NotificationItem>
+```
+
+| Prop | Type | Description |
+|---|---|---|
+| `isRead` | `boolean` | Suppresses dot indicator and blue background when true |
+| `timestamp` | `string` | Pre-formatted relative timestamp (e.g. `"2 hours ago"`) |
+| `children` | `ReactNode` | Notification message content |
+| `actions` | `ReactNode` | Optional domain buttons rendered below the message |
+| `onClick` | `() => void` | Makes the row clickable with hover state |
+| `onContextMenu` | `MouseEventHandler` | Right-click handler |
+| `onMarkRead` | `() => void` | When provided AND `!isRead`, shows the "mark read" button |
+| `markReadLabel` | `string` | i18n label for the mark-read button |
+
+### NotificationPanel
+
+Scrollable shell (max-height 480 px) wrapping `NotificationItem` rows. Manages three
+display states automatically: loading skeleton, empty state, and populated list.
+
+```tsx
+<NotificationPanel
+  loading={isLoading}
+  emptyState={<p className="text-muted-foreground text-sm">No notifications</p>}
+  onMarkAllRead={markAllRead}
+  markAllReadLabel="Mark all as read"
+>
+  {notifications.map((n) => (
+    <NotificationItem key={n.id} isRead={n.is_read} timestamp={n.time_ago} markReadLabel="Mark read">
+      {n.message}
+    </NotificationItem>
+  ))}
+</NotificationPanel>
+```
+
+| Prop | Type | Description |
+|---|---|---|
+| `children` | `ReactNode` | `NotificationItem` rows |
+| `loading` | `boolean` | Shows 3 animated skeleton rows when true |
+| `emptyState` | `ReactNode` | Rendered when not loading and no children |
+| `onMarkAllRead` | `() => void` | When provided, renders the "Mark all as read" footer button |
+| `markAllReadLabel` | `string` | i18n label for the mark-all-read button |
+| `className` | `string` | Additional Tailwind classes for the outer container |
+
+---
+
 ## HazoUiTable — Column-config-driven Data Table (v2.14.0+, v2.15 additions)
 
 A higher-level data table that composes the shadcn `Table` primitive

package/dist/index.cjs

@@ -5904,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;
@@ -7975,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,
@@ -10885,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;