@lessly/ui 0.14.1 → 0.16.0

package/dist/index.d.ts

@@ -1352,6 +1352,15 @@ interface NotificationProduct {
 }
 declare const severityLabels: Record<NotificationSeverity, string>;
 declare function severityBadgeVariant(severity: NotificationSeverity): 'destructive' | 'warning' | 'secondary';
+/** Per-severity dwell in seconds. `Infinity` means the toast stays until dismissed. */
+type NotificationToastDwell = Record<NotificationSeverity, number>;
+/**
+ * Toasts peek, then tuck away — the record behind the bell is the durable copy, so
+ * nothing is lost when a card leaves. Critical is the exception: it stays in the
+ * corner until it is handled, because for an incident the persistent toast IS the
+ * escalation. Timing lives in the toaster; this is only the default table.
+ */
+declare const TOAST_DWELL: NotificationToastDwell;
 /**
  * Reads a stamp as a relative age. `now` is injectable so the components stay
  * testable and consumers can substitute an absolute or localized formatter; the
@@ -1372,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;
@@ -1406,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;
@@ -1428,4 +1441,40 @@ interface NotificationSettingsProps {
 }
 declare const NotificationSettings: React$1.ForwardRefExoticComponent<NotificationSettingsProps & React$1.RefAttributes<HTMLDivElement>>;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, type AppShellProps, AppSidebar, type AppSidebarProps, AspectRatio, AuthenticatedLayout, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, type CarouselContextProps, CarouselItem, CarouselNext, type CarouselOptions, type CarouselPlugin, CarouselPrevious, type CarouselProps, Checkbox, Code, CodeBlock, type CodeBlockProps, type CodeLang, type CodeProps, Col, type ColProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, type ConfirmDialogProps, type ConnectionAuth, ConnectionCard, type ConnectionCardProps, type ConnectionScope, type ConnectionStatus, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, type CreateProductSubmit, CreateProductWindow, type CreateProductWindowOrganization, type CreateProductWindowProduct, type CreateProductWindowProps, DatePicker, type DatePickerProps, type DeltaDirection, type DeltaTone, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DocsLink, type DocsLinkProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExtensionIcon, type ExtensionIconProps, ExtensionLink, type ExtensionLinkProps, type ExtensionLinkUiMode, FeedbackButton, type FeedbackButtonLabels, type FeedbackButtonProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Grid, GridOverlay, type GridOverlayProps, type GridProps, HoverCard, HoverCardContent, HoverCardTrigger, InlineError, type InlineErrorProps, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, MenuDivider, MenuPopup, type MenuPopupProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, type NavItem, type NavLinkComponent, NavRow, type NavRowProps, type NavRowVariant, NavSectionLabel, type NavSectionLabelProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, type NotifClass, type NotificationAction, NotificationBell, type NotificationBellProps, NotificationCenter, type NotificationCenterProps, type NotificationClass, type NotificationDeepLink, type NotificationItem, type NotificationMute, type NotificationPreferences, type NotificationProduct, NotificationSettings, type NotificationSettingsProps, type NotificationSeverity, type NotificationSubscription, type NotificationThreshold, OrgProductSwitcher, type OrgProductSwitcherAction, type OrgProductSwitcherItem, type OrgProductSwitcherProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, RequestRow, type RequestRowProps, type RequestState, type RequestSurface, type ResolvedTheme, type Responsive, ScrollArea, ScrollBar, SectionIntro, type SectionIntroProps, SegmentChip, type SegmentChipProps, Select, type SelectOption, type SelectProps, Separator, type Severity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarBackHeader, type SidebarBackHeaderProps, SidebarNav, SidebarNavLink, type SidebarNavLinkProps, type SidebarNavProps, SidebarProductHeader, type SidebarProductHeaderProps, SignInScreen, type SignInScreenProps, type SignInScreenState, Skeleton, Slider, StatCard, type StatCardProps, StatusDot, type StatusDotProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, type Theme, ThemeToggle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseSidebarOptions, type UseSidebarResult, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuUser, alertVariants, badgeVariants, buttonVariants, cn, formatRelativeAge, isKnownExtensionIcon, isNotificationSettled, navigationMenuTriggerStyle, segmentChipVariants, severityBadgeVariant, severityLabels, statusDotVariants, toggleVariants, useCarousel, useFormField, useIsMobile, useSidebar, useTheme };
+interface NotificationToastProps {
+    item: NotificationItem;
+    /** Provenance shown once per run of same-source cards. Default `true`. */
+    showSource?: boolean;
+    /** A short state line under the body, e.g. "Awaiting your decision — expires in 20s." */
+    note?: React$1.ReactNode;
+    onItemClick?(item: NotificationItem): void;
+    onAction?(action: NotificationAction, item: NotificationItem): void;
+    onDismiss?(item: NotificationItem): void;
+    /** Accessible label for the close button. Default `"Dismiss"`. */
+    dismissLabel?: string;
+    className?: string;
+}
+declare const NotificationToast: React$1.ForwardRefExoticComponent<NotificationToastProps & React$1.RefAttributes<HTMLDivElement>>;
+
+type NotificationToasterPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+interface NotificationToasterProps {
+    /** The live queue. The consumer decides what becomes a toast at all. */
+    items: NotificationItem[];
+    /** Per-severity dwell in seconds, merged over `TOAST_DWELL`. `Infinity` never hides. */
+    dwell?: Partial<NotificationToastDwell>;
+    /** Most cards on screen at once. Default `4`. */
+    max?: number;
+    position?: NotificationToasterPosition;
+    /** Freeze every countdown while the pointer is over the stack. Default `true`. */
+    pauseOnHover?: boolean;
+    /** Fires on auto-hide and on the close button alike — the item leaves the same way. */
+    onDismiss?(id: string): void;
+    onItemClick?(item: NotificationItem): void;
+    onAction?(action: NotificationAction, item: NotificationItem): void;
+    /** Per-item state line, e.g. a TTL countdown the consumer already tracks. */
+    renderNote?(item: NotificationItem): React$1.ReactNode;
+    className?: string;
+}
+declare const NotificationToaster: React$1.ForwardRefExoticComponent<NotificationToasterProps & React$1.RefAttributes<HTMLDivElement>>;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, type AppShellProps, AppSidebar, type AppSidebarProps, AspectRatio, AuthenticatedLayout, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, type CarouselContextProps, CarouselItem, CarouselNext, type CarouselOptions, type CarouselPlugin, CarouselPrevious, type CarouselProps, Checkbox, Code, CodeBlock, type CodeBlockProps, type CodeLang, type CodeProps, Col, type ColProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, type ConfirmDialogProps, type ConnectionAuth, ConnectionCard, type ConnectionCardProps, type ConnectionScope, type ConnectionStatus, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, type CreateProductSubmit, CreateProductWindow, type CreateProductWindowOrganization, type CreateProductWindowProduct, type CreateProductWindowProps, DatePicker, type DatePickerProps, type DeltaDirection, type DeltaTone, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DocsLink, type DocsLinkProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExtensionIcon, type ExtensionIconProps, ExtensionLink, type ExtensionLinkProps, type ExtensionLinkUiMode, FeedbackButton, type FeedbackButtonLabels, type FeedbackButtonProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Grid, GridOverlay, type GridOverlayProps, type GridProps, HoverCard, HoverCardContent, HoverCardTrigger, InlineError, type InlineErrorProps, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, MenuDivider, MenuPopup, type MenuPopupProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, type NavItem, type NavLinkComponent, NavRow, type NavRowProps, type NavRowVariant, NavSectionLabel, type NavSectionLabelProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, type NotifClass, type NotificationAction, NotificationBell, type NotificationBellProps, NotificationCenter, type NotificationCenterProps, type NotificationClass, type NotificationDeepLink, type NotificationItem, type NotificationMute, type NotificationPreferences, type NotificationProduct, NotificationSettings, type NotificationSettingsProps, type NotificationSeverity, type NotificationSubscription, type NotificationThreshold, NotificationToast, type NotificationToastDwell, type NotificationToastProps, NotificationToaster, type NotificationToasterPosition, type NotificationToasterProps, OrgProductSwitcher, type OrgProductSwitcherAction, type OrgProductSwitcherItem, type OrgProductSwitcherProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, RequestRow, type RequestRowProps, type RequestState, type RequestSurface, type ResolvedTheme, type Responsive, ScrollArea, ScrollBar, SectionIntro, type SectionIntroProps, SegmentChip, type SegmentChipProps, Select, type SelectOption, type SelectProps, Separator, type Severity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarBackHeader, type SidebarBackHeaderProps, SidebarNav, SidebarNavLink, type SidebarNavLinkProps, type SidebarNavProps, SidebarProductHeader, type SidebarProductHeaderProps, SignInScreen, type SignInScreenProps, type SignInScreenState, Skeleton, Slider, StatCard, type StatCardProps, StatusDot, type StatusDotProps, Switch, type SwitchProps, TOAST_DWELL, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, type Theme, ThemeToggle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseSidebarOptions, type UseSidebarResult, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuUser, alertVariants, badgeVariants, buttonVariants, cn, formatRelativeAge, isKnownExtensionIcon, isNotificationSettled, navigationMenuTriggerStyle, segmentChipVariants, severityBadgeVariant, severityLabels, statusDotVariants, toggleVariants, useCarousel, useFormField, useIsMobile, useSidebar, useTheme };

package/dist/index.js

@@ -4285,6 +4285,11 @@ var severityBadgeVariants = {
 function severityBadgeVariant(severity) {
   return severityBadgeVariants[severity];
 }
+var TOAST_DWELL = {
+  fyi: 6,
+  important: 8,
+  critical: Infinity
+};
 function formatRelativeAge(createdAt, now = /* @__PURE__ */ new Date()) {
   const then = createdAt instanceof Date ? createdAt : new Date(createdAt);
   const seconds = Math.max(0, Math.floor((now.getTime() - then.getTime()) / 1e3));
@@ -4301,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(
@@ -4333,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) => {
@@ -4370,6 +4392,7 @@ var NotificationBell = React61.forwardRef(
     items,
     unreadCount,
     maxItems = 5,
+    onMarkRead,
     onMarkAllRead,
     onItemClick,
     onActionClick,
@@ -4438,6 +4461,7 @@ var NotificationBell = React61.forwardRef(
             item,
             onItemClick,
             onActionClick,
+            onMarkRead,
             formatAge: age
           },
           item.id
@@ -4459,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",
@@ -4493,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(
@@ -4523,6 +4564,7 @@ var NotificationCenter = React62.forwardRef(
     onItemClick,
     onDeepLinkClick,
     onMarkAllRead,
+    onMarkRead,
     formatAge,
     className
   }, ref) => {
@@ -4644,6 +4686,7 @@ var NotificationCenter = React62.forwardRef(
             item,
             onItemClick,
             onDeepLinkClick,
+            onMarkRead,
             formatAge: age
           },
           item.id
@@ -4871,6 +4914,184 @@ var NotificationSettings = React63.forwardRef(
   }
 );
 NotificationSettings.displayName = "NotificationSettings";
+
+// src/components/notification-toast.tsx
+import * as React64 from "react";
+import { X as X3 } from "lucide-react";
+import { jsx as jsx77, jsxs as jsxs44 } from "react/jsx-runtime";
+var chipBase2 = "rounded-lg px-2.5 py-1 text-sm font-medium transition-colors";
+var chipPrimary = "bg-bg-brand text-text-on-brand hover:bg-bg-brand-hover";
+var chipDestructive = "bg-bg-elevated text-text-danger hover:bg-bg-surface";
+var linkAction = "text-sm font-semibold text-text-brand transition-colors hover:text-text-primary";
+var NotificationToast = React64.forwardRef(
+  ({
+    item,
+    showSource = true,
+    note,
+    onItemClick,
+    onAction,
+    onDismiss,
+    dismissLabel = "Dismiss",
+    className
+  }, ref) => {
+    const actions = item.actions ?? [];
+    return /* @__PURE__ */ jsxs44(
+      "div",
+      {
+        ref,
+        role: "status",
+        "aria-live": item.severity === "critical" ? "assertive" : "polite",
+        className: cn(
+          "rounded-2xl border border-border-subtle bg-bg-elevated p-4 shadow-(--menu-shadow)",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs44("div", { className: "flex items-center gap-2", children: [
+            showSource && /* @__PURE__ */ jsx77("span", { className: "text-xs font-semibold uppercase tracking-[0.09em] text-text-secondary", children: item.source }),
+            /* @__PURE__ */ jsx77(Badge, { variant: severityBadgeVariant(item.severity), children: severityLabels[item.severity] }),
+            onDismiss && /* @__PURE__ */ jsx77(
+              "button",
+              {
+                type: "button",
+                "aria-label": dismissLabel,
+                onClick: () => onDismiss(item),
+                className: "-mr-1 ml-auto flex size-5 shrink-0 items-center justify-center rounded text-text-tertiary transition-colors hover:bg-bg-surface hover:text-text-primary",
+                children: /* @__PURE__ */ jsx77(X3, { className: "size-3.5", "aria-hidden": "true" })
+              }
+            )
+          ] }),
+          onItemClick ? /* @__PURE__ */ jsx77(
+            "button",
+            {
+              type: "button",
+              onClick: () => onItemClick(item),
+              className: "mt-1 block text-left text-sm font-semibold leading-snug text-text-primary underline-offset-2 hover:underline",
+              children: item.title
+            }
+          ) : /* @__PURE__ */ jsx77("p", { className: "mt-1 text-sm font-semibold leading-snug text-text-primary", children: item.title }),
+          item.body && /* @__PURE__ */ jsx77("p", { className: "mt-0.5 text-sm leading-snug text-text-secondary", children: item.body }),
+          note && /* @__PURE__ */ jsx77("p", { className: "mt-1.5 text-xs font-medium text-text-warning", children: note }),
+          actions.length > 0 && /* @__PURE__ */ jsx77("div", { className: "mt-2.5 flex flex-wrap items-center gap-2", children: actions.map((action) => {
+            const variant = action.variant ?? "link";
+            return /* @__PURE__ */ jsx77(
+              "button",
+              {
+                type: "button",
+                onClick: () => onAction?.(action, item),
+                className: variant === "primary" ? cn(chipBase2, chipPrimary) : variant === "destructive" ? cn(chipBase2, chipDestructive) : linkAction,
+                children: action.label
+              },
+              action.id
+            );
+          }) })
+        ]
+      }
+    );
+  }
+);
+NotificationToast.displayName = "NotificationToast";
+
+// src/components/notification-toaster.tsx
+import * as React65 from "react";
+import { jsx as jsx78 } from "react/jsx-runtime";
+var positions = {
+  "bottom-right": "bottom-6 right-6 flex-col",
+  "bottom-left": "bottom-6 left-6 flex-col",
+  "top-right": "top-6 right-6 flex-col-reverse",
+  "top-left": "top-6 left-6 flex-col-reverse"
+};
+var NotificationToaster = React65.forwardRef(
+  ({
+    items,
+    dwell,
+    max = 4,
+    position = "bottom-right",
+    pauseOnHover = true,
+    onDismiss,
+    onItemClick,
+    onAction,
+    renderNote,
+    className
+  }, ref) => {
+    const shown = items.slice(0, max);
+    const [paused, setPaused] = React65.useState(false);
+    const onDismissRef = React65.useRef(onDismiss);
+    onDismissRef.current = onDismiss;
+    const fyiDwell = dwell?.fyi;
+    const importantDwell = dwell?.important;
+    const criticalDwell = dwell?.critical;
+    const remaining = React65.useRef(/* @__PURE__ */ new Map());
+    const liveIds = shown.map((item) => `${item.id}:${item.severity}`).join(" ");
+    React65.useEffect(() => {
+      const owedById = remaining.current;
+      const dwellSeconds = {
+        fyi: fyiDwell ?? TOAST_DWELL.fyi,
+        important: importantDwell ?? TOAST_DWELL.important,
+        critical: criticalDwell ?? TOAST_DWELL.critical
+      };
+      const live = liveIds === "" ? [] : liveIds.split(" ");
+      const ids = new Set(live.map((entry) => entry.slice(0, entry.lastIndexOf(":"))));
+      for (const id of owedById.keys()) {
+        if (!ids.has(id)) owedById.delete(id);
+      }
+      for (const entry of live) {
+        const at = entry.lastIndexOf(":");
+        const id = entry.slice(0, at);
+        const severity = entry.slice(at + 1);
+        if (!owedById.has(id)) {
+          owedById.set(id, dwellSeconds[severity] * 1e3);
+        }
+      }
+      if (paused) return;
+      const startedAt = Date.now();
+      const timers = [];
+      for (const [id, owed] of owedById) {
+        if (!Number.isFinite(owed)) continue;
+        timers.push(
+          setTimeout(() => {
+            owedById.delete(id);
+            onDismissRef.current?.(id);
+          }, owed)
+        );
+      }
+      return () => {
+        timers.forEach(clearTimeout);
+        const elapsed = Date.now() - startedAt;
+        for (const [id, owed] of owedById) {
+          if (Number.isFinite(owed)) owedById.set(id, Math.max(0, owed - elapsed));
+        }
+      };
+    }, [liveIds, paused, fyiDwell, importantDwell, criticalDwell]);
+    if (shown.length === 0) return null;
+    return /* @__PURE__ */ jsx78(
+      "div",
+      {
+        ref,
+        role: "region",
+        "aria-label": "Notifications",
+        onMouseEnter: pauseOnHover ? () => setPaused(true) : void 0,
+        onMouseLeave: pauseOnHover ? () => setPaused(false) : void 0,
+        className: cn(
+          "pointer-events-none fixed z-50 flex w-[350px] gap-3",
+          positions[position],
+          className
+        ),
+        children: shown.map((item, i) => /* @__PURE__ */ jsx78("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx78(
+          NotificationToast,
+          {
+            item,
+            showSource: i === 0 || shown[i - 1].source !== item.source,
+            note: renderNote?.(item),
+            onItemClick,
+            onAction,
+            onDismiss: onDismiss ? () => onDismiss(item.id) : void 0
+          }
+        ) }, item.id))
+      }
+    );
+  }
+);
+NotificationToaster.displayName = "NotificationToaster";
 export {
   Accordion,
   AccordionContent,
@@ -5044,6 +5265,8 @@ export {
   NotificationBell,
   NotificationCenter,
   NotificationSettings,
+  NotificationToast,
+  NotificationToaster,
   OrgProductSwitcher,
   Pagination,
   PaginationContent,
@@ -5086,6 +5309,7 @@ export {
   StatCard,
   StatusDot,
   Switch,
+  TOAST_DWELL,
   Table,
   TableBody,
   TableCaption,

package/package.json

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