Notification v2

import { Notification, NotificationStack } from "@/components/ui/notification";

import { CloudArrowUp } from "@phosphor-icons/react/ssr";
import { Notification } from "@/components/ui/notification";

export function Example() {
  return (
    <Notification
      variant="brand"
      icon={<CloudArrowUp weight="duotone" />}
      title="Backup complete"
      description="412 files synced to Dropbox a moment ago."
      actionButton={{ label: "View files" }}
    />
  );
}

Notification                     (single component — pass everything as props)
├── version="v1 | v2"            (v2 default — card + accent bar · v1 pill)
├── variant="default | brand | info | success | warning | destructive"
├── icon={<PhosphorIcon weight="duotone" />}
├── title={<ReactNode>}
├── description={<ReactNode>}
├── action={<Button … />}         (optional — top-right slot)
└── actionButton={{ label, loadingLabel?, doneLabel?, successMessage?, variant?, onAction? }}

NotificationStack                (a deck of notifications, newest first)
├── items={[{ id, variant, icon, title, description, actionButton? }, …]}
└── version="v1 | v2"            (applies to every banner in the deck)

notification({ … })              (same content, fired as a Sonner toast)
└── { title, description?, variant?, version?, icon?, actionButton?, duration?, id? }