sdaia-ui 1.0.1 → 1.0.2

package/src/components/Activity/Activity.tsx

@@ -1,52 +0,0 @@
-'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

@@ -1,19 +0,0 @@
-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

@@ -1,15 +0,0 @@
-/* ── 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

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

package/src/components/ActivityItem/ActivityItem.tsx

@@ -1,298 +0,0 @@
-'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

@@ -1,76 +0,0 @@
-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

@@ -1,117 +0,0 @@
-/* ── 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

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