@lessly/ui 0.14.0 → 0.15.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
@@ -1428,4 +1437,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));
@@ -4871,6 +4876,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 +5227,8 @@ export {
   NotificationBell,
   NotificationCenter,
   NotificationSettings,
+  NotificationToast,
+  NotificationToaster,
   OrgProductSwitcher,
   Pagination,
   PaginationContent,
@@ -5086,6 +5271,7 @@ export {
   StatCard,
   StatusDot,
   Switch,
+  TOAST_DWELL,
   Table,
   TableBody,
   TableCaption,

package/dist/styles.css

@@ -82,6 +82,7 @@
   --shadow-md: 0 2px 8px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
   --shadow-lg: 0 8px 24px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);
   --shadow-xl: 0 16px 48px rgba(0,0,0,0.7), 0 4px 12px rgba(0,0,0,0.5);
+  --shadow-overlay: 0 8px 24px rgba(0,0,0,0.5);
   --shadow-inner: inset 0 1px 3px rgba(0,0,0,0.4);
   --shadow-glow-brand: 0 0 12px rgba(6,41,125,0.5);
   --overlay-backdrop: rgba(8,9,12,0.80);
@@ -325,6 +326,7 @@
   --shadow-md: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
   --shadow-lg: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
   --shadow-xl: 0 16px 48px rgba(0,0,0,0.16), 0 4px 12px rgba(0,0,0,0.08);
+  --shadow-overlay: 0 12px 32px rgba(16,24,40,0.1), 0 2px 8px rgba(16,24,40,0.06);
   --shadow-inner: inset 0 1px 3px rgba(0,0,0,0.08);
   --shadow-glow-brand: 0 0 12px rgba(6,41,125,0.2);
   --overlay-backdrop: rgba(14,16,21,0.50);
@@ -740,12 +742,11 @@
 }
 :root {
   /* === Nav / menu surfaces (0.3.0 sidebar) === */
-  /* --menu-shadow stays a literal mirroring the 0.3.0 prototype's --shadow-md:
-     @lessly/tokens ships its own --shadow-* scale, but with different values —
-     switching to var(--shadow-md) would visibly change the menus. */
+  /* --menu-shadow sits on the package's --shadow-overlay role; theme.css re-resolves
+     it per theme, so `.light` needs no override. */
   --hov-bg: color-mix(in srgb, var(--text-primary) 7%, transparent);
   --menu-bg: var(--bg-elevated);
-  --menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+  --menu-shadow: var(--shadow-overlay);
   --menu-hov: var(--hov-bg);
 
   /* === Sign-in / auth screen (<SignInScreen/>) ===
@@ -764,10 +765,9 @@
 .light {
   /* Light keeps opaque plates: a translucent text-mix would vanish on a white menu.
      Pinned 0.3.0-prototype literals — deliberately NOT var(--bg-elevated), which
-     only coincidentally resolves to the same white in the current package. */
+     resolves to #edeef0 in the package, not this white. */
   --hov-bg: #ffffff;
   --menu-bg: #ffffff;
-  --menu-shadow: 0 12px 32px rgba(16, 24, 40, 0.1), 0 2px 8px rgba(16, 24, 40, 0.06);
   --menu-hov: #f2f4f7;
 
   /* Auth screen — see :root above. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lessly/ui",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Lessly design system — shared UI primitives, tokens, and theme",
   "type": "module",
   "packageManager": "pnpm@10.30.3",
@@ -62,7 +62,7 @@
     }
   },
   "dependencies": {
-    "@lessly/tokens": "^0.3.1",
+    "@lessly/tokens": "^0.4.0",
     "@radix-ui/react-accordion": "^1.2.16",
     "@radix-ui/react-alert-dialog": "^1.1.19",
     "@radix-ui/react-aspect-ratio": "^1.1.11",
@@ -103,6 +103,7 @@
     "@changesets/cli": "^2.31.0",
     "@eslint/js": "^9.39.5",
     "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/blocks": "8.6.18",
     "@storybook/react": "^8.6.18",
     "@storybook/react-vite": "^8.6.18",
     "@tailwindcss/cli": "^4",