hazo_ui 4.2.0 → 4.3.0

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;