@open-mercato/ui 0.6.4-develop.4178.1.aad9ddaa95 → 0.6.4-develop.4210.1.d412061cfe

package/src/primitives/drawer.tsx

@@ -0,0 +1,338 @@
+"use client"
+
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@open-mercato/shared/lib/utils'
+
+/**
+ * Side-sheet primitive — slides in from `right` (default), `left`,
+ * `top`, or `bottom`. Distinct from `Dialog`:
+ *
+ *   `Drawer`  — contextual / non-blocking-feeling. Used for detail
+ *               panes, secondary forms, mobile menus. The user can
+ *               glance at it while the surrounding page stays visible
+ *               at a glance behind the overlay.
+ *   `Dialog`  — modal / focused. Used for confirmations, critical
+ *               forms, and full-content workflows that should fully
+ *               replace the page underneath.
+ *
+ * Built on `@radix-ui/react-dialog` (Radix Dialog under the hood —
+ * inherits role="dialog", aria-modal, focus trap, ESC to close,
+ * outside-click to dismiss).
+ *
+ * Figma source: DS Open Mercato `Drawer` page (`486:7366`) —
+ * `Drawer Header [1.1]` (`3187:2897`) covers 4 header variants
+ * (title only / title + leading icon / title + description /
+ * title + description + leading icon badge); `Drawer Footer [1.1]`
+ * (`4096:21416`) covers 6 footer variants (50/50 stretched, right-
+ * aligned compact, left checkbox + right buttons, left switch +
+ * right buttons, left step dots + right buttons, left link button +
+ * right buttons). Per the Figma examples the panel has rounded
+ * corners on the inner (viewport-facing) edges only, no border on
+ * the seam, and no chrome-level dividers between header / body /
+ * footer (separators inside the body come from content, not the
+ * Drawer).
+ *
+ * ```tsx
+ * const [open, setOpen] = React.useState(false)
+ * <Drawer open={open} onOpenChange={setOpen} side="right">
+ *   <DrawerTrigger asChild>
+ *     <Button>Open drawer</Button>
+ *   </DrawerTrigger>
+ *   <DrawerContent>
+ *     <DrawerHeader leading={<Clock />}>
+ *       <DrawerTitle>Edit person</DrawerTitle>
+ *       <DrawerDescription>Update the person's contact info.</DrawerDescription>
+ *     </DrawerHeader>
+ *     <DrawerBody>{children}</DrawerBody>
+ *     <DrawerFooter layout="equal">
+ *       <DrawerClose asChild>
+ *         <Button variant="outline">Cancel</Button>
+ *       </DrawerClose>
+ *       <Button>Continue</Button>
+ *     </DrawerFooter>
+ *   </DrawerContent>
+ * </Drawer>
+ * ```
+ */
+
+const Drawer = DialogPrimitive.Root
+const DrawerTrigger = DialogPrimitive.Trigger
+const DrawerPortal = DialogPrimitive.Portal
+const DrawerClose = DialogPrimitive.Close
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    data-slot="drawer-overlay"
+    className={cn(
+      'fixed inset-0 z-overlay bg-foreground/40 backdrop-blur-sm',
+      'data-[state=open]:animate-in data-[state=closed]:animate-out',
+      'data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0',
+      className,
+    )}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const drawerContentVariants = cva(
+  // Base layout — fixed position, flex column so DrawerHeader / Body
+  // / Footer compose vertically with the body filling free space.
+  // Per Figma the panel has rounded corners on the inner (viewport-
+  // facing) edges only, no border on the seam, and a generous shadow.
+  'fixed z-popover flex flex-col gap-0 bg-background shadow-2xl outline-none ' +
+    'data-[state=open]:animate-in data-[state=closed]:animate-out ' +
+    'data-[state=open]:duration-200 data-[state=closed]:duration-150',
+  {
+    variants: {
+      side: {
+        right:
+          'inset-y-0 right-0 h-full w-full max-w-md rounded-l-xl ' +
+          'data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right',
+        left:
+          'inset-y-0 left-0 h-full w-full max-w-md rounded-r-xl ' +
+          'data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left',
+        top:
+          'inset-x-0 top-0 max-h-[80vh] w-full rounded-b-xl ' +
+          'data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top',
+        bottom:
+          'inset-x-0 bottom-0 max-h-[80vh] w-full rounded-t-xl ' +
+          'data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom',
+      },
+    },
+    defaultVariants: { side: 'right' },
+  },
+)
+
+export type DrawerContentProps = React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Content
+> &
+  VariantProps<typeof drawerContentVariants> & {
+    /** Hide the default top-right close button. */
+    hideCloseButton?: boolean
+    /** ARIA label for the auto-rendered close button. Default `"Close"`. */
+    closeAriaLabel?: string
+  }
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  DrawerContentProps
+>(
+  (
+    {
+      className,
+      side,
+      children,
+      hideCloseButton = false,
+      closeAriaLabel = 'Close',
+      ...props
+    },
+    ref,
+  ) => (
+    <DrawerPortal>
+      <DrawerOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        data-slot="drawer-content"
+        data-side={side ?? 'right'}
+        className={cn(drawerContentVariants({ side }), className)}
+        {...props}
+      >
+        {children}
+        {!hideCloseButton ? (
+          <DrawerClose
+            data-slot="drawer-close-button"
+            aria-label={closeAriaLabel}
+            className={cn(
+              'absolute right-4 top-4 inline-flex size-8 items-center justify-center rounded-md text-muted-foreground outline-none transition-colors',
+              'hover:bg-muted/40 hover:text-foreground',
+              'focus-visible:shadow-focus',
+            )}
+          >
+            <X aria-hidden="true" className="size-4" />
+          </DrawerClose>
+        ) : null}
+      </DialogPrimitive.Content>
+    </DrawerPortal>
+  ),
+)
+DrawerContent.displayName = 'DrawerContent'
+
+export type DrawerHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+  /**
+   * Optional leading icon — rendered inside a size-10 bordered circle
+   * badge to the left of the title block. Matches Figma `Drawer Header
+   * [1.1]` variants 2 + 4 (icon-prefixed title). Pass a `lucide-react`
+   * icon element (size-4 recommended) or any inline node.
+   */
+  leading?: React.ReactNode
+}
+
+const DrawerHeader = React.forwardRef<HTMLDivElement, DrawerHeaderProps>(
+  ({ className, leading, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="drawer-header"
+      className={cn(
+        // Per Figma: no chrome border below the header. Padding-right
+        // reserves room for the auto-close button at top-right.
+        'flex items-start gap-3 px-6 pt-5 pb-4 pr-14',
+        className,
+      )}
+      {...props}
+    >
+      {leading ? (
+        <span
+          data-slot="drawer-header-leading"
+          aria-hidden="true"
+          className="inline-flex size-10 shrink-0 items-center justify-center rounded-full border border-input bg-background text-muted-foreground"
+        >
+          {leading}
+        </span>
+      ) : null}
+      <div data-slot="drawer-header-text" className="flex min-w-0 flex-1 flex-col gap-1">
+        {children}
+      </div>
+    </div>
+  ),
+)
+DrawerHeader.displayName = 'DrawerHeader'
+
+const DrawerBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="drawer-body"
+      className={cn('flex-1 overflow-y-auto px-6 py-2', className)}
+      {...props}
+    />
+  ),
+)
+DrawerBody.displayName = 'DrawerBody'
+
+export type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement> & {
+  /**
+   * Footer button layout per Figma `Drawer Footer [1.1]`:
+   *   `default` — right-aligned compact buttons (Cancel + Continue).
+   *   `equal`   — children stretched to share the row equally (50/50
+   *               for two children). Matches Figma variant 1.
+   * @default 'default'
+   */
+  layout?: 'default' | 'equal'
+  /**
+   * Optional left-side slot — checkbox ("Don't show again"), switch
+   * ("Remember me"), step-indicator dots, link button, or any leading
+   * content per Figma footer variants 3–6. When provided, children
+   * stay right-aligned and the leading slot anchors left.
+   * Mutually exclusive with `layout="equal"` (Figma never combines
+   * the two — the 50/50 split is a confirmation-flow shape).
+   */
+  leading?: React.ReactNode
+}
+
+const DrawerFooter = React.forwardRef<HTMLDivElement, DrawerFooterProps>(
+  ({ className, layout = 'default', leading, children, ...props }, ref) => {
+    const childArray = React.Children.toArray(children)
+    if (layout === 'equal') {
+      return (
+        <div
+          ref={ref}
+          data-slot="drawer-footer"
+          data-layout="equal"
+          className={cn(
+            // Per Figma: no chrome top-border separator; equal-stretch
+            // children share the row (50/50 for two buttons).
+            'flex flex-row items-center gap-3 px-6 pt-4 pb-5 [&>*]:flex-1',
+            className,
+          )}
+          {...props}
+        >
+          {childArray}
+        </div>
+      )
+    }
+    return (
+      <div
+        ref={ref}
+        data-slot="drawer-footer"
+        data-layout="default"
+        className={cn(
+          // Per Figma: no chrome top-border. Optional `leading` anchors
+          // left (mr-auto sibling), buttons stay right-aligned.
+          'flex flex-row items-center gap-3 px-6 pt-4 pb-5',
+          className,
+        )}
+        {...props}
+      >
+        {leading ? (
+          <div
+            data-slot="drawer-footer-leading"
+            className="mr-auto inline-flex items-center gap-2"
+          >
+            {leading}
+          </div>
+        ) : null}
+        {childArray.length > 0 ? (
+          <div
+            data-slot="drawer-footer-trailing"
+            className={cn(
+              'inline-flex items-center gap-3',
+              leading ? '' : 'ml-auto',
+            )}
+          >
+            {childArray}
+          </div>
+        ) : null}
+      </div>
+    )
+  },
+)
+DrawerFooter.displayName = 'DrawerFooter'
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    data-slot="drawer-title"
+    className={cn('text-base font-semibold leading-tight text-foreground', className)}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DialogPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    data-slot="drawer-description"
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerTrigger,
+  DrawerPortal,
+  DrawerClose,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+  drawerContentVariants,
+}

package/src/primitives/notification-feed.tsx

@@ -0,0 +1,358 @@
+"use client"
+
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+/**
+ * Bell-icon inbox / notification list — the panel that opens when the
+ * user clicks the bell affordance in the app shell. Distinct from
+ * `Notification` (single toast in the top-right stack) and from
+ * `ActivityFeed` (chronological audit log scoped to one entity).
+ *
+ * Compound API:
+ *
+ *   <NotificationFeed>             — root container card (rounded,
+ *                                    bg-background, overflow-hidden).
+ *   <NotificationFeedHeader>       — top row: title + actions slot
+ *                                    (settings cog, "Mark all as read"
+ *                                    link, etc.). Bordered bottom.
+ *   <NotificationFeedList>         — `<ol>` list, `divide-y` so items
+ *                                    auto-separate.
+ *   <NotificationFeedItem>         — single notification entry. Slots:
+ *                                     `icon`       — left, typically a
+ *                                                    `NotificationFeedIconBadge`,
+ *                                     `title`      — bold headline,
+ *                                     `body`       — muted description,
+ *                                     `timestamp`  — smaller muted suffix,
+ *                                     `actions`    — right slot
+ *                                                    (kebab IconButton),
+ *                                     `children`   — optional indented
+ *                                                    content (inline
+ *                                                    action buttons,
+ *                                                    file chip, reply).
+ *                                    `unread` toggles a small dot near
+ *                                    the title. `onClick` turns the
+ *                                    whole row into a clickable
+ *                                    affordance.
+ *   <NotificationFeedFooter>       — bottom row. Bordered top. Typical
+ *                                    content: a full-width Archive All
+ *                                    button OR keyboard-hint + settings
+ *                                    link (matches the two Figma
+ *                                    `Notifications Footer [1.1]` /
+ *                                    block-example variants).
+ *   <NotificationFeedIconBadge>    — helper: `size-10 rounded-full
+ *                                    bg-{tone}/10 text-{tone}` badge
+ *                                    matching the Figma assembled
+ *                                    example icon style.
+ *
+ * Figma source: DS Open Mercato `Notifications` page (`4096:21398`) —
+ * `Notifications Items [1.1]` (`4308:731`, 8 variants — 4 designs
+ * × 2 states: default + hover/selected), `Notifications Header [1.1]`
+ * (`4308:1004`), `Notifications Footer [1.1]` (`4308:5526`),
+ * `Notifications Tab Menu [1.1]` (`4349:46656`); assembled examples
+ * `166926:7047`, `166926:7088`, `166926:7114`, `166926:7138`.
+ *
+ * ```tsx
+ * <NotificationFeed>
+ *   <NotificationFeedHeader title="Notifications">
+ *     <IconButton size="sm" variant="ghost" aria-label="Settings">
+ *       <Settings />
+ *     </IconButton>
+ *   </NotificationFeedHeader>
+ *
+ *   <NotificationFeedList>
+ *     <NotificationFeedItem
+ *       icon={
+ *         <NotificationFeedIconBadge tone="indigo">
+ *           <UserPlus className="size-5" />
+ *         </NotificationFeedIconBadge>
+ *       }
+ *       title="New Lead Generated"
+ *       body="John Smith submitted web form"
+ *       timestamp="10 minutes ago"
+ *       unread
+ *       onClick={() => router.push('/leads/123')}
+ *     />
+ *   </NotificationFeedList>
+ *
+ *   <NotificationFeedFooter>
+ *     <Button variant="outline" className="w-full">Archive all</Button>
+ *   </NotificationFeedFooter>
+ * </NotificationFeed>
+ * ```
+ */
+
+const NotificationFeed = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="notification-feed"
+    className={cn(
+      'flex w-full flex-col overflow-hidden rounded-xl border border-input bg-background shadow-lg',
+      className,
+    )}
+    {...props}
+  />
+))
+NotificationFeed.displayName = 'NotificationFeed'
+
+export type NotificationFeedHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+  /** Header title text. Renders as `<h3 className="text-base font-semibold">`. */
+  title?: React.ReactNode
+}
+
+const NotificationFeedHeader = React.forwardRef<HTMLDivElement, NotificationFeedHeaderProps>(
+  ({ className, title, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="notification-feed-header"
+      className={cn(
+        'flex items-center justify-between gap-3 border-b border-input px-4 py-3',
+        className,
+      )}
+      {...props}
+    >
+      {title ? (
+        <h3
+          data-slot="notification-feed-header-title"
+          className="text-base font-semibold text-foreground"
+        >
+          {title}
+        </h3>
+      ) : null}
+      {children ? (
+        <div data-slot="notification-feed-header-actions" className="inline-flex items-center gap-1">
+          {children}
+        </div>
+      ) : null}
+    </div>
+  ),
+)
+NotificationFeedHeader.displayName = 'NotificationFeedHeader'
+
+const NotificationFeedList = React.forwardRef<
+  HTMLOListElement,
+  React.HTMLAttributes<HTMLOListElement>
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    data-slot="notification-feed-list"
+    className={cn('flex flex-col divide-y divide-input', className)}
+    {...props}
+  />
+))
+NotificationFeedList.displayName = 'NotificationFeedList'
+
+export type NotificationFeedItemProps = Omit<
+  React.HTMLAttributes<HTMLLIElement>,
+  'title' | 'onClick'
+> & {
+  /** Left slot — typically a `NotificationFeedIconBadge`. */
+  icon?: React.ReactNode
+  /** Bold headline. */
+  title: React.ReactNode
+  /** Optional muted body text under the title. */
+  body?: React.ReactNode
+  /** Optional smaller muted suffix under the body. */
+  timestamp?: React.ReactNode
+  /** Whether to render the unread indicator dot beside the title. */
+  unread?: boolean
+  /** Optional right-slot actions (e.g. kebab IconButton). Visible on
+   * hover / focus per Figma. Pass `IconButton variant="ghost" size="sm"`. */
+  actions?: React.ReactNode
+  /** Optional click handler. When provided the whole row becomes a
+   * clickable affordance (hover bg, focus ring). */
+  onClick?: () => void
+  /** Accessible label for the row when `onClick` is provided. Default:
+   * the `title` if it's a string, otherwise `'Open notification'`. */
+  clickAriaLabel?: string
+}
+
+const NotificationFeedItem = React.forwardRef<HTMLLIElement, NotificationFeedItemProps>(
+  (
+    {
+      className,
+      icon,
+      title,
+      body,
+      timestamp,
+      unread = false,
+      actions,
+      onClick,
+      clickAriaLabel,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const t = useT()
+    const interactive = typeof onClick === 'function'
+    return (
+      <li
+        ref={ref}
+        data-slot="notification-feed-item"
+        data-unread={unread || undefined}
+        className={cn(
+          'group flex items-start gap-3 px-4 py-3',
+          interactive ? 'cursor-pointer hover:bg-muted/40 focus-within:bg-muted/40' : '',
+          className,
+        )}
+        onClick={onClick}
+        role={interactive ? 'button' : undefined}
+        tabIndex={interactive ? 0 : undefined}
+        aria-label={
+          interactive
+            ? clickAriaLabel ??
+              (typeof title === 'string' ? title : t('ui.notificationFeed.item.openAriaLabel', 'Open notification'))
+            : undefined
+        }
+        onKeyDown={
+          interactive
+            ? (event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                  event.preventDefault()
+                  onClick?.()
+                }
+              }
+            : undefined
+        }
+        {...props}
+      >
+        {icon ? (
+          <span
+            data-slot="notification-feed-item-icon"
+            className="inline-flex shrink-0 items-center justify-center"
+          >
+            {icon}
+          </span>
+        ) : null}
+
+        <div data-slot="notification-feed-item-body" className="flex min-w-0 flex-1 flex-col gap-1">
+          <div
+            data-slot="notification-feed-item-title"
+            className="flex items-center gap-2 text-sm font-semibold text-foreground"
+          >
+            <span className="truncate">{title}</span>
+            {unread ? (
+              <span
+                data-slot="notification-feed-item-unread-dot"
+                aria-hidden="true"
+                className="inline-block size-2 shrink-0 rounded-full bg-accent-indigo"
+              />
+            ) : null}
+          </div>
+          {body ? (
+            <div
+              data-slot="notification-feed-item-text"
+              className="text-sm leading-5 text-muted-foreground"
+            >
+              {body}
+            </div>
+          ) : null}
+          {timestamp ? (
+            <div
+              data-slot="notification-feed-item-timestamp"
+              className="text-xs leading-4 text-muted-foreground"
+            >
+              {timestamp}
+            </div>
+          ) : null}
+          {children ? (
+            <div data-slot="notification-feed-item-children" className="mt-2 flex flex-wrap gap-2">
+              {children}
+            </div>
+          ) : null}
+        </div>
+
+        {actions ? (
+          <div
+            data-slot="notification-feed-item-actions"
+            className="ml-auto inline-flex shrink-0 items-start opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100"
+            onClick={(event) => event.stopPropagation()}
+          >
+            {actions}
+          </div>
+        ) : null}
+      </li>
+    )
+  },
+)
+NotificationFeedItem.displayName = 'NotificationFeedItem'
+
+const NotificationFeedFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="notification-feed-footer"
+    className={cn(
+      'flex items-center justify-between gap-3 border-t border-input px-4 py-3',
+      className,
+    )}
+    {...props}
+  />
+))
+NotificationFeedFooter.displayName = 'NotificationFeedFooter'
+
+const ICON_TONE_MAP = {
+  // Tints + matching icon color per Figma `Notifications Items [1.1]`
+  // assembled examples. Surface is a soft `tone/10` background; icon
+  // carries the semantic color directly.
+  indigo: 'bg-accent-indigo/10 text-accent-indigo',
+  success: 'bg-status-success-icon/10 text-status-success-icon',
+  warning: 'bg-status-warning-icon/10 text-status-warning-icon',
+  error: 'bg-status-error-icon/10 text-status-error-icon',
+  info: 'bg-status-info-icon/10 text-status-info-icon',
+  brand: 'bg-brand-violet/10 text-brand-violet',
+  neutral: 'bg-muted text-muted-foreground',
+} as const
+
+const iconBadgeVariants = cva(
+  'inline-flex shrink-0 items-center justify-center rounded-full',
+  {
+    variants: {
+      tone: ICON_TONE_MAP,
+      size: {
+        sm: 'size-8',
+        default: 'size-10',
+      },
+    },
+    defaultVariants: { tone: 'indigo', size: 'default' },
+  },
+)
+
+export type NotificationFeedIconBadgeProps = React.HTMLAttributes<HTMLSpanElement> &
+  VariantProps<typeof iconBadgeVariants>
+
+const NotificationFeedIconBadge = React.forwardRef<
+  HTMLSpanElement,
+  NotificationFeedIconBadgeProps
+>(({ className, tone, size, children, ...props }, ref) => (
+  <span
+    ref={ref}
+    data-slot="notification-feed-icon-badge"
+    data-tone={tone ?? 'indigo'}
+    className={cn(iconBadgeVariants({ tone, size }), className)}
+    {...props}
+  >
+    {children}
+  </span>
+))
+NotificationFeedIconBadge.displayName = 'NotificationFeedIconBadge'
+
+export type NotificationFeedIconBadgeTone = keyof typeof ICON_TONE_MAP
+
+export {
+  NotificationFeed,
+  NotificationFeedHeader,
+  NotificationFeedList,
+  NotificationFeedItem,
+  NotificationFeedFooter,
+  NotificationFeedIconBadge,
+}