sdaia-ui 1.0.1

package/src/components/NotificationBanner/NotificationBanner.variants.ts

@@ -0,0 +1,109 @@
+/* ──────────────────────────────────────────────────────────────
+ * NotificationBanner — class-name maps.
+ *
+ * Color values are sourced from the Figma variables bound to the
+ * Notification Banner frame (JnxIDV6Ev4yznMM0njgo5i → 4254:34140).
+ * We keep them as rgba literals where a design token doesn't exist
+ * so the package has no hidden dependency on host-app Tailwind
+ * theme keys. Dark-mode pairs accompany every surface.
+ * ────────────────────────────────────────────────────────────── */
+
+/* ── Root container ───────────────────────────────────────────── */
+
+/** Shared base applied to every layout/type combination. */
+export const ROOT_BASE = [
+  'relative flex w-full max-w-[720px] overflow-hidden',
+  // background-neutral-25 (no exact token, #fcfcfd)
+  'bg-[rgba(252,252,253,1)] dark:bg-[rgba(22,22,22,1)]',
+  // border-background-white (#f3f4f6)
+  'border border-solid border-[rgba(243,244,246,1)] dark:border-[rgba(55,65,81,1)]',
+  // radius-8
+  'rounded-[8px]',
+].join(' ');
+
+/** Inline layout with a compact media slot (leading-icon / avatar / progress). */
+export const ROOT_INLINE_COMPACT = 'flex-row items-start gap-spacing-lg p-spacing-xl';
+
+/** Inline layout with an edge-to-edge image — no padding, no gap at root. */
+export const ROOT_INLINE_IMAGE = 'flex-row items-start gap-spacing-none p-spacing-none';
+
+/** Stacked layout — column with spacing-xl gap and spacing-xl padding. */
+export const ROOT_STACKED = 'flex-col items-stretch gap-spacing-xl p-spacing-xl';
+
+/* ── Featured icon (rounded-full wrapper for leading-icon) ────── */
+
+export const FEATURED_ICON_WRAPPER = [
+  'inline-flex items-center justify-center flex-shrink-0',
+  // spacing-lg (12px) padding per Figma
+  'p-spacing-lg rounded-full',
+  // background-neutral-50 (#f9fafb)
+  'bg-color-background-neutral-50 dark:bg-[rgba(31,42,55,1)]',
+].join(' ');
+
+/** Inner icon size — Figma shows 20 px fixed across breakpoints. */
+export const FEATURED_ICON_INNER = [
+  'inline-flex items-center justify-center flex-shrink-0',
+  'size-[20px]',
+  // icon-default (#161616)
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(243,244,246,1)]',
+].join(' ');
+
+/* ── Avatar slot ──────────────────────────────────────────────── */
+
+/** Reserved flex-shrink-0 wrapper around the Avatar component. */
+export const AVATAR_WRAPPER = 'flex-shrink-0';
+
+/* ── Image slot ───────────────────────────────────────────────── */
+
+/** Inline layout image — 136×136 flush to the start edge. */
+export const IMAGE_INLINE = 'block size-[136px] flex-shrink-0 object-cover';
+
+/** Stacked layout image — full width, fixed height, rounded. */
+export const IMAGE_STACKED = 'block h-[180px] w-full rounded-[8px] object-cover';
+
+/* ── Content column (holds title/description + actions) ───────── */
+
+/** Default content column used for inline layouts without image. */
+export const CONTENT_COLUMN =
+  'flex flex-1 min-w-0 flex-col items-start gap-spacing-xl';
+
+/** Inline-image content column carries its own padding (root has none). */
+export const CONTENT_COLUMN_INLINE_IMAGE =
+  'flex flex-1 min-w-0 flex-col items-start gap-spacing-xl p-spacing-xl';
+
+/** Title + close button row (inline layouts). */
+export const TITLE_CLOSE_ROW = 'flex gap-spacing-lg items-start w-full';
+
+/** Title + close button row (stacked layout). */
+export const STACKED_HEADER_ROW =
+  'flex items-start justify-between w-full gap-spacing-md';
+
+/** Text block (title + description). */
+export const TEXT_BLOCK =
+  'flex flex-1 min-w-0 flex-col gap-spacing-xs items-start w-full';
+
+/** Title — text-md / semibold / 24 LH / text-display. */
+export const TITLE_CLASS = [
+  'm-0 w-full',
+  'text-text-md font-[600] leading-[24px]',
+  'text-color-display dark:text-[rgba(243,244,246,1)]',
+].join(' ');
+
+/** Description — text-sm / regular / 20 LH / text-primary-paragraph. */
+export const DESCRIPTION_CLASS = [
+  'm-0 w-full',
+  'text-text-sm font-[400] leading-[20px]',
+  // text-primary-paragraph (#384250)
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(209,213,219,1)]',
+].join(' ');
+
+/* ── Actions row ──────────────────────────────────────────────── */
+
+/** LTR actions row — flex-start (default). */
+export const ACTIONS_ROW = 'flex gap-spacing-xs items-center w-full';
+
+/** RTL mirror — visually left-aligned actions per Figma RTL frames. */
+export const ACTIONS_ROW_RTL_JUSTIFY = 'justify-end';
+
+/** Progress bar row — full-width wrapper. */
+export const PROGRESS_ROW = 'w-full';

package/src/components/NotificationBanner/index.ts

@@ -0,0 +1,7 @@
+export { NotificationBanner } from './NotificationBanner';
+export type {
+  NotificationBannerProps,
+  NotificationBannerLayout,
+  NotificationBannerType,
+  NotificationBannerAvatar,
+} from './NotificationBanner.types';

package/src/components/NotificationPopup/NotificationPopup.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import { forwardRef, type ReactNode } from 'react';
+import { cn } from '../../lib/cn';
+import {
+  AlertCircle02Icon,
+  AlertCircleWarningIcon,
+  BellCircleIcon,
+  Tick02Icon,
+  XCircleIcon,
+} from '../../icons/IconFactory';
+import type {
+  NotificationPopupProps,
+  NotificationPopupType,
+} from './NotificationPopup.types';
+import {
+  ACTIONS_PAIR,
+  ACTIONS_SINGLE,
+  ACTIONS_STACKED,
+  CONTENT_WRAPPER,
+  DESCRIPTION_CLASS,
+  FEATURED_BADGE_SIZE,
+  FEATURED_BADGE_WRAPPER,
+  FEATURED_ICON_ROW,
+  FEATURED_INPUT_INNER,
+  FEATURED_INPUT_WRAPPER,
+  ROOT_BASE,
+  ROOT_WIDTH,
+  TEXT_BLOCK,
+  TITLE_CLASS,
+} from './NotificationPopup.variants';
+
+/** Default icon glyph per type — pre-built multi-color badges live in IconFactory. */
+function DefaultIcon({ type }: { type: NotificationPopupType }): ReactNode {
+  switch (type) {
+    case 'success':
+      return <Tick02Icon />;
+    case 'error':
+      return <XCircleIcon />;
+    case 'warning':
+      return <AlertCircleWarningIcon />;
+    case 'alert':
+      return <BellCircleIcon />;
+    case 'input':
+      return <AlertCircle02Icon />;
+  }
+}
+
+/** Resolves the correct actions-row wrapper class based on type. */
+function resolveActionsClass(type: NotificationPopupType): string {
+  if (type === 'alert') return ACTIONS_PAIR;
+  if (type === 'input') return ACTIONS_STACKED;
+  return ACTIONS_SINGLE;
+}
+
+export const NotificationPopup = forwardRef<HTMLDivElement, NotificationPopupProps>(
+  function NotificationPopup(
+    {
+      type = 'success',
+      title,
+      description,
+      icon,
+      actions,
+      children,
+      footer,
+      dir: dirProp,
+      rtl = false,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const dir = dirProp ?? (rtl ? 'rtl' : undefined);
+    const renderedIcon = icon ?? <DefaultIcon type={type} />;
+
+    /* Input uses a pale-green circle wrapper around a small glyph. Every
+     * other type renders a pre-colored badge SVG directly. */
+    const featuredIconNode =
+      type === 'input' ? (
+        <div data-slot="featured-icon" className={FEATURED_INPUT_WRAPPER}>
+          <span
+            data-slot="featured-icon-inner"
+            className={FEATURED_INPUT_INNER}
+            aria-hidden="true"
+          >
+            {renderedIcon}
+          </span>
+        </div>
+      ) : (
+        <span
+          data-slot="featured-icon"
+          aria-hidden="true"
+          className={cn(FEATURED_BADGE_WRAPPER, FEATURED_BADGE_SIZE[type])}
+        >
+          {renderedIcon}
+        </span>
+      );
+
+    return (
+      <div
+        ref={ref}
+        dir={dir}
+        data-slot="notification-popup"
+        data-type={type}
+        role="alertdialog"
+        aria-modal="false"
+        className={cn('motion-enter', ROOT_BASE, ROOT_WIDTH[type], className)}
+        {...rest}
+      >
+        {/* Header: featured icon + title + description */}
+        <div data-slot="content-wrapper" className={CONTENT_WRAPPER}>
+          <div data-slot="icon-row" className={FEATURED_ICON_ROW}>
+            {featuredIconNode}
+          </div>
+
+          <div data-slot="text" className={TEXT_BLOCK}>
+            <p className={TITLE_CLASS}>{title}</p>
+            {description ? (
+              <p className={DESCRIPTION_CLASS}>{description}</p>
+            ) : null}
+          </div>
+        </div>
+
+        {/* Input-only extra content (e.g. radio rows) */}
+        {children ? (
+          <div data-slot="content" className="w-full">
+            {children}
+          </div>
+        ) : null}
+
+        {/* Actions row */}
+        {actions ? (
+          <div data-slot="actions" className={resolveActionsClass(type)}>
+            {actions}
+          </div>
+        ) : null}
+
+        {/* Footer (e.g. consent text) */}
+        {footer ? (
+          <div data-slot="footer" className="w-full">
+            {footer}
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);

package/src/components/NotificationPopup/NotificationPopup.types.ts

@@ -0,0 +1,51 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+/** Visual/semantic variant — drives icon, featured-icon background, and layout differences. */
+export type NotificationPopupType = 'success' | 'error' | 'warning' | 'alert' | 'input';
+
+export interface NotificationPopupProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /**
+   * Popup type.
+   * - `success` / `error` / `warning` — 360 px wide, single centered action button.
+   * - `alert` — 360 px wide, two side-by-side action buttons.
+   * - `input` — 480 px wide, supports `children` (e.g. radio rows) and `footer` (consent text),
+   *   with actions rendered as a stacked full-width column.
+   * @default 'success'
+   */
+  type?: NotificationPopupType;
+  /** Title text (required). */
+  title: ReactNode;
+  /** Supporting description text under the title. */
+  description?: ReactNode;
+  /**
+   * Override the default per-type icon.
+   * Defaults per type:
+   * - `success` → `TickIcon`
+   * - `error`   → `CloseIcon`
+   * - `warning` → `AlertCircleIcon`
+   * - `alert`   → `BellIcon`
+   * - `input`   → `AlertCircleIcon`
+   */
+  icon?: ReactNode;
+  /**
+   * Action buttons rendered in the actions row.
+   * Typically one or two `<Button />` elements — the wrapping row's layout
+   * is selected automatically based on `type`.
+   */
+  actions?: ReactNode;
+  /**
+   * Extra content rendered between the header and the actions row.
+   * Used by the `input` type for the radio-row list.
+   */
+  children?: ReactNode;
+  /**
+   * Footer content rendered under the actions row.
+   * Used by the `input` type for the consent / Privacy Policy text.
+   */
+  footer?: ReactNode;
+  /** Direction — applied to the root and drives RTL layout. */
+  dir?: 'ltr' | 'rtl';
+  /** @deprecated Use `dir="rtl"` instead. */
+  rtl?: boolean;
+}

package/src/components/NotificationPopup/NotificationPopup.variants.ts

@@ -0,0 +1,145 @@
+import type { NotificationPopupType } from './NotificationPopup.types';
+
+/* ──────────────────────────────────────────────────────────────
+ * NotificationPopup — class-name maps.
+ *
+ * Color values are sourced from the Figma variables bound to the
+ * Notification Popup frame (JnxIDV6Ev4yznMM0njgo5i → 4250:30117).
+ * Values that don't map to an existing global token are kept as
+ * rgba literals alongside the Figma variable name in a comment.
+ * Dark-mode pairs accompany every surface.
+ * ────────────────────────────────────────────────────────────── */
+
+/* ── Root container ───────────────────────────────────────────── */
+
+export const ROOT_BASE = [
+  'relative flex flex-col items-start overflow-hidden',
+  // gap-3xl / p-3xl (24px)
+  'gap-spacing-3xl p-spacing-3xl',
+  // radius-24
+  'rounded-[24px]',
+  // background-neutral-25 (#fcfcfd) + dark neutral
+  'bg-[rgba(252,252,253,1)] dark:bg-[rgba(22,22,22,1)]',
+  // border-background-white (#f3f4f6) + dark neutral
+  'border border-solid border-[rgba(243,244,246,1)] dark:border-[rgba(55,65,81,1)]',
+  // Responsive width — phone fluid, desktop capped
+  'w-full',
+].join(' ');
+
+/** Width per type — Input is 480 px wide, all others are 360 px. */
+export const ROOT_WIDTH: Record<NotificationPopupType, string> = {
+  success: 'max-w-[360px]',
+  error: 'max-w-[360px]',
+  warning: 'max-w-[360px]',
+  alert: 'max-w-[360px]',
+  input: 'max-w-[480px]',
+};
+
+/* ── Content wrapper (icon + text block) ──────────────────────── */
+
+export const CONTENT_WRAPPER =
+  'flex flex-col gap-spacing-xl items-start w-full';
+
+/** Featured-icon row — featured icon is centered at the top. */
+export const FEATURED_ICON_ROW =
+  'flex items-center justify-center w-full';
+
+/** Text block — title + description, centered. */
+export const TEXT_BLOCK =
+  'flex flex-col gap-spacing-md items-center text-center w-full';
+
+export const TITLE_CLASS = [
+  'm-0 w-full',
+  // text-xl / semibold / 30 LH
+  'text-text-xl font-[600] leading-[30px]',
+  // text-display (#1f2a37)
+  'text-color-display dark:text-[rgba(243,244,246,1)]',
+].join(' ');
+
+export const DESCRIPTION_CLASS = [
+  'm-0 w-full',
+  // text-sm / regular / 20 LH
+  'text-text-sm font-[400] leading-[20px]',
+  // text-primary-paragraph (#384250)
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(209,213,219,1)]',
+].join(' ');
+
+/* ── Featured icon slot ───────────────────────────────────────────
+ *
+ * For Success / Error / Warning / Alert we use pre-built badge SVGs
+ * (Tick02Icon, XCircleIcon, AlertCircleWarningIcon, BellCircleIcon)
+ * that already paint the colored circle background. The slot therefore
+ * only needs to reserve the correct outer size — no padding, no tint.
+ *
+ * For Input we wrap the simple AlertCircle02Icon glyph in a pale-green
+ * circle (Figma: background-primary-50 / icon-success) with p-spacing-xl
+ * to match the original "featured icon" treatment.
+ * ──────────────────────────────────────────────────────────────── */
+
+/**
+ * Outer box size for the pre-built badge icons.
+ *   Success / Error / Warning / Input → 64 × 64 (p-16 + 32-glyph)
+ *   Alert                              → 60 × 60 (p-16 + 28-bell)
+ */
+export const FEATURED_BADGE_SIZE: Record<NotificationPopupType, string> = {
+  success: 'size-[64px]',
+  error: 'size-[64px]',
+  warning: 'size-[64px]',
+  alert: 'size-[60px]',
+  input: 'size-[64px]',
+};
+
+/** Plain flex wrapper used for SEWA — the SVG paints its own circle. */
+export const FEATURED_BADGE_WRAPPER =
+  'inline-flex items-center justify-center flex-shrink-0';
+
+/**
+ * Input-specific featured-icon wrapper — pale-green circle carrying the
+ * small alert glyph. Stays in the codebase because the Input glyph is a
+ * single-color 32 × 32 icon, not a pre-built badge.
+ *   bg   → background-primary-50 (#f3fcf6)
+ */
+export const FEATURED_INPUT_WRAPPER = [
+  'inline-flex items-center justify-center flex-shrink-0',
+  'p-spacing-xl rounded-full',
+  'bg-[rgba(243,252,246,1)] dark:bg-[rgba(20,52,36,1)]',
+].join(' ');
+
+/** Inner glyph size for the Input featured icon. */
+export const FEATURED_INPUT_INNER = 'inline-flex items-center justify-center flex-shrink-0 size-[32px]';
+
+/* ── Actions rows (layout differs by type) ────────────────────── */
+
+/** Success / Error / Warning — single centered button with px-7xl padding. */
+export const ACTIONS_SINGLE =
+  'flex items-center justify-center gap-spacing-none px-spacing-7xl w-full';
+
+/** Alert — two side-by-side buttons, gap-md, both flex-1. */
+export const ACTIONS_PAIR =
+  'flex items-center justify-center gap-spacing-md w-full';
+
+/** Input — stacked full-width buttons, gap-md, px-xl. */
+export const ACTIONS_STACKED =
+  'flex flex-col items-center justify-center gap-spacing-md px-spacing-xl w-full';
+
+/* ── Input-only: radio content block + footer ─────────────────── */
+
+export const INPUT_CONTENT =
+  'flex flex-col gap-spacing-lg items-start w-full';
+
+export const INPUT_CONTENT_TITLE = [
+  'm-0 w-full text-center',
+  // text-md / semibold / 24 LH
+  'text-text-md font-[600] leading-[24px]',
+  'text-color-display dark:text-[rgba(243,244,246,1)]',
+].join(' ');
+
+export const INPUT_ROWS_LIST =
+  'flex flex-col gap-spacing-lg items-stretch w-full';
+
+export const INPUT_FOOTER = [
+  'm-0 w-full text-center',
+  'text-text-sm font-[400] leading-[20px]',
+  // text-secondary-paragraph (#6c737f)
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]',
+].join(' ');

package/src/components/NotificationPopup/index.ts

@@ -0,0 +1,5 @@
+export { NotificationPopup } from './NotificationPopup';
+export type {
+  NotificationPopupProps,
+  NotificationPopupType,
+} from './NotificationPopup.types';

package/src/components/Notifications/Notifications.tsx

@@ -0,0 +1,209 @@
+'use client';
+
+import { forwardRef, useState, useCallback, Fragment } from 'react';
+import { cn } from '../../lib/cn';
+import { Button } from '../Button';
+import { Divider } from '../Divider';
+import { HorizontalTabs } from '../HorizontalTabs';
+import { ActivityItem } from '../ActivityItem';
+import type { NotificationsProps } from './Notifications.types';
+import { CloseIcon } from '../../icons/IconFactory';
+import {
+  PANEL,
+  HEADER_ROW,
+  HEADER_TITLE,
+  TABS_ROW,
+  TABS_UNDERLINE,
+  MARK_ALL_BTN,
+  FEED_AREA,
+  GROUP_LABEL,
+} from './Notifications.variants';
+
+const DEFAULT_TABS = [
+  { value: 'all', label: 'All' },
+  { value: 'direct', label: 'Direct' },
+];
+
+/**
+ * Notifications — a fixed-width notification panel composed from
+ * HorizontalTabs (sub-header) and ActivityItem rows grouped by time.
+ *
+ * Structure:
+ *   ┌────────────────────────────────┐
+ *   │ Header row: Title  [×]         │  border-b
+ *   ├────────────────────────────────┤
+ *   │ [All] [Direct]   Mark all read │  border-b (HorizontalTabs underline)
+ *   ├────────────────────────────────┤
+ *   │ Today                          │
+ *   │   ActivityItem …               │
+ *   │   ─────────────────────────── │  <Divider /> (full-width)
+ *   │   ActivityItem …               │
+ *   │   ───────────── (indented)     │  <Divider length="inset-start" /> (ps-spacing-3xl)
+ *   │ Yesterday                      │
+ *   │   ActivityItem …               │
+ *   └────────────────────────────────┘
+ *
+ * Tab content:
+ *   Pass `groupsByTab` to supply a different group list per tab value.
+ *   Falls back to `groups` for tabs without a specific entry.
+ *
+ * RTL: a single `dir="rtl"` on the root cascades to all children —
+ * HorizontalTabs, ActivityItems, flex rows all mirror automatically.
+ */
+export const Notifications = forwardRef<HTMLDivElement, NotificationsProps>(
+  function Notifications(
+    {
+      title = 'Notifications',
+      tabs,
+      activeTab,
+      onTabChange,
+      onMarkAllRead,
+      onClose,
+      groups = [],
+      groupsByTab,
+      rtl = false,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const resolvedTabs = tabs ?? DEFAULT_TABS;
+
+    /* ── Tab selection: controlled / uncontrolled ──────────────── */
+    const isControlled = activeTab !== undefined;
+    const [internalTab, setInternalTab] = useState<string>(
+      resolvedTabs[0]?.value ?? 'all',
+    );
+    const selectedTab = isControlled ? activeTab! : internalTab;
+
+    const handleTabChange = useCallback(
+      (next: string) => {
+        if (!isControlled) setInternalTab(next);
+        onTabChange?.(next);
+      },
+      [isControlled, onTabChange],
+    );
+
+    /* ── Resolve which groups to display for the active tab ─────── */
+    const displayGroups = groupsByTab?.[selectedTab] ?? groups;
+
+    return (
+      <div
+        ref={ref}
+        data-slot="notifications"
+        dir={rtl ? 'rtl' : undefined}
+        className={cn(PANEL, className)}
+        {...rest}
+      >
+        {/* ── Header ─────────────────────────────────────────── */}
+        <div className={HEADER_ROW}>
+          <h2 className={HEADER_TITLE}>{title}</h2>
+
+          {onClose && (
+            <Button
+              variant="transparent"
+              size="sm"
+              iconOnly
+              leadingIcon={<CloseIcon />}
+              aria-label="Close notifications"
+              onClick={onClose}
+            />
+          )}
+        </div>
+
+        {/* ── Tabs sub-header ────────────────────────────────── */}
+        <div className={TABS_ROW}>
+          <div className="flex-1 min-w-0">
+            <HorizontalTabs
+              type="underline"
+              items={resolvedTabs}
+              value={selectedTab}
+              onValueChange={handleTabChange}
+            />
+          </div>
+
+          {onMarkAllRead && (
+            <button
+              type="button"
+              className={MARK_ALL_BTN}
+              onClick={onMarkAllRead}
+            >
+              Mark all as Read
+            </button>
+          )}
+
+          {/* Full-width gray baseline — extends across HorizontalTabs and
+              the Mark-all button area. The active tab's green border-b-[2px]
+              sits on top of this line automatically.                       */}
+          <div aria-hidden="true" className={TABS_UNDERLINE} />
+        </div>
+
+        {/* ── Feed groups ────────────────────────────────────── */}
+        {displayGroups.length > 0 && (
+          <div className={FEED_AREA}>
+            {/*
+             * flatMap builds an explicit flat list of React nodes so flex gap
+             * is always applied correctly between every sibling — avoids the
+             * Fragment + flex-gap edge-case where the group separator could be
+             * swallowed.
+             *
+             * Rendered DOM order (for 2+ groups):
+             *   <div.group>        ← group 0
+             *   <div.group-divider-wrap>  ← indented separator
+             *   <div.group>        ← group 1
+             *   …
+             */}
+            {displayGroups.flatMap((group, gi) => {
+              /* ── Group block ──────────────────────────────── */
+              const groupBlock = (
+                <div key={`group-${gi}`} className="flex flex-col gap-spacing-lg">
+                  <span className={GROUP_LABEL}>{group.label}</span>
+
+                  {/*
+                   * Items use gap-spacing-lg between ALL direct children
+                   * (items + dividers) — same rhythm as Activity divider=true.
+                   *
+                   * Layout per pair:
+                   *   ActivityItem → 12 px gap → <Divider length="inset-start" /> (1 px) → 12 px gap → ActivityItem
+                   */}
+                  <div className="flex flex-col gap-spacing-lg">
+                    {group.items.map((item, ii) => (
+                      <Fragment key={ii}>
+                        {ii > 0 && (
+                          <Divider data-slot="notifications-item-divider" length="inset-start" />
+                        )}
+                        <ActivityItem
+                          {...item}
+                          rtl={rtl || item.rtl}
+                          /* Override ActivityItem's mobile width cap so items
+                           * fill the notification panel's content column.   */
+                          className={cn(
+                            'w-full min-w-0 max-w-none md:max-w-none',
+                            item.className,
+                          )}
+                        />
+                      </Fragment>
+                    ))}
+                  </div>
+                </div>
+              );
+
+              if (gi === 0) return [groupBlock];
+
+              /* ── Group separator (inset-start = indented past the avatar) */
+              const separator = (
+                <Divider
+                  key={`sep-${gi}`}
+                  data-slot="notifications-group-divider"
+                  length="inset-start"
+                />
+              );
+
+              return [separator, groupBlock];
+            })}
+          </div>
+        )}
+      </div>
+    );
+  },
+);