sdaia-ui 1.0.1 → 1.0.2

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

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

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

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

package/src/components/Number/Number.tsx

@@ -1,497 +0,0 @@
-'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>
-  );
-}