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

package/src/primitives/__tests__/table.test.tsx

@@ -0,0 +1,199 @@
+/** @jest-environment jsdom */
+
+import * as React from 'react'
+import { render } from '@testing-library/react'
+
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../table'
+
+describe('Table primitive (Phase B.6 polish)', () => {
+  it('renders a <table> with data-slot attributes for each slot', () => {
+    const { container } = render(
+      <Table>
+        <TableCaption>Members directory</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>Jan</TableCell>
+          </TableRow>
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TableCell>1 member</TableCell>
+          </TableRow>
+        </TableFooter>
+      </Table>,
+    )
+    expect(container.querySelector('[data-slot="table"]')).not.toBeNull()
+    expect(container.querySelector('[data-slot="table-caption"]')).not.toBeNull()
+    expect(container.querySelector('[data-slot="table-header"]')).not.toBeNull()
+    expect(container.querySelector('[data-slot="table-body"]')).not.toBeNull()
+    expect(container.querySelector('[data-slot="table-footer"]')).not.toBeNull()
+    expect(container.querySelectorAll('[data-slot="table-row"]').length).toBe(3)
+    expect(container.querySelector('[data-slot="table-head"]')).not.toBeNull()
+    expect(container.querySelector('[data-slot="table-cell"]')).not.toBeNull()
+  })
+
+  it('TableHeader gets bg-muted/40 strip per Figma', () => {
+    const { container } = render(
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Col</TableHead>
+          </TableRow>
+        </TableHeader>
+      </Table>,
+    )
+    const head = container.querySelector('[data-slot="table-header"]') as HTMLElement
+    expect(head.className).toContain('bg-muted/40')
+  })
+
+  it('TableFooter gets bordered top + bg-muted/40 strip', () => {
+    const { container } = render(
+      <Table>
+        <TableFooter>
+          <TableRow>
+            <TableCell>Total</TableCell>
+          </TableRow>
+        </TableFooter>
+      </Table>,
+    )
+    const footer = container.querySelector('[data-slot="table-footer"]') as HTMLElement
+    expect(footer.className).toContain('border-t')
+    expect(footer.className).toContain('bg-muted/40')
+    expect(footer.className).toContain('font-medium')
+  })
+
+  it('TableRow gets hover:bg-muted/30 by default + border-b last:border-b-0', () => {
+    const { container } = render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell>x</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>,
+    )
+    const row = container.querySelector('tbody [data-slot="table-row"]') as HTMLElement
+    expect(row.className).toContain('hover:bg-muted/30')
+    expect(row.className).toContain('border-b')
+    expect(row.className).toContain('last:border-b-0')
+    expect(row.className).toContain('transition-colors')
+  })
+
+  it('Striped variant adds even-row bg-muted/20 via context', () => {
+    const { container } = render(
+      <Table variant="striped">
+        <TableBody>
+          <TableRow>
+            <TableCell>1</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>2</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>,
+    )
+    const root = container.querySelector('[data-slot="table"]') as HTMLElement
+    expect(root.getAttribute('data-variant')).toBe('striped')
+    const rows = Array.from(
+      container.querySelectorAll('tbody [data-slot="table-row"]'),
+    ) as HTMLElement[]
+    expect(rows.length).toBe(2)
+    for (const row of rows) {
+      expect(row.className).toContain('even:bg-muted/20')
+    }
+  })
+
+  it('Default variant data-variant attribute reads "default"', () => {
+    const { container } = render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell>x</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>,
+    )
+    const root = container.querySelector('[data-slot="table"]') as HTMLElement
+    expect(root.getAttribute('data-variant')).toBe('default')
+    const row = container.querySelector('tbody [data-slot="table-row"]') as HTMLElement
+    expect(row.className).not.toContain('even:bg-muted/20')
+  })
+
+  it('TableHead keeps text-muted-foreground + font-medium + whitespace-nowrap', () => {
+    const { container } = render(
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Header</TableHead>
+          </TableRow>
+        </TableHeader>
+      </Table>,
+    )
+    const head = container.querySelector('[data-slot="table-head"]') as HTMLElement
+    expect(head.className).toContain('text-muted-foreground')
+    expect(head.className).toContain('font-medium')
+    expect(head.className).toContain('whitespace-nowrap')
+    expect(head.className).toContain('px-4')
+    expect(head.className).toContain('py-2')
+  })
+
+  it('TableCell keeps the original px-4 py-2 padding (backward compat)', () => {
+    const { container } = render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell>cell</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>,
+    )
+    const cell = container.querySelector('[data-slot="table-cell"]') as HTMLElement
+    expect(cell.className).toContain('px-4')
+    expect(cell.className).toContain('py-2')
+  })
+
+  it('forwards className on every slot', () => {
+    const { container } = render(
+      <Table className="t-custom">
+        <TableCaption className="cap-custom">cap</TableCaption>
+        <TableHeader className="head-custom">
+          <TableRow className="row-custom">
+            <TableHead className="th-custom">x</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody className="body-custom">
+          <TableRow>
+            <TableCell className="cell-custom">x</TableCell>
+          </TableRow>
+        </TableBody>
+        <TableFooter className="foot-custom">
+          <TableRow>
+            <TableCell>x</TableCell>
+          </TableRow>
+        </TableFooter>
+      </Table>,
+    )
+    expect(container.querySelector('[data-slot="table"]')!.className).toContain('t-custom')
+    expect(container.querySelector('[data-slot="table-caption"]')!.className).toContain('cap-custom')
+    expect(container.querySelector('[data-slot="table-header"]')!.className).toContain('head-custom')
+    expect(container.querySelector('[data-slot="table-row"]')!.className).toContain('row-custom')
+    expect(container.querySelector('[data-slot="table-head"]')!.className).toContain('th-custom')
+    expect(container.querySelector('[data-slot="table-body"]')!.className).toContain('body-custom')
+    expect(container.querySelector('[data-slot="table-cell"]')!.className).toContain('cell-custom')
+    expect(container.querySelector('[data-slot="table-footer"]')!.className).toContain('foot-custom')
+  })
+})

package/src/primitives/__tests__/tabs.test.tsx

@@ -70,3 +70,142 @@ describe('Tabs context provider', () => {
     expect(after).not.toBe(before)
   })
 })
+
+describe('Tabs Phase B.5 — variant + orientation + leading + count', () => {
+  it('defaults to variant="pill" + orientation="horizontal" (backward compat)', () => {
+    const { container } = render(
+      <Tabs defaultValue="a">
+        <TabsList>
+          <TabsTrigger value="a">A</TabsTrigger>
+        </TabsList>
+        <TabsContent value="a">Content</TabsContent>
+      </Tabs>,
+    )
+    const root = container.querySelector('[data-slot="tabs"]') as HTMLElement
+    expect(root.getAttribute('data-variant')).toBe('pill')
+    expect(root.getAttribute('data-orientation')).toBe('horizontal')
+    const list = container.querySelector('[data-slot="tabs-list"]') as HTMLElement
+    expect(list.className).toContain('bg-muted')
+    expect(list.className).toContain('rounded-lg')
+    expect(list.getAttribute('aria-orientation')).toBe('horizontal')
+  })
+
+  it('switches to underline strip when variant="underline"', () => {
+    const { container } = render(
+      <Tabs defaultValue="a" variant="underline">
+        <TabsList>
+          <TabsTrigger value="a">A</TabsTrigger>
+          <TabsTrigger value="b">B</TabsTrigger>
+        </TabsList>
+      </Tabs>,
+    )
+    const list = container.querySelector('[data-slot="tabs-list"]') as HTMLElement
+    expect(list.className).toContain('border-b')
+    expect(list.className).not.toContain('bg-muted')
+    const active = container.querySelector('[data-state="active"]') as HTMLElement
+    expect(active.getAttribute('data-variant')).toBe('underline')
+    expect(active.className).toContain('border-accent-indigo')
+    expect(active.className).toContain('font-semibold')
+  })
+
+  it('vertical orientation renders list as a column', () => {
+    const { container } = render(
+      <Tabs defaultValue="a" orientation="vertical">
+        <TabsList>
+          <TabsTrigger value="a">A</TabsTrigger>
+        </TabsList>
+      </Tabs>,
+    )
+    const root = container.querySelector('[data-slot="tabs"]') as HTMLElement
+    expect(root.getAttribute('data-orientation')).toBe('vertical')
+    expect(root.className).toContain('flex')
+    expect(root.className).toContain('gap-4')
+    const list = container.querySelector('[data-slot="tabs-list"]') as HTMLElement
+    expect(list.className).toContain('flex-col')
+    expect(list.getAttribute('aria-orientation')).toBe('vertical')
+  })
+
+  it('vertical underline switches to right-side border + bg-muted on active item', () => {
+    const { container } = render(
+      <Tabs defaultValue="a" variant="underline" orientation="vertical">
+        <TabsList>
+          <TabsTrigger value="a">A</TabsTrigger>
+          <TabsTrigger value="b">B</TabsTrigger>
+        </TabsList>
+      </Tabs>,
+    )
+    const list = container.querySelector('[data-slot="tabs-list"]') as HTMLElement
+    expect(list.className).toContain('border-r')
+    const active = container.querySelector('[data-state="active"]') as HTMLElement
+    expect(active.className).toContain('bg-muted/40')
+    expect(active.className).toContain('text-foreground')
+  })
+
+  it('renders the leading icon slot when provided (both variants)', () => {
+    const Icon = () => <svg data-testid="lead" />
+    const { container, rerender } = render(
+      <Tabs defaultValue="a">
+        <TabsList>
+          <TabsTrigger value="a" leading={<Icon />}>A</TabsTrigger>
+        </TabsList>
+      </Tabs>,
+    )
+    expect(container.querySelector('[data-slot="tabs-trigger-leading"]')).not.toBeNull()
+    expect(container.querySelector('[data-testid="lead"]')).not.toBeNull()
+
+    rerender(
+      <Tabs defaultValue="a" variant="underline">
+        <TabsList>
+          <TabsTrigger value="a" leading={<Icon />}>A</TabsTrigger>
+        </TabsList>
+      </Tabs>,
+    )
+    expect(container.querySelector('[data-slot="tabs-trigger-leading"]')).not.toBeNull()
+  })
+
+  it('renders the count slot on selected trigger with accent-indigo tone', () => {
+    const { container } = render(
+      <Tabs defaultValue="a">
+        <TabsList>
+          <TabsTrigger value="a" count={5}>Active</TabsTrigger>
+          <TabsTrigger value="b" count={3}>Inactive</TabsTrigger>
+        </TabsList>
+      </Tabs>,
+    )
+    const counts = Array.from(
+      container.querySelectorAll('[data-slot="tabs-trigger-count"]'),
+    ) as HTMLElement[]
+    expect(counts.length).toBe(2)
+    // The first (selected) trigger's count uses accent-indigo tone.
+    expect(counts[0].className).toContain('bg-accent-indigo/10')
+    expect(counts[0].className).toContain('text-accent-indigo')
+    // The second (inactive) trigger's count uses the muted variant.
+    expect(counts[1].className).toContain('text-muted-foreground')
+    expect(counts[0].textContent).toBe('5')
+    expect(counts[1].textContent).toBe('3')
+  })
+
+  it('count=0 still renders (typeof check is `!== undefined`)', () => {
+    const { container } = render(
+      <Tabs defaultValue="a">
+        <TabsList>
+          <TabsTrigger value="a" count={0}>Empty</TabsTrigger>
+        </TabsList>
+      </Tabs>,
+    )
+    const count = container.querySelector('[data-slot="tabs-trigger-count"]') as HTMLElement
+    expect(count).not.toBeNull()
+    expect(count.textContent).toBe('0')
+  })
+
+  it('omits the count slot entirely when prop is undefined', () => {
+    const { container } = render(
+      <Tabs defaultValue="a">
+        <TabsList>
+          <TabsTrigger value="a">No count</TabsTrigger>
+        </TabsList>
+      </Tabs>,
+    )
+    expect(container.querySelector('[data-slot="tabs-trigger-count"]')).toBeNull()
+  })
+})

package/src/primitives/activity-feed.tsx

@@ -0,0 +1,326 @@
+"use client"
+
+import * as React from 'react'
+import { AlertTriangle, CheckCircle2, Clock, Download, MessageCircle, Paperclip, XCircle } from 'lucide-react'
+
+import { cn } from '@open-mercato/shared/lib/utils'
+
+/**
+ * Chronological activity / audit timeline primitive — list of actor
+ * actions (who did what, when) with optional inline objects and
+ * indented attachment / comment / status rows beneath each entry.
+ *
+ * Compound API:
+ *   <ActivityFeed>                  — root list container.
+ *   <ActivityFeedItem>              — single entry. Slots:
+ *                                       `avatar` (left, size-7 ~28px),
+ *                                       `title`  (actor + verb + inline
+ *                                                object — ReactNode so
+ *                                                consumers can mix bold
+ *                                                actor names with muted
+ *                                                verbs and inline chips),
+ *                                       `timestamp` (rendered as
+ *                                                muted suffix text —
+ *                                                no separator glyph),
+ *                                       `actions` (right slot — typically
+ *                                                a `MoreHorizontal`
+ *                                                IconButton),
+ *                                       `children` (indented attachment
+ *                                                / comment / status row
+ *                                                below the title).
+ *   <ActivityFeedFileChip>          — paperclip + filename + size +
+ *                                     optional download button. Used
+ *                                     inline in the title or in the
+ *                                     indented attachment row below.
+ *   <ActivityFeedComment>           — comment card (avatar + body +
+ *                                     Reply link). Indented attachment
+ *                                     style — render as a child of
+ *                                     `ActivityFeedItem`.
+ *   <ActivityFeedStatusChip>        — semantic status pill (success /
+ *                                     warning / info / error /
+ *                                     neutral). Used inline in the
+ *                                     title for short statuses
+ *                                     ("Pending review", "Approved")
+ *                                     or stacked in the indented row.
+ *
+ * Figma source: DS Open Mercato `Activity Feed` page (`164611:26451`)
+ * — `Activity Feed [1.1]` (`166035:46833`, 5 entry variants: plain,
+ * file attachments, comment, avatar stack, task-status pills);
+ * `Activity Feed File Items [1.1]` (`165967:4028`); `Activity Feed
+ * Comment Items [1.1]` (`166017:612`); `Activity Feed Task Status
+ * Items [1.1]` (`166035:47290`, 4 statuses: success / warning /
+ * info / error). Assembled example: `166707:8700`.
+ *
+ * ```tsx
+ * <ActivityFeed>
+ *   <ActivityFeedItem
+ *     avatar={<Avatar label="Wei Chen" size="sm" />}
+ *     title={<>Wei Chen <span className="text-muted-foreground font-normal">uploaded</span> <strong>Q2 financial report</strong></>}
+ *     timestamp="4 min ago"
+ *     actions={<IconButton variant="ghost" size="sm" aria-label="More"><MoreHorizontal /></IconButton>}
+ *   >
+ *     <ActivityFeedFileChip name="apex-report.pdf" size="4mb" onDownload={() => {}} />
+ *   </ActivityFeedItem>
+ *
+ *   <ActivityFeedItem
+ *     avatar={<Avatar label="Laura Perez" size="sm" />}
+ *     title={<>Laura Perez <span className="text-muted-foreground font-normal">requested changes</span> <ActivityFeedStatusChip status="error">Needs revision</ActivityFeedStatusChip></>}
+ *     timestamp="6 days ago"
+ *   >
+ *     <ActivityFeedComment onReply={() => {}}>
+ *       Please revise the risk metrics and review portfolio allocations.
+ *     </ActivityFeedComment>
+ *   </ActivityFeedItem>
+ * </ActivityFeed>
+ * ```
+ */
+
+export type ActivityFeedProps = React.HTMLAttributes<HTMLOListElement>
+
+const ActivityFeed = React.forwardRef<HTMLOListElement, ActivityFeedProps>(
+  ({ className, ...props }, ref) => (
+    <ol
+      ref={ref}
+      data-slot="activity-feed"
+      className={cn('flex flex-col gap-3', className)}
+      {...props}
+    />
+  ),
+)
+ActivityFeed.displayName = 'ActivityFeed'
+
+export type ActivityFeedItemProps = Omit<React.HTMLAttributes<HTMLLIElement>, 'title'> & {
+  /** Left slot — typically an `Avatar` at `size="sm"` (28px). */
+  avatar?: React.ReactNode
+  /** Headline row — actor + verb + inline object. Pass a ReactNode so
+   * consumers can mix bold actor names with muted verbs and inline
+   * chips (`ActivityFeedFileChip`, `ActivityFeedStatusChip`). */
+  title: React.ReactNode
+  /** Relative time string (e.g. `"4 min ago"`). Rendered as a muted
+   * suffix on the title row — the wrapping `gap-x-2` provides the
+   * visual separation from the title, no separator glyph is used. */
+  timestamp?: React.ReactNode
+  /** Right slot — typically a `MoreHorizontal` IconButton trigger. */
+  actions?: React.ReactNode
+}
+
+const ActivityFeedItem = React.forwardRef<HTMLLIElement, ActivityFeedItemProps>(
+  ({ className, avatar, title, timestamp, actions, children, ...props }, ref) => (
+    <li
+      ref={ref}
+      data-slot="activity-feed-item"
+      className={cn('flex items-start gap-3', className)}
+      {...props}
+    >
+      {avatar ? (
+        <span
+          data-slot="activity-feed-item-avatar"
+          className="mt-0.5 inline-flex shrink-0 items-center justify-center"
+        >
+          {avatar}
+        </span>
+      ) : null}
+      <div data-slot="activity-feed-item-body" className="flex min-w-0 flex-1 flex-col gap-2">
+        <div
+          data-slot="activity-feed-item-title"
+          className="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm leading-6 text-foreground"
+        >
+          <span className="font-semibold">{title}</span>
+          {timestamp ? (
+            <span
+              data-slot="activity-feed-item-timestamp"
+              className="font-normal text-muted-foreground"
+            >
+              {timestamp}
+            </span>
+          ) : null}
+        </div>
+        {children ? (
+          <div data-slot="activity-feed-item-content" className="flex flex-wrap gap-2">
+            {children}
+          </div>
+        ) : null}
+      </div>
+      {actions ? (
+        <div
+          data-slot="activity-feed-item-actions"
+          className="ml-auto inline-flex shrink-0 items-start"
+        >
+          {actions}
+        </div>
+      ) : null}
+    </li>
+  ),
+)
+ActivityFeedItem.displayName = 'ActivityFeedItem'
+
+export type ActivityFeedFileChipProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
+  /** Filename rendered after the paperclip icon (e.g. `"apex-report.pdf"`). */
+  name: React.ReactNode
+  /** Optional size badge in muted text (e.g. `"4mb"`). */
+  size?: React.ReactNode
+  /** Click handler for the trailing download icon-button. When omitted
+   * the download button is not rendered. */
+  onDownload?: () => void
+  /** Accessible label for the download button. Default `"Download"`. */
+  downloadAriaLabel?: string
+}
+
+const ActivityFeedFileChip = React.forwardRef<HTMLDivElement, ActivityFeedFileChipProps>(
+  (
+    { className, name, size, onDownload, downloadAriaLabel = 'Download', ...props },
+    ref,
+  ) => (
+    <div
+      ref={ref}
+      data-slot="activity-feed-file-chip"
+      className={cn(
+        'inline-flex items-center gap-2 rounded-md border border-input bg-background px-3 py-1.5 text-sm text-foreground shadow-xs',
+        className,
+      )}
+      {...props}
+    >
+      <Paperclip aria-hidden="true" className="size-4 shrink-0 text-muted-foreground" />
+      <span className="truncate font-medium">{name}</span>
+      {size ? (
+        <span data-slot="activity-feed-file-chip-size" className="text-muted-foreground">
+          ({size})
+        </span>
+      ) : null}
+      {onDownload ? (
+        <button
+          type="button"
+          data-slot="activity-feed-file-chip-download"
+          aria-label={downloadAriaLabel}
+          onClick={onDownload}
+          className={cn(
+            'ml-1 inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none transition-colors',
+            'hover:bg-muted/40 hover:text-foreground focus-visible:shadow-focus',
+          )}
+        >
+          <Download aria-hidden="true" className="size-3.5" />
+        </button>
+      ) : null}
+    </div>
+  ),
+)
+ActivityFeedFileChip.displayName = 'ActivityFeedFileChip'
+
+export type ActivityFeedCommentProps = React.HTMLAttributes<HTMLDivElement> & {
+  /** Optional leading icon. Default: speech bubble (`MessageCircle`). */
+  icon?: React.ReactNode
+  /** Click handler for the trailing `Reply` link. When omitted no
+   * Reply button is rendered. */
+  onReply?: () => void
+  /** Custom label for the reply affordance. Default `"Reply"`. */
+  replyLabel?: React.ReactNode
+}
+
+const ActivityFeedComment = React.forwardRef<HTMLDivElement, ActivityFeedCommentProps>(
+  ({ className, icon, onReply, replyLabel = 'Reply', children, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="activity-feed-comment"
+      className={cn(
+        'inline-flex w-full items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground shadow-xs',
+        className,
+      )}
+      {...props}
+    >
+      <span data-slot="activity-feed-comment-icon" aria-hidden="true" className="shrink-0">
+        {icon ?? <MessageCircle className="size-4 text-muted-foreground" />}
+      </span>
+      <span data-slot="activity-feed-comment-body" className="min-w-0 flex-1 truncate">
+        {children}
+      </span>
+      {onReply ? (
+        <button
+          type="button"
+          data-slot="activity-feed-comment-reply"
+          onClick={onReply}
+          className={cn(
+            'shrink-0 rounded-md text-sm font-medium text-accent-indigo outline-none transition-colors',
+            'hover:text-accent-indigo/80 focus-visible:shadow-focus',
+          )}
+        >
+          {replyLabel}
+        </button>
+      ) : null}
+    </div>
+  ),
+)
+ActivityFeedComment.displayName = 'ActivityFeedComment'
+
+const STATUS_ICON_MAP: Record<
+  'success' | 'warning' | 'info' | 'error' | 'neutral',
+  React.ComponentType<{ className?: string; 'aria-hidden'?: 'true' | 'false' }>
+> = {
+  success: CheckCircle2,
+  warning: AlertTriangle,
+  info: Clock,
+  error: XCircle,
+  neutral: Clock,
+}
+
+const STATUS_TONE_MAP: Record<
+  'success' | 'warning' | 'info' | 'error' | 'neutral',
+  string
+> = {
+  // Icons keep the semantic color; chip surface stays neutral so the
+  // visual emphasis sits with the icon (matches Figma `Task Status
+  // Items [1.1]` — chips are bordered white pills, the status lives
+  // in the icon color).
+  success: 'text-status-success-icon',
+  warning: 'text-status-warning-icon',
+  info: 'text-status-info-icon',
+  error: 'text-status-error-icon',
+  neutral: 'text-muted-foreground',
+}
+
+export type ActivityFeedStatusChipProps = Omit<
+  React.HTMLAttributes<HTMLSpanElement>,
+  'children'
+> & {
+  status?: 'success' | 'warning' | 'info' | 'error' | 'neutral'
+  /** Override the auto status icon. */
+  icon?: React.ReactNode
+  /** Chip label. */
+  children: React.ReactNode
+}
+
+const ActivityFeedStatusChip = React.forwardRef<HTMLSpanElement, ActivityFeedStatusChipProps>(
+  ({ className, status = 'neutral', icon, children, ...props }, ref) => {
+    const Icon = STATUS_ICON_MAP[status]
+    const iconTone = STATUS_TONE_MAP[status]
+    return (
+      <span
+        ref={ref}
+        data-slot="activity-feed-status-chip"
+        data-status={status}
+        className={cn(
+          'inline-flex items-center gap-1.5 rounded-md border border-input bg-background px-2 py-1 text-sm font-medium text-foreground shadow-xs',
+          className,
+        )}
+        {...props}
+      >
+        <span
+          data-slot="activity-feed-status-chip-icon"
+          aria-hidden="true"
+          className={cn('inline-flex shrink-0 items-center justify-center', iconTone)}
+        >
+          {icon ?? <Icon aria-hidden="true" className="size-4" />}
+        </span>
+        <span>{children}</span>
+      </span>
+    )
+  },
+)
+ActivityFeedStatusChip.displayName = 'ActivityFeedStatusChip'
+
+export {
+  ActivityFeed,
+  ActivityFeedItem,
+  ActivityFeedFileChip,
+  ActivityFeedComment,
+  ActivityFeedStatusChip,
+}