sdaia-ui 1.0.1

package/src/components/Notifications/Notifications.types.ts

@@ -0,0 +1,68 @@
+import type { HTMLAttributes } from 'react';
+import type { HorizontalTabItem } from '../HorizontalTabs/HorizontalTabs.types';
+import type { ActivityItemProps } from '../ActivityItem/ActivityItem.types';
+
+/* ── Notification group ──────────────────────────────────────────
+ * The panel groups items by time period (e.g. "Today", "Yesterday").
+ * Each group has a label and a list of ActivityItem props.
+ */
+export interface NotificationGroup {
+  /** Date / period label shown above the items. */
+  label: string;
+  /** Feed items that belong to this period. */
+  items: ActivityItemProps[];
+}
+
+export interface NotificationsProps extends HTMLAttributes<HTMLDivElement> {
+  /* ── Content ── */
+  /** Panel heading. Defaults to "Notifications". */
+  title?: string;
+
+  /**
+   * Tab definitions rendered in the sub-header.
+   * Defaults to `[{ value: 'all', label: 'All' }, { value: 'direct', label: 'Direct' }]`.
+   * Uses the `HorizontalTabItem` type so consumers can add icons / counts.
+   */
+  tabs?: HorizontalTabItem[];
+
+  /** Controlled active tab value. Defaults to the first tab's value. */
+  activeTab?: string;
+
+  /** Fired when the user switches tabs. */
+  onTabChange?: (value: string) => void;
+
+  /** "Mark all as Read" action callback. */
+  onMarkAllRead?: () => void;
+
+  /** Fired when the user presses the × close button. */
+  onClose?: () => void;
+
+  /**
+   * Notification groups to render for every tab (or when no tab-specific
+   * override is provided).
+   * Each group is a `{ label: string, items: ActivityItemProps[] }` object.
+   */
+  groups?: NotificationGroup[];
+
+  /**
+   * Per-tab group overrides.
+   * Keys must match the `value` of a tab item.
+   * When the active tab has an entry here its groups are shown instead of
+   * `groups`.  Tabs with no entry fall back to `groups`.
+   *
+   * @example
+   * groupsByTab={{
+   *   all:    [{ label: 'Today', items: [...] }],
+   *   direct: [{ label: 'Direct', items: [...] }],
+   * }}
+   */
+  groupsByTab?: Record<string, NotificationGroup[]>;
+
+  /* ── Layout ── */
+  /**
+   * Enables RTL layout for Arabic content.
+   * Sets `dir="rtl"` on the root element; the browser cascades this to
+   * all child components automatically (tabs, activity items, etc.).
+   */
+  rtl?: boolean;
+}

package/src/components/Notifications/Notifications.variants.ts

@@ -0,0 +1,89 @@
+/* ── Notifications panel variants ────────────────────────────────
+ * All Tailwind class names are kept as complete string literals so
+ * the static scanner can detect them without running JS.
+ */
+
+/* ── Panel card ──────────────────────────────────────────────── */
+export const PANEL = [
+  'bg-white dark:bg-[#1f2a37]',
+  'border border-[#d2d6db] dark:border-[#374151]',
+  'rounded-[8px]',
+  'flex flex-col',
+  'w-full max-w-[420px]',
+  'overflow-hidden',
+].join(' ');
+
+/* ── Header row ──────────────────────────────────────────────── */
+/*
+ * No border-b — the visual separation between the header and the tabs
+ * row is purely from this section's pb-spacing-xl (16 px gap).
+ */
+export const HEADER_ROW = [
+  'flex items-center gap-spacing-lg',
+  'px-spacing-xl pt-spacing-xl pb-spacing-xl',
+].join(' ');
+
+export const HEADER_TITLE = [
+  'flex-1',
+  'text-text-md font-[600]',
+  'text-[#1f2a37] dark:text-[#f9fafb]',
+].join(' ');
+
+/* ── Tabs sub-header row ─────────────────────────────────────── */
+/*
+ * `isolate` creates a new stacking context so the absolutely-positioned
+ * TABS_UNDERLINE can be pushed to [z-index:-1] and sit BEHIND the
+ * non-positioned tab buttons — letting the selected tab's green
+ * border-b-[2px] show through on top.
+ * `items-end` + `pb-0` flush tab buttons to the row bottom so their
+ * border-b aligns with the absolute underline.
+ * No `pt-spacing-xl` — the header's pb-spacing-xl is the only gap.
+ */
+export const TABS_ROW = [
+  'relative isolate flex items-end gap-spacing-lg',
+  'px-spacing-xl pb-0',
+].join(' ');
+
+/*
+ * 1 px gray baseline, inset by px-spacing-xl on both sides.
+ * [z-index:-1] inside the `isolate` stacking context sits this behind
+ * all non-positioned elements (tab buttons), so the selected tab's
+ * green border-b-[2px] (2 px) is always visible on top.
+ *
+ * Visual result:
+ *   unselected area → 1 px gray
+ *   selected tab    → 2 px green (border-b-[2px] of Tab) over the gray
+ */
+export const TABS_UNDERLINE = 'absolute bottom-0 start-spacing-xl end-spacing-xl h-px bg-[#e5e7eb] dark:bg-[#374151] [z-index:-1]';
+
+/*
+ * "Mark all as Read" — text-only action button.
+ * `self-center` keeps it vertically centred while the row uses
+ * `items-end` for the tab buttons.
+ * Uses the brand green from the design system.
+ */
+export const MARK_ALL_BTN = [
+  'shrink-0 self-center',
+  'text-text-xs font-[500]',
+  'text-[#25935f]',
+  'cursor-pointer whitespace-nowrap',
+  'hover:underline',
+].join(' ');
+
+/* ── Feed / groups scroll area ───────────────────────────────── */
+export const FEED_AREA = [
+  'flex flex-col gap-spacing-xl',
+  'px-spacing-xl py-spacing-xl',
+  'overflow-y-auto',
+].join(' ');
+
+/* ── Date-group label ────────────────────────────────────────── */
+export const GROUP_LABEL = [
+  'text-text-xs font-[500]',
+  'text-[#6c737f] dark:text-[#9ca3af]',
+].join(' ');
+
+/* Dividers between items and between groups are rendered via the shared
+ * <Divider /> component. See Notifications.tsx for usage:
+ *   item divider  → <Divider length="inset-start"> (neutral hairline, indented past avatar)
+ *   group divider → <Divider length="inset-start"> (same, between date groups) */

package/src/components/Notifications/index.ts

@@ -0,0 +1,2 @@
+export { Notifications } from './Notifications';
+export type { NotificationsProps, NotificationGroup } from './Notifications.types';

package/src/components/Number/Number.tsx

@@ -0,0 +1,497 @@
+'use client';
+
+import { cn } from '../../lib/cn';
+import { ButtonMenu } from '../ButtonMenu';
+import type { NumberProps, NumberRow, StatTrend } from './Number.types';
+import {
+  CARD_BASE,
+  LABEL_CLASS,
+  VALUE_LG_CLASS,
+  VALUE_MD_CLASS,
+  TITLE_CLASS,
+  VERT_DIVIDER,
+  HORIZ_DIVIDER,
+  BADGE_POSITIVE,
+  BADGE_NEGATIVE,
+  BADGE_TEXT_POSITIVE,
+  BADGE_TEXT_NEGATIVE,
+  DETAIL_PANEL,
+  MORE_BTN,
+  ARROW_LEFT_PATH,
+  ARROW_VIEWBOX,
+} from './Number.variants';
+
+// ─── Internal sub-components ──────────────────────────────────────────────────
+
+/** Arrow-left icon used inside TrendBadge */
+function ArrowLeftIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox={ARROW_VIEWBOX}
+      fill="none"
+      aria-hidden="true"
+    >
+      <path
+        d={ARROW_LEFT_PATH}
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/** Pill badge: arrow icon + percentage, coloured by trend direction */
+function TrendBadge({
+  trend,
+  value,
+}: {
+  trend: StatTrend;
+  value: string;
+}) {
+  const pillClass = trend === 'positive' ? BADGE_POSITIVE : BADGE_NEGATIVE;
+  const textClass = trend === 'positive' ? BADGE_TEXT_POSITIVE : BADGE_TEXT_NEGATIVE;
+  return (
+    <div className={pillClass} aria-label={`${trend === 'positive' ? 'Increase' : 'Decrease'} ${value}`}>
+      <ArrowLeftIcon />
+      <span className={textClass}>{value}</span>
+    </div>
+  );
+}
+
+/** 1 px vertical separator, stretches to container height */
+function VertDivider() {
+  return <div aria-hidden="true" className={VERT_DIVIDER} />;
+}
+
+/** 1 px horizontal separator, full width */
+function HorizDivider() {
+  return <div aria-hidden="true" className={HORIZ_DIVIDER} />;
+}
+
+/**
+ * Primary stat column: label + large value, optional badge in a row.
+ * gap-spacing-lg (12px) between label and value row.
+ * gap-spacing-md (8px) between value and badge (StatHighlight specific).
+ */
+function StatPrimaryBlock({
+  label,
+  value,
+  trend,
+  trendValue,
+  badgeGap = 'md',
+  valueAsFlexOne = false,
+  centerAlign = false,
+}: {
+  label: string;
+  value: string;
+  trend?: StatTrend;
+  trendValue?: string;
+  badgeGap?: 'md' | 'lg';
+  valueAsFlexOne?: boolean;
+  centerAlign?: boolean;
+}) {
+  const hasBadge = !!(trend && trendValue);
+  return (
+    <div className="flex flex-col gap-spacing-lg items-start w-full">
+      <p className={cn(LABEL_CLASS, centerAlign && 'text-center w-full')}>{label}</p>
+      {hasBadge ? (
+        <div
+          className={cn(
+            'flex items-center w-full',
+            badgeGap === 'md' ? 'gap-spacing-md' : 'gap-spacing-lg',
+            centerAlign && 'justify-center',
+          )}
+        >
+          <p className={cn(VALUE_LG_CLASS, valueAsFlexOne && 'flex-1 min-w-0')}>
+            {value}
+          </p>
+          <TrendBadge trend={trend} value={trendValue} />
+        </div>
+      ) : (
+        <p className={cn(VALUE_LG_CLASS, centerAlign && 'text-center w-full')}>{value}</p>
+      )}
+    </div>
+  );
+}
+
+/**
+ * A horizontal list row: label (flex-1) + value (shrink-0) + optional badge.
+ * gap-spacing-lg (12px) between items.
+ */
+function StatRow({ label, value, trend, trendValue }: NumberRow) {
+  return (
+    <div className="flex items-center gap-spacing-lg w-full shrink-0">
+      <p className={cn(LABEL_CLASS, 'flex-1 min-w-0')}>{label}</p>
+      <p className={VALUE_MD_CLASS}>{value}</p>
+      {trend && trendValue && <TrendBadge trend={trend} value={trendValue} />}
+    </div>
+  );
+}
+
+/** More-vertical (⋮) icon button for StatInlineGroup */
+function MoreVertBtn({ onClick }: { onClick?: () => void }) {
+  return (
+    <button type="button" onClick={onClick} aria-label="More options" className={MORE_BTN}>
+      <svg viewBox="0 0 24 24" className="size-[20px]" aria-hidden="true">
+        <circle cx="12" cy="5" r="1.75" fill="currentColor" />
+        <circle cx="12" cy="12" r="1.75" fill="currentColor" />
+        <circle cx="12" cy="19" r="1.75" fill="currentColor" />
+      </svg>
+    </button>
+  );
+}
+
+// ─── Type layouts ─────────────────────────────────────────────────────────────
+
+/** StatPair — label + large value, no badge. 338px wide. */
+function StatPairLayout({ label = 'Indicator Name', value = '422.61' }: NumberProps) {
+  return (
+    <div className="flex flex-col gap-spacing-lg">
+      <p className={LABEL_CLASS}>{label}</p>
+      <p className={VALUE_LG_CLASS}>{value}</p>
+    </div>
+  );
+}
+
+/** StatHighlight — label + large value + green badge. 338px wide. */
+function StatHighlightLayout({ label = 'Indicator Name', value = '422.61', trend, trendValue }: NumberProps) {
+  return (
+    <StatPrimaryBlock
+      label={label}
+      value={value}
+      trend={trend}
+      trendValue={trendValue}
+      badgeGap="md"
+      valueAsFlexOne
+    />
+  );
+}
+
+/** StatSplit — two label+value blocks side by side with a vertical divider. 696px wide. */
+function StatSplitLayout({
+  label = 'Indicator Name', value = '422.61',
+  label2 = 'Indicator Name', value2 = '422.61',
+}: NumberProps) {
+  return (
+    <div className="flex items-center gap-spacing-2xl">
+      <div className="flex flex-1 flex-col gap-spacing-lg min-w-0">
+        <p className={LABEL_CLASS}>{label}</p>
+        <p className={VALUE_LG_CLASS}>{value}</p>
+      </div>
+      <VertDivider />
+      <div className="flex flex-1 flex-col gap-spacing-lg min-w-0">
+        <p className={LABEL_CLASS}>{label2}</p>
+        <p className={VALUE_LG_CLASS}>{value2}</p>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * StatComparisonBlock — two columns; left has green badge, right has red badge.
+ * 696px wide.
+ */
+function StatComparisonBlockLayout({
+  label = 'Indicator Name', value = '422.61', trend = 'positive', trendValue = '12%',
+  label2 = 'Indicator Name', value2 = '422.61', trend2 = 'negative', trendValue2 = '12%',
+}: NumberProps) {
+  return (
+    <div className="flex items-center gap-spacing-2xl">
+      <StatPrimaryBlock
+        label={label}
+        value={value}
+        trend={trend}
+        trendValue={trendValue}
+        badgeGap="lg"
+      />
+      <VertDivider />
+      <StatPrimaryBlock
+        label={label2}
+        value={value2}
+        trend={trend2}
+        trendValue={trendValue2}
+        badgeGap="lg"
+      />
+    </div>
+  );
+}
+
+/**
+ * StatSideList — Left: label+value+badge. Right: 2 label-value rows with divider.
+ * 696px wide, gap-spacing-6xl between columns.
+ */
+function StatSideListLayout({
+  label = 'Indicator Name', value = '422.61', trend = 'positive', trendValue = '12%',
+  rows = [
+    { label: 'Indicator Name', value: '422.61' },
+    { label: 'Indicator Name', value: '422.61' },
+  ],
+}: NumberProps) {
+  return (
+    <div className="flex items-center gap-spacing-6xl">
+      {/* Left: primary highlight */}
+      <div className="flex flex-col gap-spacing-lg shrink-0">
+        <p className={LABEL_CLASS}>{label}</p>
+        <div className="flex items-center gap-spacing-lg">
+          <p className={VALUE_LG_CLASS}>{value}</p>
+          {trend && trendValue && <TrendBadge trend={trend} value={trendValue} />}
+        </div>
+      </div>
+      {/* Right: list rows */}
+      <div className="flex flex-1 flex-col gap-spacing-lg min-w-0 justify-center">
+        {rows.map((row, i) => (
+          <div key={i}>
+            {i > 0 && <HorizDivider />}
+            <div className={i > 0 ? 'pt-spacing-lg' : ''}>
+              <StatRow {...row} />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * StatExtendedPanel — header row: label+value+badge + ButtonMenu.
+ * Body: list of rows with horizontal dividers.
+ * 696px wide, flex-col with gap-spacing-4xl.
+ */
+function StatExtendedPanelLayout({
+  label = 'Indicator Name', value = '422.61', trend = 'positive', trendValue = '12%',
+  menuLabel = 'Options',
+  onMenuClick,
+  rows = [
+    { label: 'Indicator Name', value: '422.61', trend: 'positive' as const, trendValue: '12%' },
+    { label: 'Indicator Name', value: '422.61', trend: 'positive' as const, trendValue: '12%' },
+  ],
+}: NumberProps) {
+  return (
+    <div className="flex flex-col gap-spacing-4xl">
+      {/* Header: primary stat + ButtonMenu */}
+      <div className="flex items-start gap-spacing-lg w-full">
+        <div className="flex flex-1 flex-col gap-spacing-lg min-w-0">
+          <p className={LABEL_CLASS}>{label}</p>
+          <div className="flex items-center gap-spacing-lg">
+            <p className={VALUE_LG_CLASS}>{value}</p>
+            {trend && trendValue && <TrendBadge trend={trend} value={trendValue} />}
+          </div>
+        </div>
+        <ButtonMenu variant="secondary-solid" size="lg" onClick={onMenuClick}>
+          {menuLabel}
+        </ButtonMenu>
+      </div>
+      {/* Body: rows with dividers */}
+      <div className="flex flex-col gap-spacing-lg">
+        {rows.map((row, i) => (
+          <div key={i}>
+            {i > 0 && <div className="pb-spacing-lg"><HorizDivider /></div>}
+            <StatRow {...row} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * StatMixedStack — top: label + large value; below: 2 rows label+md value with dividers.
+ * 338px wide, flex-col with gap-spacing-3xl.
+ */
+function StatMixedStackLayout({
+  label = 'Indicator Name', value = '422.61',
+  rows = [
+    { label: 'Text', value: '422.61' },
+    { label: 'Text', value: '422.61' },
+  ],
+}: NumberProps) {
+  return (
+    <div className="flex flex-col gap-spacing-3xl">
+      {/* Top: large stat */}
+      <div className="flex flex-col gap-spacing-lg">
+        <p className={LABEL_CLASS}>{label}</p>
+        <p className={VALUE_LG_CLASS}>{value}</p>
+      </div>
+      {/* Bottom: divider-separated rows */}
+      <div className="flex flex-col gap-spacing-lg">
+        {rows.map((row, i) => (
+          <div key={i}>
+            {i > 0 && <div className="pb-spacing-lg"><HorizDivider /></div>}
+            <StatRow {...row} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * StatOptionBlock — centered: label + large value + badge.
+ * Bottom: one label+md value row.
+ * 338px wide, min-h-[287px], justify-between.
+ */
+function StatOptionBlockLayout({
+  label = 'Indicator Name', value = '422.61', trend = 'positive', trendValue = '12%',
+  rows = [{ label: 'Text', value: '422.61' }],
+}: NumberProps) {
+  return (
+    <div className="flex flex-col justify-between min-h-[287px]">
+      {/* Center section */}
+      <div className="flex flex-col items-center gap-spacing-xl w-full">
+        <p className={cn(LABEL_CLASS, 'text-center')}>{label}</p>
+        <p className={cn(VALUE_LG_CLASS, 'text-center')}>{value}</p>
+        {trend && trendValue && <TrendBadge trend={trend} value={trendValue} />}
+      </div>
+      {/* Bottom row */}
+      {rows[0] && <StatRow {...rows[0]} />}
+    </div>
+  );
+}
+
+/**
+ * StatDetailPair — left: label+value+badge; right: neutral-bg panel with 2 rows.
+ * 696px wide, gap-spacing-5xl between columns.
+ */
+function StatDetailPairLayout({
+  label = 'Indicator Name', value = '422.61', trend = 'positive', trendValue = '12%',
+  rows = [
+    { label: 'Text', value: '422.61' },
+    { label: 'Text', value: '422.61' },
+  ],
+}: NumberProps) {
+  return (
+    <div className="flex items-center gap-spacing-5xl">
+      {/* Left: primary stat */}
+      <div className="flex flex-1 flex-col gap-spacing-lg min-w-0">
+        <p className={LABEL_CLASS}>{label}</p>
+        <div className="flex items-center gap-spacing-lg">
+          <p className={VALUE_LG_CLASS}>{value}</p>
+          {trend && trendValue && <TrendBadge trend={trend} value={trendValue} />}
+        </div>
+      </div>
+      {/* Right: neutral detail panel */}
+      <div className={cn(DETAIL_PANEL, 'flex-1 min-w-0')}>
+        {rows.map((row, i) => (
+          <div key={i}>
+            {i > 0 && <div className="py-spacing-lg"><HorizDivider /></div>}
+            <StatRow {...row} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * StatInlineGroup — title row with more-vert button; two stat columns with vertical divider.
+ * 696px wide, flex-col with gap-spacing-2xl.
+ */
+function StatInlineGroupLayout({
+  title = 'Title',
+  label = 'Indicator Name', value = '422.61',
+  label2 = 'Indicator Name', value2 = '422.61',
+  onMoreClick,
+}: NumberProps) {
+  return (
+    <div className="flex flex-col gap-spacing-2xl">
+      {/* Title row */}
+      <div className="flex items-start gap-spacing-md w-full">
+        <p className={cn(TITLE_CLASS, 'flex-1 min-w-0')}>{title}</p>
+        <MoreVertBtn onClick={onMoreClick} />
+      </div>
+      {/* Two stats with vertical divider */}
+      <div className="flex items-center gap-spacing-2xl min-h-[110px]">
+        <div className="flex flex-1 flex-col gap-spacing-lg min-w-0">
+          <p className={LABEL_CLASS}>{label}</p>
+          <p className={VALUE_LG_CLASS}>{value}</p>
+        </div>
+        <VertDivider />
+        <div className="flex flex-1 flex-col gap-spacing-lg min-w-0">
+          <p className={LABEL_CLASS}>{label2}</p>
+          <p className={VALUE_LG_CLASS}>{value2}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * StatHeaderSplit — two stacked StatHighlight blocks (each with label+value+badge).
+ * 338px wide, flex-col with gap-spacing-2xl.
+ */
+function StatHeaderSplitLayout({
+  label = 'Indicator Name', value = '422.61', trend = 'positive', trendValue = '12%',
+  label2 = 'Indicator Name', value2 = '422.61', trend2 = 'negative', trendValue2 = '12%',
+}: NumberProps) {
+  return (
+    <div className="flex flex-col gap-spacing-2xl">
+      <StatPrimaryBlock
+        label={label}
+        value={value}
+        trend={trend}
+        trendValue={trendValue}
+        badgeGap="lg"
+      />
+      <StatPrimaryBlock
+        label={label2}
+        value={value2}
+        trend={trend2}
+        trendValue={trendValue2}
+        badgeGap="lg"
+      />
+    </div>
+  );
+}
+
+/**
+ * StatListStack — 3 label+md value rows separated by horizontal dividers.
+ * 338px wide, min-h-[280px].
+ */
+function StatListStackLayout({
+  rows = [
+    { label: 'Text', value: '422.61' },
+    { label: 'Text', value: '422.61' },
+    { label: 'Text', value: '422.61' },
+  ],
+}: NumberProps) {
+  return (
+    <div className="flex flex-col gap-spacing-xl min-h-[280px] justify-center">
+      {rows.map((row, i) => (
+        <div key={i}>
+          {i > 0 && <div className="pb-spacing-xl"><HorizDivider /></div>}
+          <StatRow {...row} />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ─── Number ─────────────────────────────────────────────────────────────────
+
+const LAYOUTS: Record<string, (props: NumberProps) => React.JSX.Element> = {
+  StatPair: StatPairLayout,
+  StatHighlight: StatHighlightLayout,
+  StatSplit: StatSplitLayout,
+  StatComparisonBlock: StatComparisonBlockLayout,
+  StatSideList: StatSideListLayout,
+  StatExtendedPanel: StatExtendedPanelLayout,
+  StatMixedStack: StatMixedStackLayout,
+  StatOptionBlock: StatOptionBlockLayout,
+  StatDetailPair: StatDetailPairLayout,
+  StatInlineGroup: StatInlineGroupLayout,
+  StatHeaderSplit: StatHeaderSplitLayout,
+  StatListStack: StatListStackLayout,
+};
+
+export function Number({ type = 'StatPair', className, ...props }: NumberProps) {
+  const Layout = LAYOUTS[type] ?? StatPairLayout;
+  return (
+    <div className={cn(CARD_BASE, className)}>
+      <Layout type={type} {...props} />
+    </div>
+  );
+}