@lessly/ui 0.15.0 → 0.16.0

package/dist/index.d.ts

@@ -1381,9 +1381,8 @@ interface NotificationBellProps {
     /** Rows shown in the popover. Default 5. */
     maxItems?: number;
     /**
-     * Reported when the consumer's own row affordance marks a single item read.
-     * The default row surfaces the item through `onItemClick`; this exists so a
-     * host that renders its own control has the callback the model expects.
+     * Marks a single item read. Supplying it puts a quiet check control on every
+     * unread row — "Read all" and clicking through are no longer the only ways.
      */
     onMarkRead?(id: string): void;
     onMarkAllRead?(): void;
@@ -1415,6 +1414,11 @@ interface NotificationCenterProps {
     onDeepLinkClick?(item: NotificationItem): void;
     /** "Read all". Rendered only when supplied. */
     onMarkAllRead?(): void;
+    /**
+     * Marks a single item read. Supplying it puts a quiet check control on every
+     * unread row — "Read all" and clicking through are no longer the only ways.
+     */
+    onMarkRead?(id: string): void;
     /** Override the default relative-age label. */
     formatAge?(createdAt: Date): string;
     className?: string;

package/dist/index.js

@@ -4306,19 +4306,33 @@ function isNotificationSettled(item) {
 
 // src/components/notification-bell.tsx
 import * as React61 from "react";
-import { BellRing, Settings } from "lucide-react";
+import { BellRing, Check as Check7, Settings } from "lucide-react";
 import { jsx as jsx74, jsxs as jsxs41 } from "react/jsx-runtime";
+function MarkReadButton({ title, onClick }) {
+  return /* @__PURE__ */ jsx74(
+    "button",
+    {
+      type: "button",
+      "aria-label": `Mark "${title}" as read`,
+      onClick,
+      className: "flex size-5 shrink-0 items-center justify-center rounded text-text-tertiary opacity-0 transition-opacity hover:text-text-primary focus-visible:opacity-100 group-hover:opacity-100",
+      children: /* @__PURE__ */ jsx74(Check7, { className: "size-3.5", "aria-hidden": "true" })
+    }
+  );
+}
 function BellRow({
   item,
   onItemClick,
   onActionClick,
+  onMarkRead,
   formatAge
 }) {
   const settled = isNotificationSettled(item);
   const unread = !settled && !item.read;
+  const markable = Boolean(onMarkRead) && unread && item.cls !== "ephemeral";
   const actions = settled ? [] : item.actions ?? [];
   const age = item.createdAt ? formatAge(item.createdAt instanceof Date ? item.createdAt : new Date(item.createdAt)) : null;
-  return /* @__PURE__ */ jsxs41("div", { className: cn("rounded-lg bg-bg-surface px-3 py-2.5", settled && "opacity-45"), children: [
+  return /* @__PURE__ */ jsxs41("div", { className: cn("group rounded-lg bg-bg-surface px-3 py-2.5", settled && "opacity-45"), children: [
     /* @__PURE__ */ jsxs41("div", { className: "flex items-start gap-2.5", children: [
       /* @__PURE__ */ jsxs41("div", { className: "min-w-0 flex-1", children: [
         /* @__PURE__ */ jsx74(
@@ -4338,7 +4352,10 @@ function BellRow({
           item.receipt ? `, ${item.receipt}` : ""
         ] })
       ] }),
-      age && /* @__PURE__ */ jsx74("span", { className: "mt-px shrink-0 text-xs text-text-tertiary", children: age })
+      (age || markable) && /* @__PURE__ */ jsxs41("div", { className: "mt-px flex shrink-0 items-center gap-1", children: [
+        age && /* @__PURE__ */ jsx74("span", { className: "text-xs text-text-tertiary", children: age }),
+        markable && /* @__PURE__ */ jsx74(MarkReadButton, { title: item.title, onClick: () => onMarkRead(item.id) })
+      ] })
     ] }),
     (actions.length > 0 || item.deepLink) && /* @__PURE__ */ jsxs41("div", { className: "mt-2 flex flex-wrap items-center gap-x-4 gap-y-2", children: [
       actions.map((action) => {
@@ -4375,6 +4392,7 @@ var NotificationBell = React61.forwardRef(
     items,
     unreadCount,
     maxItems = 5,
+    onMarkRead,
     onMarkAllRead,
     onItemClick,
     onActionClick,
@@ -4443,6 +4461,7 @@ var NotificationBell = React61.forwardRef(
             item,
             onItemClick,
             onActionClick,
+            onMarkRead,
             formatAge: age
           },
           item.id
@@ -4464,24 +4483,41 @@ NotificationBell.displayName = "NotificationBell";
 
 // src/components/notification-center.tsx
 import * as React62 from "react";
-import { ArrowUpRight, Check as Check7, Search as Search2 } from "lucide-react";
+import { ArrowUpRight, Check as Check8, Search as Search2 } from "lucide-react";
 import { jsx as jsx75, jsxs as jsxs42 } from "react/jsx-runtime";
 var chipBase = "rounded-lg px-3 py-1.5 text-sm font-medium transition-colors";
 var chipOn = "bg-bg-brand-subtle text-text-brand";
 var chipOff = "bg-bg-elevated text-text-secondary hover:text-text-primary";
+function MarkReadButton2({ title, onClick }) {
+  return /* @__PURE__ */ jsx75(
+    "button",
+    {
+      type: "button",
+      "aria-label": `Mark "${title}" as read`,
+      onClick,
+      className: "flex size-5 shrink-0 items-center justify-center rounded text-text-tertiary opacity-0 transition-opacity hover:text-text-primary focus-visible:opacity-100 group-hover:opacity-100",
+      children: /* @__PURE__ */ jsx75(Check8, { className: "size-3.5", "aria-hidden": "true" })
+    }
+  );
+}
 function CenterRow({
   item,
   onItemClick,
   onDeepLinkClick,
+  onMarkRead,
   formatAge
 }) {
   const unread = !item.read;
+  const markable = Boolean(onMarkRead) && unread && item.cls !== "ephemeral";
   const age = item.createdAt ? formatAge(item.createdAt instanceof Date ? item.createdAt : new Date(item.createdAt)) : null;
-  return /* @__PURE__ */ jsxs42("article", { className: "rounded-lg bg-bg-elevated px-4 py-3", children: [
+  return /* @__PURE__ */ jsxs42("article", { className: "group rounded-lg bg-bg-elevated px-4 py-3", children: [
     /* @__PURE__ */ jsxs42("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx75("span", { className: "text-xs font-semibold uppercase tracking-[0.09em] text-text-secondary", children: item.source }),
       /* @__PURE__ */ jsx75(Badge, { variant: severityBadgeVariant(item.severity), children: severityLabels[item.severity] }),
-      age && /* @__PURE__ */ jsx75("span", { className: "ml-auto shrink-0 text-xs tabular-nums text-text-tertiary", children: age })
+      (age || markable) && /* @__PURE__ */ jsxs42("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
+        age && /* @__PURE__ */ jsx75("span", { className: "text-xs tabular-nums text-text-tertiary", children: age }),
+        markable && /* @__PURE__ */ jsx75(MarkReadButton2, { title: item.title, onClick: () => onMarkRead(item.id) })
+      ] })
     ] }),
     /* @__PURE__ */ jsx75(
       "button",
@@ -4498,7 +4534,7 @@ function CenterRow({
     item.body && /* @__PURE__ */ jsx75("p", { className: "mt-0.5 text-sm leading-snug text-text-secondary", children: item.body }),
     (item.receipt || item.deepLink) && /* @__PURE__ */ jsxs42("div", { className: "mt-2 flex flex-wrap items-center gap-x-4 gap-y-1.5", children: [
       item.receipt && /* @__PURE__ */ jsxs42("span", { className: "inline-flex items-center gap-1.5 text-sm text-text-tertiary", children: [
-        /* @__PURE__ */ jsx75(Check7, { className: "size-3 shrink-0 text-text-success", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx75(Check8, { className: "size-3 shrink-0 text-text-success", "aria-hidden": "true" }),
         item.receipt
       ] }),
       item.deepLink && /* @__PURE__ */ jsxs42(
@@ -4528,6 +4564,7 @@ var NotificationCenter = React62.forwardRef(
     onItemClick,
     onDeepLinkClick,
     onMarkAllRead,
+    onMarkRead,
     formatAge,
     className
   }, ref) => {
@@ -4649,6 +4686,7 @@ var NotificationCenter = React62.forwardRef(
             item,
             onItemClick,
             onDeepLinkClick,
+            onMarkRead,
             formatAge: age
           },
           item.id

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lessly/ui",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "Lessly design system — shared UI primitives, tokens, and theme",
   "type": "module",
   "packageManager": "pnpm@10.30.3",