sdaia-ui 1.0.1

package/src/components/Activity/Activity.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { ActivityItem } from '../ActivityItem';
+import { Divider } from '../Divider';
+import type { ActivityProps } from './Activity.types';
+import { ROOT_GAP } from './Activity.variants';
+
+export const Activity = forwardRef<HTMLDivElement, ActivityProps>(function Activity(
+  {
+    items,
+    divider = false,
+    dir: dirProp,
+    rtl,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const dir = dirProp ?? (rtl ? 'rtl' : undefined);
+  const gap = divider ? ROOT_GAP.divider : ROOT_GAP.default;
+
+  return (
+    <div
+      ref={ref}
+      data-slot="activity"
+      data-divider={divider}
+      dir={dir}
+      className={cn('flex flex-col items-start w-full', gap, className)}
+      {...rest}
+    >
+      {items.map((itemProps, index) => (
+        <div
+          key={itemProps.id ?? index}
+          data-slot="activity-row"
+          className="contents"
+        >
+          {divider && index > 0 && (
+            <Divider data-slot="activity-divider" />
+          )}
+
+          <ActivityItem
+            {...itemProps}
+            rtl={dir === 'rtl' || itemProps.rtl}
+            className={cn('w-full shrink-0', itemProps.className)}
+          />
+        </div>
+      ))}
+    </div>
+  );
+});

package/src/components/Activity/Activity.types.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from 'react';
+import type { ActivityItemProps } from '../ActivityItem/ActivityItem.types';
+
+export interface ActivityProps extends HTMLAttributes<HTMLDivElement> {
+  /** The feed items to render. Each entry maps 1-to-1 to an `ActivityItem`. */
+  items: ActivityItemProps[];
+
+  /**
+   * When true a 1 px horizontal rule is inserted between every consecutive
+   * pair of items. Gap collapses from 24 px to 12 px on each side of the rule.
+   */
+  divider?: boolean;
+
+  /** Preferred RTL prop — sets `dir="rtl"` on the root element. */
+  dir?: 'ltr' | 'rtl';
+
+  /** @deprecated Use `dir="rtl"` instead. */
+  rtl?: boolean;
+}

package/src/components/Activity/Activity.variants.ts

@@ -0,0 +1,15 @@
+/* ── Root container gap ──────────────────────────────────────────
+ * Figma token mapping:
+ *   divider=false → gap 24 px → global/spacing-3xl → gap-spacing-3xl
+ *   divider=true  → gap 12 px → global/spacing-lg  → gap-spacing-lg
+ *
+ * When dividers are active the gap is split: 12 px above the
+ * divider + 12 px below = same visual rhythm as 24 px without one.
+ */
+export const ROOT_GAP: Record<'default' | 'divider', string> = {
+  default: 'gap-spacing-3xl',  // 24 px — Divider=False
+  divider: 'gap-spacing-lg',   // 12 px — Divider=True (each side of the 1 px rule)
+};
+
+/* Divider rule — rendered via the shared <Divider /> component.
+ * See packages/ui/src/components/Divider/Divider.tsx.            */

package/src/components/Activity/index.ts

@@ -0,0 +1,2 @@
+export { Activity } from './Activity';
+export type { ActivityProps } from './Activity.types';

package/src/components/ActivityItem/ActivityItem.tsx

@@ -0,0 +1,298 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { ActivityItemProps, ActivityItemBadgeColor } from './ActivityItem.types';
+import type { BadgeColor } from '../Badge/Badge.types';
+import { Badge } from '../Badge';
+import {
+  ROOT_ALIGN,
+  AVATAR_BASE,
+  AVATAR_BG,
+  AVATAR_RING,
+  AVATAR_STATUS_DOT,
+  TITLE_TEXT,
+  SUBTEXT_TEXT,
+  HELPER_TEXT,
+  UNREAD_DOT,
+  FILE_NAME_TEXT,
+  FILE_SIZE_TEXT,
+  COMMENT_BUBBLE,
+  COMMENT_TEXT,
+  ACTION_BTN,
+  IMAGE_WRAPPER,
+} from './ActivityItem.variants';
+import { PDFSvg } from '../../icons/IconFactory';
+import { Image01SVG } from '../../icons/IconFactory';
+
+/* ── ActivityItemBadgeColor → Badge color token ─────────────────
+ * Maps the three ActivityItem badge palette names to the equivalent
+ * design-system Badge color tokens, all rendered in `soft` variant.
+ *
+ *   blue     → info      (bg #eff8ff / border #53b1fd / text #1570ef)
+ *   gold     → secondary (bg #fffef2 / border #f7d54d / text #dba102)
+ *   lavender → tertiary  (bg #f9f5fa / border #ccadd9 / text #80519f)
+ */
+const BADGE_COLOR_MAP: Record<ActivityItemBadgeColor, BadgeColor> = {
+  blue: 'info',
+  gold: 'secondary',
+  lavender: 'tertiary',
+};
+
+/**
+ * ActivityItem — a feed / timeline row showing a user avatar, name,
+ * timestamp, optional description, and one of five body types:
+ *
+ *   text    — title + helper text only
+ *   file    — attached PDF file card
+ *   badge   — labelled pill tags
+ *   comment — bordered comment bubble + Reply / Like actions
+ *   image   — image preview + Reply / Like actions
+ *
+ * The component is direction-aware: pass `rtl` to mirror the layout
+ * for Arabic without any extra code path.  All logical CSS properties
+ * (end-0, rounded-ss-*, etc.) respond to the `dir="rtl"` attribute
+ * placed on the root element.
+ */
+export const ActivityItem = forwardRef<HTMLDivElement, ActivityItemProps>(function ActivityItem(
+  {
+    type = 'text',
+    title,
+    subtext,
+    helperText,
+    unread = false,
+    avatarSrc,
+    avatarAlt = '',
+    fileName,
+    fileSize,
+    badges,
+    comment,
+    imageSrc,
+    imageAlt = '',
+    primaryAction,
+    secondaryAction,
+    rtl = false,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const rootAlign = type === 'text' ? ROOT_ALIGN.text : ROOT_ALIGN.other;
+
+  return (
+    <div
+      ref={ref}
+      data-slot="activity-item"
+      data-type={type}
+      data-unread={unread}
+      dir={rtl ? 'rtl' : undefined}
+      className={cn(
+        'flex gap-spacing-lg',
+        'w-full min-w-[300px] max-w-[320px] md:max-w-[480px]',
+        rootAlign,
+        className,
+      )}
+      {...rest}
+    >
+      {/* ── Avatar ──────────────────────────────────────────────── */}
+      <div data-slot="activity-item-avatar" className={AVATAR_BASE}>
+        {/* Gray background circle */}
+        <div className={AVATAR_BG} />
+
+        {/* Photo — real photo or avatar placeholder */}
+        <img
+          src={avatarSrc ?? '/images/avatar.webp'}
+          alt={avatarAlt}
+          className="absolute inset-0 size-full rounded-full object-cover"
+        />
+
+        {/* White ring overlay */}
+        <div className={AVATAR_RING} />
+
+        {/* Green online dot — always at the inner corner (end-0 = logical) */}
+        <div
+          data-slot="activity-item-avatar-dot"
+          className={AVATAR_STATUS_DOT}
+        />
+      </div>
+
+      {/* ── Content ─────────────────────────────────────────────── */}
+      {/* Content is a flex row: [body column] [unread dot?] */}
+      <div
+        data-slot="activity-item-content"
+        className="flex flex-1 gap-spacing-lg items-start min-w-0"
+      >
+        {/* Body column — grows to fill remaining width */}
+        <div className="flex flex-1 flex-col gap-spacing-lg items-start min-w-0">
+
+          {/* ── Text and helper ───────────────────────────── */}
+          <div
+            data-slot="activity-item-text"
+            className="flex flex-col gap-spacing-xxs items-start w-full"
+          >
+            {/* Title row — name + timestamp */}
+            <div className="flex gap-spacing-md items-center w-full">
+              {title && (
+                <p data-slot="activity-item-title" className={TITLE_TEXT}>
+                  {title}
+                </p>
+              )}
+              {subtext && (
+                <p data-slot="activity-item-subtext" className={cn(SUBTEXT_TEXT, 'flex-1 min-w-0')}>
+                  {subtext}
+                </p>
+              )}
+            </div>
+
+            {/* Helper / description text */}
+            {helperText && (
+              <p data-slot="activity-item-helper" className={HELPER_TEXT}>
+                {helperText}
+              </p>
+            )}
+          </div>
+
+          {/* ── File body ─────────────────────────────────── */}
+          {type === 'file' && (
+            <div
+              data-slot="activity-item-file"
+              className="flex gap-spacing-md items-center w-full"
+            >
+              <PDFSvg className="shrink-0" />
+              <div className="flex flex-1 flex-col gap-spacing-xxs items-start min-w-0">
+                {fileName && (
+                  <p className={FILE_NAME_TEXT}>{fileName}</p>
+                )}
+                {fileSize && (
+                  <p className={FILE_SIZE_TEXT}>{fileSize}</p>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* ── Badge body ────────────────────────────────── */}
+          {type === 'badge' && badges && badges.length > 0 && (
+            <div
+              data-slot="activity-item-badges"
+              className="flex flex-wrap gap-spacing-xs items-center"
+            >
+              {badges.map((badge, i) => (
+                <Badge
+                  key={i}
+                  variant="soft"
+                  pill
+                  size="md"
+                  color={BADGE_COLOR_MAP[badge.color]}
+                >
+                  {badge.label}
+                </Badge>
+              ))}
+            </div>
+          )}
+
+          {/* ── Comment body ──────────────────────────────── */}
+          {type === 'comment' && (
+            <div
+              data-slot="activity-item-comment"
+              className="flex flex-col gap-spacing-xs items-start w-full"
+            >
+              {/* Bubble */}
+              <div className={COMMENT_BUBBLE}>
+                <p className={COMMENT_TEXT}>
+                  {comment ?? 'Comment here'}
+                </p>
+              </div>
+
+              {/* Actions */}
+              {(primaryAction || secondaryAction) && (
+                <div
+                  data-slot="activity-item-actions"
+                  className="flex gap-spacing-lg items-center"
+                >
+                  {primaryAction && (
+                    <button
+                      type="button"
+                      className={ACTION_BTN}
+                      onClick={primaryAction.onClick}
+                    >
+                      {primaryAction.label}
+                    </button>
+                  )}
+                  {secondaryAction && (
+                    <button
+                      type="button"
+                      className={ACTION_BTN}
+                      onClick={secondaryAction.onClick}
+                    >
+                      {secondaryAction.label}
+                    </button>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* ── Image body ────────────────────────────────── */}
+          {type === 'image' && (
+            <div
+              data-slot="activity-item-image"
+              className="flex flex-col gap-spacing-xs items-start w-full"
+            >
+              {/* Image or gray placeholder */}
+              <div className={IMAGE_WRAPPER}>
+                {imageSrc ? (
+                  <img
+                    src={imageSrc}
+                    alt={imageAlt}
+                    className="size-full object-cover rounded-[8px]"
+                  />
+                ) : (
+                  <Image01SVG />
+                )}
+              </div>
+
+              {/* Actions */}
+              {(primaryAction || secondaryAction) && (
+                <div
+                  data-slot="activity-item-actions"
+                  className="flex gap-spacing-lg items-center"
+                >
+                  {primaryAction && (
+                    <button
+                      type="button"
+                      className={ACTION_BTN}
+                      onClick={primaryAction.onClick}
+                    >
+                      {primaryAction.label}
+                    </button>
+                  )}
+                  {secondaryAction && (
+                    <button
+                      type="button"
+                      className={ACTION_BTN}
+                      onClick={secondaryAction.onClick}
+                    >
+                      {secondaryAction.label}
+                    </button>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* ── Unread dot ──────────────────────────────────────
+         * Always the LAST child of the content flex row.
+         * When dir="rtl" is active, flex reversal moves it to
+         * the visual left automatically — no extra code needed.
+         */}
+        {unread && (
+          <div
+            data-slot="activity-item-unread"
+            className={UNREAD_DOT}
+          />
+        )}
+      </div>
+    </div>
+  );
+});

package/src/components/ActivityItem/ActivityItem.types.ts

@@ -0,0 +1,76 @@
+import type { HTMLAttributes } from 'react';
+
+/* ── Structural types ────────────────────────────────────────────
+ * Matches the five Figma variants:
+ *   Text | File | Badge | Comment | Image
+ */
+export type ActivityItemType = 'text' | 'file' | 'badge' | 'comment' | 'image';
+
+/* ── Badge color tokens ──────────────────────────────────────────
+ * Three palette options shown in the Badge variant.
+ */
+export type ActivityItemBadgeColor = 'blue' | 'gold' | 'lavender';
+
+export interface ActivityItemBadge {
+  /** Pill label text */
+  label: string;
+  /** Pill color scheme */
+  color: ActivityItemBadgeColor;
+}
+
+export interface ActivityItemAction {
+  /** Button label (e.g. "Reply", "Like") */
+  label: string;
+  onClick?: () => void;
+}
+
+export interface ActivityItemProps extends HTMLAttributes<HTMLDivElement> {
+  /** Structural variant — controls which body content is rendered */
+  type?: ActivityItemType;
+
+  /* ── Header row ── */
+  /** Primary label (username / actor name) */
+  title?: string;
+  /** Timestamp or secondary label shown beside the title */
+  subtext?: string;
+  /** Supporting description shown below the title row */
+  helperText?: string;
+
+  /* ── Avatar ── */
+  /** URL of the user's avatar photo */
+  avatarSrc?: string;
+  /** Accessible alt text for the avatar photo */
+  avatarAlt?: string;
+
+  /* ── File type ── */
+  /** File name shown in the File variant (e.g. "File Name.pdf") */
+  fileName?: string;
+  /** File size shown in the File variant (e.g. "150 KB") */
+  fileSize?: string;
+
+  /* ── Badge type ── */
+  /** Pill badges shown in the Badge variant */
+  badges?: ActivityItemBadge[];
+
+  /* ── Comment / Image types ── */
+  /** Placeholder text shown inside the comment bubble */
+  comment?: string;
+
+  /** URL of the image shown in the Image variant */
+  imageSrc?: string;
+  /** Accessible alt text for the image */
+  imageAlt?: string;
+
+  /** Primary action button (e.g. Reply) */
+  primaryAction?: ActivityItemAction;
+  /** Secondary action button (e.g. Like) */
+  secondaryAction?: ActivityItemAction;
+
+  /* ── State ── */
+  /** When true shows the green unread indicator dot */
+  unread?: boolean;
+
+  /* ── Layout ── */
+  /** Enables right-to-left layout for Arabic */
+  rtl?: boolean;
+}

package/src/components/ActivityItem/ActivityItem.variants.ts

@@ -0,0 +1,117 @@
+/* ── Root layout ─────────────────────────────────────────────────
+ * Text type centers avatar with the single-line text row.
+ * All other types pin both to the top (items-start) since the
+ * content column grows beyond the avatar height.
+ */
+export const ROOT_ALIGN: Record<'text' | 'other', string> = {
+  text: 'items-center',
+  other: 'items-start',
+};
+
+/* ── Avatar ──────────────────────────────────────────────────────
+ * Fixed 48 × 48 circle. The status-dot uses `end-0` (logical)
+ * so it appears at the inner corner in both LTR and RTL.
+ *
+ * light-mode border → white
+ * dark-mode border  → page background (#1f2a37)
+ */
+export const AVATAR_BASE = 'relative shrink-0 size-[48px]';
+export const AVATAR_BG = 'absolute inset-0 rounded-full bg-[#f3f4f6] dark:bg-[#374151]';
+export const AVATAR_RING = 'absolute inset-0 rounded-full border-2 border-white dark:border-[#1f2a37] pointer-events-none';
+export const AVATAR_STATUS_DOT = [
+  'absolute bottom-0 end-0',
+  'size-[16px] rounded-full',
+  'bg-[#25935f]',
+  'border border-white dark:border-[#1f2a37]',
+].join(' ');
+
+/* ── Typography ──────────────────────────────────────────────────
+ * Figma token mapping:
+ *   Title   → Text sm / Medium  → 14px / 500 / 20px line-height
+ *   Subtext → Text xs / Regular → 12px / 400 / 18px line-height
+ *   Helper  → Text xs / Regular → same as Subtext
+ *   Actions → Text xs / Medium  → 12px / 500 / 18px line-height
+ */
+export const TITLE_TEXT = [
+  'text-text-sm font-[500]',
+  'text-[#1f2a37] dark:text-[#f9fafb]',
+  'shrink-0 whitespace-nowrap',
+].join(' ');
+
+export const SUBTEXT_TEXT = [
+  'text-text-xs font-[400]',
+  'text-[#6c737f] text-xs dark:text-[#9ca3af]',
+].join(' ');
+
+export const HELPER_TEXT = [
+  'text-text-xs font-[400]',
+  'text-[#6c737f] dark:text-[#9ca3af]',
+  'w-full',
+].join(' ');
+
+/* ── Unread indicator dot ────────────────────────────────────────
+ * Always placed as the LAST child of the content flex row.
+ * `dir="rtl"` on the root reverses flex, moving it to the visual
+ * start (left) automatically — no separate RTL code path needed.
+ */
+export const UNREAD_DOT = 'size-[8px] rounded-full bg-[#25935f] shrink-0';
+
+/* ── File card ───────────────────────────────────────────────────
+ * PDF icon: 40 × 40.  File-name text: Text xs / Medium.
+ * File-size text: Text xs / Regular.
+ */
+export const FILE_NAME_TEXT = [
+  'text-text-xs font-[500]',
+  'text-[#6c737f] dark:text-[#9ca3af]',
+  'w-full',
+].join(' ');
+
+export const FILE_SIZE_TEXT = [
+  'text-text-xs font-[400]',
+  'text-[#6c737f] dark:text-[#9ca3af]',
+  'w-full',
+].join(' ');
+
+/* ── Comment bubble ──────────────────────────────────────────────
+ * `rounded-ss-none` = the top corner adjacent to the avatar is
+ * NOT rounded in both LTR (top-left) and RTL (top-right) because
+ * `ss` is the logical start-start corner, which is always closest
+ * to the avatar regardless of text direction.
+ */
+export const COMMENT_BUBBLE = [
+  'w-full',
+  'border border-[#d2d6db] dark:border-[#374151]',
+  'px-spacing-xl py-spacing-lg',
+  'rounded-ss-none rounded-se-[8px] rounded-b-[8px]',
+].join(' ');
+
+export const COMMENT_TEXT = [
+  'text-text-sm font-[400]',
+  'text-[#6c737f] dark:text-[#9ca3af]',
+  'flex-1 min-w-0',
+].join(' ');
+
+/* ── Action buttons (Reply / Like) ───────────────────────────────
+ * Text xs / Medium. In RTL, the browser reverses flex order
+ * automatically so DOM order [primary, secondary] always renders
+ * correctly without extra logic.
+ */
+export const ACTION_BTN = [
+  'inline-flex items-center justify-center',
+  'p-spacing-md max-h-[24px]',
+  'rounded-[8px]',
+  'text-text-xs font-[500] whitespace-nowrap',
+  'text-[#6c737f] dark:text-[#9ca3af]',
+  'cursor-pointer',
+].join(' ');
+
+/* ── Image wrapper ───────────────────────────────────────────────
+ * 140 px tall, full-width gray rounded container.
+ */
+export const IMAGE_WRAPPER = [
+  'w-full h-[140px]',
+  'rounded-[8px]',
+  'bg-[#f3f4f6] dark:bg-[#374151]',
+  'flex items-center justify-center',
+  'overflow-hidden',
+].join(' ');

package/src/components/ActivityItem/index.ts

@@ -0,0 +1,8 @@
+export { ActivityItem } from './ActivityItem';
+export type {
+  ActivityItemProps,
+  ActivityItemType,
+  ActivityItemBadgeColor,
+  ActivityItemBadge,
+  ActivityItemAction,
+} from './ActivityItem.types';