hazo_ui 4.3.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hazo_ui",
-  "version": "4.3.0",
+  "version": "4.3.1",
   "description": "Set of UI components for common interaction elements in a SaaS app",
   "type": "module",
   "main": "./dist/index.js",
@@ -20,7 +20,8 @@
     },
     "./test-harness": {
       "types": "./dist/test-harness/index.d.ts",
-      "import": "./dist/test-harness/index.js"
+      "import": "./dist/test-harness/index.js",
+      "require": "./dist/test-harness/index.cjs"
     },
     "./utils": {
       "types": "./dist/index.utils.d.ts",